:root { --radius-lg: 28px; --radius-md: 18px; --radius-sm: 12px; --max-width: 1180px; } /* Theme switch: change data-theme on to atelier, walnut, or graphite. */ body, body[data-theme="atelier"] { --page-top: #f7f5f0; --bg: #ebe8e0; --bg-strong: #d9d7ce; --surface-rgb: 255, 252, 247; --surface: rgba(var(--surface-rgb), 0.88); --surface-strong: #fffdfa; --ink: #1d2321; --ink-rgb: 29, 35, 33; --muted: #66706c; --line: rgba(var(--ink-rgb), 0.1); --accent: #4c6a61; --accent-rgb: 76, 106, 97; --accent-deep: #2f463f; --accent-deep-rgb: 47, 70, 63; --forest: #5b736b; --forest-rgb: 91, 115, 107; --highlight: #c18b55; --highlight-rgb: 193, 139, 85; --footer-bg: #171b1a; --footer-bg-rgb: 23, 27, 26; --footer-text: #eee8df; --footer-text-rgb: 238, 232, 223; --header-bg: rgba(248, 247, 242, 0.78); --page-grid-rgb: 29, 35, 33; --hero-overlay-rgb: 15, 14, 13; --shadow: 0 18px 45px rgba(24, 29, 27, 0.1); } body[data-theme="walnut"] { --page-top: #fbf6ef; --bg: #f3ede3; --bg-strong: #e3d2bc; --surface-rgb: 255, 251, 245; --surface: rgba(var(--surface-rgb), 0.88); --surface-strong: #fffaf4; --ink: #1c1814; --ink-rgb: 28, 24, 20; --muted: #62584f; --line: rgba(var(--ink-rgb), 0.1); --accent: #b26a34; --accent-rgb: 178, 106, 52; --accent-deep: #7d4318; --accent-deep-rgb: 125, 67, 24; --forest: #33443f; --forest-rgb: 51, 68, 63; --highlight: #c98a3c; --highlight-rgb: 201, 138, 60; --footer-bg: #1b1815; --footer-bg-rgb: 27, 24, 21; --footer-text: #f5ecdf; --footer-text-rgb: 245, 236, 223; --header-bg: rgba(249, 243, 235, 0.74); --page-grid-rgb: 30, 26, 23; --hero-overlay-rgb: 18, 14, 10; --shadow: 0 18px 45px rgba(31, 22, 16, 0.09); } body[data-theme="graphite"] { --page-top: #f4f6f7; --bg: #e7eaec; --bg-strong: #d5dbe0; --surface-rgb: 252, 253, 253; --surface: rgba(var(--surface-rgb), 0.9); --surface-strong: #ffffff; --ink: #1b2228; --ink-rgb: 27, 34, 40; --muted: #66717b; --line: rgba(var(--ink-rgb), 0.1); --accent: #47616f; --accent-rgb: 71, 97, 111; --accent-deep: #2f4450; --accent-deep-rgb: 47, 68, 80; --forest: #5d756c; --forest-rgb: 93, 117, 108; --highlight: #b98752; --highlight-rgb: 185, 135, 82; --footer-bg: #161a1d; --footer-bg-rgb: 22, 26, 29; --footer-text: #edf0f1; --footer-text-rgb: 237, 240, 241; --header-bg: rgba(246, 248, 249, 0.78); --page-grid-rgb: 27, 34, 40; --hero-overlay-rgb: 17, 20, 23; --shadow: 0 18px 45px rgba(20, 25, 31, 0.11); } *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; font-family: "Instrument Sans", Arial, sans-serif; color: var(--ink); background: radial-gradient(circle at top left, rgba(var(--highlight-rgb), 0.14), transparent 34%), radial-gradient(circle at 100% 0, rgba(var(--forest-rgb), 0.08), transparent 28%), linear-gradient(180deg, var(--page-top) 0%, var(--bg) 42%, var(--bg-strong) 100%); } body::before { content: ""; position: fixed; inset: 0; background-image: linear-gradient(rgba(var(--page-grid-rgb), 0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(var(--page-grid-rgb), 0.03) 1px, transparent 1px); background-size: 84px 84px; pointer-events: none; mask-image: radial-gradient(circle at center, black 45%, transparent 90%); } a { color: inherit; text-decoration: none; } img { max-width: 100%; } code { padding: 0.15rem 0.35rem; border-radius: 6px; background: rgba(var(--ink-rgb), 0.06); font-family: Consolas, monospace; font-size: 0.92em; } .container { width: min(calc(100% - 2rem), var(--max-width)); margin: 0 auto; } .site-shell { position: relative; z-index: 1; } .site-header { position: sticky; top: 0; z-index: 10; padding: 1rem 0 0.85rem; backdrop-filter: blur(20px); background: var(--header-bg); border-bottom: 1px solid rgba(var(--ink-rgb), 0.06); } .header-row { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 1rem; } .brand { display: inline-flex; align-items: center; gap: 0.8rem; min-width: 0; max-width: 100%; } .brand-mark-icon { display: block; width: clamp(4.35rem, 8vw, 5.85rem); height: auto; flex: 0 0 auto; } .brand-logo { display: block; width: clamp(220px, 23vw, 296px); height: auto; max-width: 100%; } .brand-mark { display: inline-grid; place-items: center; width: 2.6rem; height: 2.6rem; border-radius: 50%; background: linear-gradient(160deg, var(--accent), var(--accent-deep)); color: var(--footer-text); font-family: "Plus Jakarta Sans", Arial, sans-serif; font-size: 1.5rem; font-weight: 700; } .brand-text { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; } .brand-text strong { color: var(--ink); font-size: 0.94rem; letter-spacing: 0.08em; text-transform: uppercase; line-height: 1; } .brand-text small, .section-kicker, .eyebrow, .card-kicker, .panel-label, .footer-kicker, .footer-label, .badge-label { font-size: 0.82rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); } .site-nav { display: inline-flex; justify-self: center; gap: 1.5rem; font-weight: 500; } .site-nav a { position: relative; } .site-nav a::after { content: ""; position: absolute; left: 0; bottom: -0.3rem; width: 100%; height: 1px; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform 180ms ease; } .site-nav a:hover::after, .site-nav a:focus-visible::after { transform: scaleX(1); } .header-cta { display: inline-flex; align-items: center; justify-self: end; flex-wrap: wrap; gap: 0.75rem; } .contact-pill { display: inline-grid; gap: 0.1rem; min-height: 2.9rem; padding: 0.55rem 1rem; border-radius: 999px; border: 1px solid rgba(30, 26, 23, 0.12); background: rgba(255, 250, 243, 0.9); box-shadow: 0 12px 28px rgba(31, 22, 16, 0.08); } .contact-pill-label { font-size: 0.66rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); } .contact-pill strong { font-size: 0.98rem; letter-spacing: -0.02em; } .whatsapp-pill { background: rgba(51, 68, 63, 0.1); border-color: rgba(51, 68, 63, 0.18); } .header-proof { display: flex; flex-wrap: wrap; gap: 0.7rem; margin-top: 0.95rem; } .trust-badge { display: inline-flex; align-items: center; gap: 0.55rem; padding: 0.5rem 0.75rem; border-radius: 999px; border: 1px solid rgba(28, 24, 20, 0.08); background: rgba(255, 250, 243, 0.74); font-size: 0.82rem; color: var(--ink); } .trust-badge-icon { display: inline-grid; place-items: center; width: 1.6rem; height: 1.6rem; border-radius: 50%; background: rgba(28, 24, 20, 0.9); color: #f9f3ea; font-size: 0.62rem; font-weight: 700; letter-spacing: 0.08em; } .link-pill, .button { display: inline-flex; align-items: center; justify-content: center; min-height: 2.9rem; padding: 0 1.1rem; border-radius: 999px; border: 1px solid transparent; font-weight: 600; transition: transform 180ms ease, background 180ms ease, border-color 180ms ease; } .button:hover, .button:focus-visible, .link-pill:hover, .link-pill:focus-visible { transform: translateY(-1px); } .button-primary { background: linear-gradient(135deg, var(--accent), var(--accent-deep)); color: #fff7ee; box-shadow: 0 12px 30px rgba(110, 63, 24, 0.22); } .button-secondary, .link-pill { border-color: rgba(30, 26, 23, 0.12); background: rgba(255, 250, 243, 0.7); } .button-full { width: 100%; } .nav-toggle { display: none; min-height: 2.8rem; justify-self: end; border: 1px solid rgba(30, 26, 23, 0.14); border-radius: 999px; background: rgba(255, 250, 243, 0.74); padding: 0 1rem; font: inherit; } .hero-section, .services-section, .split-section, .process-section, .coverage-section, .contact-section { padding: 5rem 0; } .hero-grid, .split-grid, .contact-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: 2rem; align-items: center; } .hero-copy h1, .section-intro h2, .split-section h2, .coverage-section h2, .contact-section h2, .site-footer h2 { margin: 0.35rem 0 1rem; font-family: "Plus Jakarta Sans", Arial, sans-serif; font-size: clamp(2.8rem, 7vw, 5.8rem); line-height: 1; font-weight: 700; letter-spacing: -0.05em; } .section-intro h2, .split-section h2, .coverage-section h2, .contact-section h2, .site-footer h2 { font-size: clamp(2.2rem, 4vw, 3.5rem); } .hero-text, .section-intro p, .split-section p, .feature-item p, .service-card p, .contact-section p, .site-footer p, .process-card p { color: var(--muted); line-height: 1.72; } .hero-actions { display: flex; flex-wrap: wrap; gap: 0.9rem; margin: 2rem 0 1.8rem; } .proof-strip, .coverage-list, .footer-list, .contact-notes { list-style: none; padding: 0; margin: 0; } .proof-strip { display: flex; flex-wrap: wrap; gap: 0.85rem; } .proof-strip li, .coverage-list li { padding: 0.65rem 0.9rem; border: 1px solid rgba(30, 26, 23, 0.1); border-radius: 999px; background: rgba(255, 250, 243, 0.72); } .hero-visual { position: relative; min-height: 540px; padding: 1rem 0 1rem 2rem; } .hero-visual::before { content: ""; position: absolute; inset: 2rem 0 0 10%; border-radius: var(--radius-lg); background: linear-gradient(160deg, rgba(51, 68, 63, 0.92), rgba(30, 26, 23, 0.96)); box-shadow: var(--shadow); } .visual-panel { position: relative; margin-left: auto; width: min(100%, 22rem); padding: 1.4rem; border-radius: var(--radius-md); background: linear-gradient(180deg, rgba(255, 250, 243, 0.95), rgba(247, 239, 227, 0.88)); box-shadow: 0 16px 35px rgba(20, 16, 12, 0.15); } .visual-panel strong { display: block; margin-top: 0.55rem; font-size: 1.3rem; } .visual-panel p { margin-bottom: 0; color: #544b42; line-height: 1.6; } .visual-panel-large { top: 2rem; left: -2rem; width: min(100%, 24rem); padding: 1.8rem; } .visual-stack { position: absolute; right: 0; bottom: 2rem; display: grid; gap: 1rem; } .section-intro { display: grid; gap: 0.5rem; margin-bottom: 2rem; } .section-intro.narrow { max-width: 48rem; } .service-grid, .process-grid, .footer-grid { display: grid; gap: 1.25rem; } .service-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } .service-card, .process-card, .feature-item, .contact-card { border: 1px solid rgba(30, 26, 23, 0.08); background: var(--surface); border-radius: var(--radius-lg); box-shadow: var(--shadow); backdrop-filter: blur(10px); } .service-card, .process-card, .feature-item { padding: 1.5rem; } .split-section { position: relative; } .split-section::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(255, 250, 243, 0.72), rgba(239, 228, 214, 0.45)); z-index: -1; } .feature-list { display: grid; gap: 1rem; } .process-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .process-card { min-height: 200px; display: grid; gap: 1rem; } .process-step { font-size: 0.85rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); } .coverage-grid { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 1.5rem; align-items: center; } .coverage-list { display: flex; flex-wrap: wrap; gap: 0.85rem; } .contact-card { padding: 1.5rem; } .field-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; } .contact-form { display: grid; gap: 1rem; } .contact-form label { display: grid; gap: 0.45rem; color: var(--ink); font-weight: 600; } .contact-form input, .contact-form select, .contact-form textarea { width: 100%; border: 1px solid rgba(30, 26, 23, 0.14); border-radius: 16px; background: rgba(255, 255, 255, 0.92); padding: 0.95rem 1rem; font: inherit; color: var(--ink); } .contact-form textarea { resize: vertical; min-height: 160px; } .contact-form input:focus-visible, .contact-form select:focus-visible, .contact-form textarea:focus-visible, .button:focus-visible, .link-pill:focus-visible, .nav-toggle:focus-visible { outline: 2px solid rgba(var(--accent-rgb), 0.4); outline-offset: 2px; } .form-alert { margin-bottom: 1rem; border-radius: 16px; padding: 0.9rem 1rem; font-weight: 600; } .form-alert-success { background: rgba(var(--accent-rgb), 0.12); color: var(--accent-deep); } .form-alert-error { background: rgba(157, 38, 38, 0.12); color: #6d1c1c; } .honeypot-field { position: absolute; left: -9999px; } .contact-notes, .footer-list { display: grid; gap: 0.65rem; color: var(--muted); } .turnstile-slot:empty { display: none; } .site-footer { padding: 3.5rem 0 2rem; border-top: 1px solid rgba(30, 26, 23, 0.08); } .footer-grid { grid-template-columns: minmax(0, 1.18fr) minmax(0, 0.82fr); align-items: start; gap: 2rem; } .footer-primary { max-width: 34rem; } .footer-brand-lockup { display: inline-flex; align-items: center; gap: 1rem; max-width: 100%; margin-bottom: 1.2rem; padding: 0.95rem 1.1rem; border-radius: 22px; background: linear-gradient(180deg, rgba(255, 250, 244, 0.98), rgba(239, 227, 210, 0.94)); box-shadow: 0 18px 34px rgba(0, 0, 0, 0.18); } .footer-brand-mark { display: block; width: clamp(5.3rem, 11vw, 7.2rem); height: auto; flex: 0 0 auto; } .footer-brand-copy { display: flex; flex-direction: column; gap: 0.22rem; } .footer-brand-copy strong { color: #1c1713; font-size: 1.02rem; letter-spacing: 0.09em; text-transform: uppercase; line-height: 1; } .footer-brand-copy small { color: rgba(28, 23, 19, 0.72); font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase; } .footer-primary h2 { margin-top: 0; } .footer-links-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; align-content: start; } .footer-contact-block { grid-column: 1 / -1; display: grid; gap: 0.8rem; align-content: start; } .footer-contact-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.85rem; } .footer-contact-list li { padding: 0.95rem 1rem; border: 1px solid rgba(var(--footer-text-rgb), 0.12); border-radius: 1rem; background: rgba(var(--footer-text-rgb), 0.03); color: rgba(var(--footer-text-rgb), 0.84); line-height: 1.6; } .footer-contact-list li:last-child { grid-column: 1 / -1; } .footer-contact-list a { color: var(--footer-text); font-weight: 600; overflow-wrap: anywhere; } .footer-bottom { margin-top: 2rem; padding-top: 1rem; border-top: 1px solid rgba(30, 26, 23, 0.08); color: var(--muted); font-size: 0.94rem; } .footer-email { display: inline-block; margin-top: 1rem; color: var(--accent-deep); font-weight: 600; } .site-header { background: var(--header-bg); border-bottom: 1px solid rgba(var(--ink-rgb), 0.08); } .header-row { gap: 1.4rem; } .brand-text strong { font-size: 0.84rem; letter-spacing: 0.1em; } .brand-text small { letter-spacing: 0.08em; font-size: 0.72rem; } .site-nav { gap: 1.3rem; font-size: 0.95rem; } .button-primary { background: linear-gradient(135deg, var(--accent), var(--accent-deep)); } .button-secondary { background: rgba(255, 250, 243, 0.9); } .hero-section { padding: 6.2rem 0 4rem; } .hero-grid { grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); gap: 3rem; align-items: center; } .eyebrow { max-width: 44rem; } .hero-copy h1 { max-width: 13ch; margin-bottom: 1.25rem; font-size: clamp(3.1rem, 6vw, 5.1rem); line-height: 0.94; } .hero-text { max-width: 42rem; font-size: 1.06rem; } .proof-strip li { background: rgba(255, 250, 243, 0.86); border-color: rgba(28, 24, 20, 0.08); } .hero-visual { position: relative; min-height: 760px; padding: 0 0 0 4rem; } .hero-visual::before { display: none; } .hero-image-frame { position: relative; margin: 0; overflow: hidden; border-radius: 2rem; border: 1px solid rgba(28, 24, 20, 0.08); background: rgba(255, 250, 243, 0.7); box-shadow: 0 35px 70px rgba(28, 24, 20, 0.18); } .hero-image-frame img { display: block; width: 100%; aspect-ratio: 1 / 1.1; object-fit: cover; } .hero-badge { position: absolute; max-width: 17rem; padding: 1rem 1.1rem; border: 1px solid rgba(28, 24, 20, 0.08); border-radius: 1.25rem; background: rgba(255, 250, 243, 0.94); box-shadow: 0 18px 40px rgba(28, 24, 20, 0.14); } .hero-badge strong { display: block; margin: 0.35rem 0 0.4rem; font-size: 1.06rem; } .hero-badge p { margin: 0; color: var(--muted); line-height: 1.55; } .hero-badge-top { top: -1.1rem; left: 0; } .hero-badge-bottom { right: -1rem; bottom: 2.4rem; } .seo-strip { padding: 0 0 2rem; } .seo-strip-row { display: flex; flex-wrap: wrap; gap: 0.75rem; } .seo-strip-row p { margin: 0; padding: 0.65rem 0.9rem; border-radius: 999px; background: rgba(28, 24, 20, 0.86); color: #f9f3ea; font-size: 0.86rem; letter-spacing: 0.06em; text-transform: uppercase; } .section-heading { display: grid; gap: 0.6rem; max-width: 60rem; margin-bottom: 2.5rem; } .section-heading-tight { max-width: 54rem; } .section-heading h2, .why-copy h2, .cta-band h2, .area-grid h2, .faq-section h2, .contact-copy h2 { margin: 0; font-family: "Plus Jakarta Sans", Arial, sans-serif; font-size: clamp(2rem, 4vw, 3.15rem); line-height: 1.02; letter-spacing: -0.04em; } .section-copy { margin: 0; color: var(--muted); line-height: 1.78; } .services-section, .work-section, .why-section, .reviews-section, .closing-section, .process-section, .area-section, .faq-section, .contact-section { padding: 5.4rem 0; } @keyframes drift-float { from { transform: translate3d(0, 0, 0) scale(1); } to { transform: translate3d(26px, -18px, 0) scale(1.08); } } .services-section, .reviews-section, .area-section { position: relative; overflow: hidden; } .services-section::before, .reviews-section::before, .area-section::after { content: ""; position: absolute; width: 22rem; height: 22rem; border-radius: 50%; pointer-events: none; z-index: -1; animation: drift-float 14s ease-in-out infinite alternate; } .services-section::before { top: 1rem; right: -8rem; background: radial-gradient(circle, rgba(178, 106, 52, 0.18), rgba(178, 106, 52, 0) 70%); } .reviews-section::before { left: -7rem; bottom: 1rem; background: radial-gradient(circle, rgba(51, 68, 63, 0.14), rgba(51, 68, 63, 0) 72%); animation-duration: 16s; } .area-section::after { top: 0; right: -9rem; background: radial-gradient(circle, rgba(245, 188, 140, 0.2), rgba(245, 188, 140, 0) 70%); animation-duration: 17s; } .service-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.35rem; } .service-card { overflow: hidden; padding: 0; background: linear-gradient(180deg, rgba(255, 251, 246, 0.96), rgba(252, 246, 238, 0.88)); transition: transform 240ms ease, box-shadow 240ms ease, border-color 240ms ease; } .service-card:hover, .project-card:hover, .testimonial-card:hover, .closing-card:hover, .process-card:hover, .why-item:hover, .faq-item:hover, .contact-panel:hover, .area-panel:hover { transform: translateY(-6px); border-color: rgba(125, 67, 24, 0.16); box-shadow: 0 28px 50px rgba(31, 22, 16, 0.14); } .service-card-feature { background: linear-gradient(180deg, rgba(255, 251, 246, 0.98), rgba(244, 233, 216, 0.92)); } .service-card-media { position: relative; margin: 0; overflow: hidden; } .service-card-media::after { content: ""; position: absolute; inset: auto 0 0; height: 38%; background: linear-gradient(180deg, rgba(28, 24, 20, 0), rgba(28, 24, 20, 0.16)); } .service-card-media img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; transition: transform 320ms ease, filter 320ms ease; } .service-card:hover .service-card-media img { transform: scale(1.04); filter: saturate(1.03); } .service-card-body { display: grid; gap: 0.55rem; padding: 1.2rem 1.3rem 1.45rem; } .service-card h3, .project-body h3, .why-item h3, .faq-item h3, .contact-panel h3, .process-card h3 { margin: 0 0 0.7rem; font-family: "Plus Jakarta Sans", Arial, sans-serif; font-size: 1.32rem; line-height: 1.16; letter-spacing: -0.03em; } .service-card .card-kicker { color: var(--accent-deep); } .service-card h4, .project-body h4, .contact-panel h4, .process-card h4 { margin: 1rem 0 0.45rem; font-size: 0.82rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent-deep); } .bullet-list { margin: 0; padding-left: 1.1rem; color: var(--muted); display: grid; gap: 0.45rem; } .work-section { position: relative; } .work-section::before { content: ""; position: absolute; inset: 1.5rem 0 0; background: linear-gradient(180deg, rgba(255, 250, 243, 0.62), rgba(233, 220, 202, 0.42)); z-index: -1; } .project-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.9fr) minmax(0, 0.9fr); gap: 1.25rem; } .project-card { overflow: hidden; border: 1px solid rgba(28, 24, 20, 0.08); border-radius: 1.7rem; background: rgba(255, 251, 246, 0.92); box-shadow: var(--shadow); transition: transform 240ms ease, box-shadow 240ms ease, border-color 240ms ease; } .project-card-large { grid-row: span 2; } .project-media { margin: 0; } .project-media img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 320ms ease; } .project-card:hover .project-media img { transform: scale(1.03); } .project-card-large .project-media img { min-height: 30rem; } .project-body { display: grid; gap: 0.55rem; padding: 1.35rem 1.35rem 1.5rem; } .project-body p { margin: 0; color: var(--muted); line-height: 1.68; } .project-note { font-size: 0.96rem; } .text-link { display: inline-flex; align-items: center; gap: 0.45rem; margin-top: 0.2rem; color: var(--accent-deep); font-weight: 700; } .text-link::after { content: "->"; } .why-grid { display: grid; grid-template-columns: minmax(0, 0.88fr) minmax(0, 1.12fr); gap: 2rem; align-items: stretch; } .detail-frame { margin: 0; height: 100%; min-height: 42rem; overflow: hidden; border-radius: 1.8rem; border: 1px solid rgba(28, 24, 20, 0.08); box-shadow: var(--shadow); } .detail-frame img { display: block; width: 100%; height: 100%; object-fit: cover; } .why-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin-top: 1.6rem; } .why-item, .contact-panel, .faq-item { padding: 1.2rem 1.25rem; border: 1px solid rgba(28, 24, 20, 0.08); border-radius: 1.25rem; background: rgba(255, 251, 246, 0.8); box-shadow: var(--shadow); transition: transform 240ms ease, box-shadow 240ms ease, border-color 240ms ease; } .why-item p, .contact-panel p, .faq-item p { margin: 0; color: var(--muted); line-height: 1.7; } .testimonial-grid, .closing-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; } .testimonial-card, .closing-card { padding: 1.4rem; border: 1px solid rgba(28, 24, 20, 0.08); border-radius: 1.45rem; background: rgba(255, 251, 246, 0.88); box-shadow: var(--shadow); transition: transform 240ms ease, box-shadow 240ms ease, border-color 240ms ease; } .testimonial-card-review { position: relative; overflow: hidden; } .testimonial-card-review::before { content: ""; position: absolute; inset: -2rem auto auto -2rem; width: 8rem; height: 8rem; border-radius: 50%; background: radial-gradient(circle, rgba(178, 106, 52, 0.18), rgba(178, 106, 52, 0) 72%); } .testimonial-topline, .testimonial-author { display: flex; align-items: center; gap: 0.7rem; flex-wrap: wrap; } .testimonial-topline-plain { margin-bottom: 0.2rem; } .testimonial-stars { color: var(--highlight); font-size: 0.96rem; letter-spacing: 0.14em; text-shadow: 0 2px 8px rgba(var(--highlight-rgb), 0.2); } .testimonial-chip { display: inline-flex; align-items: center; min-height: 2rem; padding: 0 0.85rem; border-radius: 999px; background: rgba(var(--highlight-rgb), 0.12); color: var(--accent-deep); font-size: 0.82rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; } .testimonial-label, .testimonial-meta { margin: 0; color: var(--muted); font-size: 0.82rem; letter-spacing: 0.08em; text-transform: uppercase; } .testimonial-author { flex-wrap: nowrap; gap: 0.62rem; margin-top: 1rem; } .testimonial-avatar { display: block; width: 2.9rem; height: 2.9rem; border-radius: 50%; object-fit: cover; object-position: center; border: 2px solid rgba(255, 255, 255, 0.94); background: rgba(var(--paper-rgb), 0.94); box-shadow: 0 12px 24px rgba(var(--shadow-rgb), 0.14); } .testimonial-meta { flex: 1 1 auto; min-width: 0; font-size: 0.78rem; line-height: 1.35; letter-spacing: 0.03em; text-transform: none; } .testimonial-avatar-accent { background: linear-gradient(135deg, rgba(var(--forest-rgb), 0.18), rgba(var(--forest-rgb), 0.34)); color: var(--forest); } .testimonial-card blockquote { margin: 1rem 0 1.2rem; font-family: "Plus Jakarta Sans", Arial, sans-serif; font-size: 1.02rem; line-height: 1.75; color: var(--ink); } .closing-card h3 { margin: 0.45rem 0 0.7rem; font-family: "Plus Jakarta Sans", Arial, sans-serif; font-size: 1.32rem; line-height: 1.16; letter-spacing: -0.03em; } .closing-card p:last-child { margin: 0; color: var(--muted); line-height: 1.72; } .cta-band { padding: 1.3rem 0 0; } .cta-band-row { display: grid; grid-template-columns: minmax(0, 1.2fr) auto; align-items: start; gap: 1.8rem; padding: 2.1rem 2.2rem; border-radius: 2rem; position: relative; overflow: hidden; border: 1px solid rgba(var(--accent-rgb), 0.12); background: linear-gradient(135deg, rgba(255, 252, 247, 0.98), rgba(244, 238, 229, 0.96)), linear-gradient(120deg, rgba(var(--highlight-rgb), 0.08), rgba(var(--accent-rgb), 0.06)); color: var(--ink); box-shadow: 0 26px 58px rgba(var(--footer-bg-rgb), 0.1); } .cta-band-row::before { content: ""; position: absolute; right: -7rem; top: -8rem; width: 24rem; height: 24rem; border-radius: 50%; background: radial-gradient(circle, rgba(var(--highlight-rgb), 0.22) 0%, rgba(var(--highlight-rgb), 0.08) 38%, rgba(var(--highlight-rgb), 0) 72%); pointer-events: none; } .cta-band-row::after { content: ""; position: absolute; left: 0; top: 0; right: 0; height: 4px; background: linear-gradient(90deg, var(--highlight), rgba(var(--accent-rgb), 0.82), rgba(var(--accent-rgb), 0)); } .cta-band-copy, .cta-band-actions-wrap { position: relative; z-index: 1; } .cta-band .section-kicker, .cta-band h2 { color: var(--ink); } .cta-band .section-kicker { color: var(--accent-deep); } .cta-band h2 { max-width: 10ch; } .cta-band .section-copy { max-width: 42rem; color: var(--muted); line-height: 1.72; } .cta-band-note { display: inline-flex; align-items: center; margin: 0.9rem 0 0; padding: 0.8rem 1rem; border-radius: 999px; border: 1px solid rgba(var(--highlight-rgb), 0.2); background: rgba(var(--highlight-rgb), 0.12); color: #6d4b2a; font-size: 0.95rem; font-weight: 600; line-height: 1.45; } .cta-band-actions-wrap { justify-self: end; display: grid; gap: 0.85rem; min-width: min(100%, 22rem); padding: 1rem; border-radius: 1.4rem; border: 1px solid rgba(var(--accent-rgb), 0.12); background: rgba(255, 255, 255, 0.55); backdrop-filter: blur(10px); } .cta-band-actions { display: flex; flex-wrap: wrap; gap: 0.8rem; justify-content: flex-start; } .cta-band .button-primary { background: linear-gradient(135deg, var(--highlight), #9b6434); color: #fffaf3; box-shadow: 0 14px 28px rgba(var(--highlight-rgb), 0.28); } .cta-band .button-secondary { border-color: rgba(var(--accent-rgb), 0.16); background: rgba(255, 255, 255, 0.72); color: var(--ink); } .cta-band-contact { margin: 0; color: var(--muted); font-size: 0.95rem; line-height: 1.6; } .cta-band-contact a { color: var(--accent-deep); font-weight: 700; text-decoration: none; } .process-grid-four { grid-template-columns: repeat(4, minmax(0, 1fr)); } .process-card { min-height: 240px; padding: 1.45rem; background: rgba(255, 251, 246, 0.86); transition: transform 240ms ease, box-shadow 240ms ease, border-color 240ms ease; } .process-card p { margin: 0; } .area-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.86fr); gap: 1.8rem; align-items: start; } .area-copy-stack { display: grid; align-content: start; gap: 1.25rem; } .area-aside { align-self: start; } .area-map-frame, .area-panel { overflow: hidden; border: 1px solid rgba(28, 24, 20, 0.08); border-radius: 1.45rem; background: rgba(255, 251, 246, 0.88); box-shadow: var(--shadow); } .area-map-frame iframe { display: block; width: 100%; min-height: 320px; border: 0; } .area-panel { padding: 1.25rem; transition: transform 240ms ease, box-shadow 240ms ease, border-color 240ms ease; } .area-panel h3 { margin: 0.35rem 0 0.65rem; font-family: "Plus Jakarta Sans", Arial, sans-serif; font-size: 1.28rem; line-height: 1.18; letter-spacing: -0.03em; } .area-panel p { margin: 0; color: var(--muted); line-height: 1.72; } .area-panel .text-link { margin-top: 1rem; } .area-panel-location { display: grid; gap: 1rem; max-width: 38rem; } .area-panel-wide { margin-top: 1.2rem; display: grid; grid-template-columns: minmax(0, 1.1fr) auto; gap: 1.5rem; align-items: center; } .area-panel-copy { display: grid; gap: 0.3rem; } .area-panel-wide .area-list { justify-content: flex-end; } .area-panel-wide .text-link { grid-column: 1 / -1; } .area-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.8rem; } .area-list li { padding: 0.8rem 1rem; border-radius: 999px; background: rgba(255, 250, 243, 0.88); border: 1px solid rgba(28, 24, 20, 0.08); } .faq-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; } .contact-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 0.88fr); gap: 2rem; align-items: start; } .contact-section-shell { display: grid; gap: 1.25rem; } .contact-panel-list { display: grid; gap: 1rem; margin-top: 1.5rem; } .contact-panel-list-wide { margin-top: 0; grid-template-columns: repeat(3, minmax(0, 1fr)); } .contact-action-row { display: flex; flex-wrap: wrap; gap: 0.8rem; margin-top: 1.5rem; } .contact-card { padding: 1.6rem; background: linear-gradient(180deg, rgba(255, 251, 246, 0.98), rgba(250, 242, 231, 0.9)); } .contact-form textarea { min-height: 180px; } .site-footer { padding: 4rem 0 2rem; background: var(--footer-bg); border-top: 0; color: var(--footer-text); } .site-footer h2, .site-footer p, .site-footer li, .footer-bottom { color: rgba(var(--footer-text-rgb), 0.82); } .site-footer .footer-kicker, .site-footer .footer-label { color: rgba(var(--footer-text-rgb), 0.62); } .site-footer h2 { max-width: 17ch; font-size: clamp(1.45rem, 2.5vw, 2rem); line-height: 1.08; letter-spacing: -0.03em; } .js .reveal-up { opacity: 0; transform: translateY(24px) scale(0.985); transition: opacity 620ms ease, transform 620ms ease; will-change: transform, opacity; } .js .reveal-up.is-visible { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .services-section::before, .reviews-section::before, .area-section::after { animation: none; } .js .reveal-up { opacity: 1; transform: none; transition: none; } .service-card, .project-card, .testimonial-card, .closing-card, .process-card, .why-item, .faq-item, .contact-panel, .area-panel, .service-card-media img, .project-media img { transition: none; } } .thanks-page { min-height: 100vh; display: grid; place-items: center; padding: 2rem 0; } .thanks-section { width: 100%; } .thanks-card { max-width: 52rem; padding: 2rem; border: 1px solid rgba(30, 26, 23, 0.08); background: var(--surface); border-radius: var(--radius-lg); box-shadow: var(--shadow); } .thanks-card h1 { margin: 0.35rem 0 1rem; font-family: "Plus Jakarta Sans", Arial, sans-serif; font-size: clamp(2.6rem, 6vw, 4.2rem); line-height: 1; letter-spacing: -0.04em; font-weight: 700; } .thanks-card p { color: var(--muted); line-height: 1.72; } .sticky-contact-bar { display: none; } @media (max-width: 960px) { .header-row { grid-template-columns: minmax(0, 1fr) auto; } .nav-toggle { display: inline-flex; align-items: center; } .site-nav { display: none; grid-column: 1 / -1; justify-self: stretch; flex-direction: column; gap: 0.9rem; padding: 1rem 0 0.25rem; } .site-nav.is-open { display: flex; } .header-cta { grid-column: 1 / -1; justify-self: stretch; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); } .header-cta .whatsapp-pill, .header-cta .button-primary { display: none; } .header-cta .contact-pill { grid-column: 1 / -1; } .hero-grid, .split-grid, .contact-grid, .coverage-grid, .service-grid, .process-grid, .footer-grid, .field-row { grid-template-columns: 1fr; } .project-grid, .why-grid, .testimonial-grid, .closing-grid, .why-list, .cta-band-row, .area-grid, .faq-grid { grid-template-columns: 1fr; } .contact-panel-list-wide, .footer-links-grid, .area-panel-wide { grid-template-columns: 1fr; } .cta-band-actions-wrap { justify-self: stretch; } .footer-contact-list { grid-template-columns: 1fr; } .detail-frame { min-height: 24rem; } .area-panel-wide .area-list { justify-content: flex-start; } .header-proof { overflow-x: auto; flex-wrap: nowrap; padding-bottom: 0.15rem; } .trust-badge { flex: 0 0 auto; } .hero-copy h1 { font-size: clamp(2.6rem, 12vw, 4rem); } .hero-visual { display: grid; gap: 1rem; min-height: auto; padding: 0; } .hero-visual::before { inset: 0; } .hero-badge { position: static; max-width: none; } .hero-badge-top, .hero-badge-bottom { top: auto; right: auto; bottom: auto; left: auto; } .visual-panel-large { left: 0; top: 0; width: 100%; } .visual-stack { position: relative; right: auto; bottom: auto; margin-top: 1rem; } .project-card-large { grid-row: auto; } .project-card-large .project-media img { min-height: 0; aspect-ratio: 4 / 3; } .cta-band-actions { justify-content: flex-start; } body { padding-bottom: 5.6rem; } .sticky-contact-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 35; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.65rem; padding: 0.75rem 0.85rem calc(0.75rem + env(safe-area-inset-bottom)); background: rgba(var(--footer-bg-rgb), 0.97); backdrop-filter: blur(16px); border-top: 1px solid rgba(var(--footer-text-rgb), 0.08); } .sticky-contact-bar a { display: inline-flex; align-items: center; justify-content: center; min-height: 2.9rem; padding: 0 0.9rem; border-radius: 999px; background: rgba(var(--footer-text-rgb), 0.08); color: var(--footer-text); font-size: 0.92rem; font-weight: 600; } .sticky-contact-bar a:last-child { background: linear-gradient(135deg, var(--accent), var(--accent-deep)); } } @media (max-width: 640px) { .hero-section, .services-section, .split-section, .process-section, .coverage-section, .contact-section { padding: 4rem 0; } .container { width: min(calc(100% - 1.25rem), var(--max-width)); } .button, .link-pill, .nav-toggle { width: 100%; } .hero-actions, .header-cta { flex-direction: column; align-items: stretch; } .header-cta { grid-template-columns: 1fr; } .proof-strip { gap: 0.6rem; } .seo-strip-row p { width: 100%; text-align: center; } .cta-band-row, .contact-card, .thanks-card { padding: 1.35rem; } .cta-band-note { display: block; border-radius: 1rem; } .cta-band-actions-wrap { padding: 0.9rem; } .contact-action-row { display: grid; grid-template-columns: 1fr; } .sticky-contact-bar { gap: 0.5rem; padding-inline: 0.7rem; } .sticky-contact-bar a { font-size: 0.84rem; } } body.landing-page .landing-header { padding: 1rem 0; } body.landing-page .landing-header-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 1.25rem; } body.landing-page .header-meta { display: grid; gap: 0.25rem; justify-self: center; } body.landing-page .header-meta a { color: var(--ink); font-weight: 600; line-height: 1.45; } body.landing-page .hero-section { position: relative; z-index: 0; overflow: hidden; padding: 5.2rem 0 3.8rem; } body.landing-page .hero-section::before { content: ""; position: absolute; inset: 0; z-index: 0; background: linear-gradient(92deg, rgba(var(--hero-overlay-rgb), 0.74) 0%, rgba(var(--hero-overlay-rgb), 0.6) 36%, rgba(var(--hero-overlay-rgb), 0.42) 60%, rgba(var(--hero-overlay-rgb), 0.72) 100%), linear-gradient(180deg, rgba(var(--hero-overlay-rgb), 0.18) 0%, rgba(var(--hero-overlay-rgb), 0.08) 42%, rgba(var(--hero-overlay-rgb), 0.56) 100%); } body.landing-page .hero-section::after { content: ""; position: absolute; inset: 0; z-index: 0; background: radial-gradient(circle at 18% 24%, rgba(var(--highlight-rgb), 0.16), rgba(var(--highlight-rgb), 0) 28%), radial-gradient(circle at 68% 18%, rgba(var(--accent-rgb), 0.13), rgba(var(--accent-rgb), 0) 22%), radial-gradient(circle at 84% 20%, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0) 18%); pointer-events: none; } body.landing-page .hero-background-media { position: absolute; inset: 0; z-index: -1; } body.landing-page .hero-background-media img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.05); transform-origin: center; filter: brightness(0.47) saturate(0.84) contrast(0.82) blur(1.3px); } body.landing-page .hero-grid-template { position: relative; z-index: 1; grid-template-columns: minmax(0, 1.12fr) minmax(320px, 0.88fr); min-height: 560px; align-items: center; gap: 2.75rem; } body.landing-page .hero-copy { padding: 1.5rem 0 2rem; } body.landing-page .hero-copy h1 { max-width: 14ch; font-size: clamp(2.65rem, 4.35vw, 4.15rem); line-height: 0.98; color: #fff8ef; text-shadow: 0 12px 28px rgba(10, 8, 6, 0.24); } body.landing-page .hero-text { max-width: 38rem; font-size: 1.08rem; line-height: 1.72; color: rgba(255, 243, 228, 0.9); } body.landing-page .hero-copy .eyebrow { max-width: 38rem; color: rgba(255, 238, 220, 0.84); } body.landing-page .hero-actions { margin: 1.8rem 0 0.7rem; } body.landing-page .hero-actions .button-secondary { border-color: rgba(255, 255, 255, 0.2); background: rgba(255, 250, 243, 0.14); color: #fff8ef; backdrop-filter: blur(12px); } body.landing-page .hero-contact-note { margin: 0; color: rgba(255, 238, 220, 0.84); line-height: 1.65; } body.landing-page .hero-contact-note a { color: #fff8ef; font-weight: 600; } body.landing-page .hero-trust-inline { display: flex; flex-wrap: wrap; gap: 0.9rem 1.1rem; margin-top: 1.2rem; max-width: 44rem; } body.landing-page .hero-trust-badge { display: flex; align-items: center; gap: 0.82rem; flex: 1 1 16.5rem; min-height: 0; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; backdrop-filter: none; } body.landing-page .hero-trust-icon { flex: 0 0 auto; width: 3.2rem; height: 3.2rem; object-fit: contain; filter: drop-shadow(0 8px 16px rgba(8, 10, 14, 0.22)); } body.landing-page .hero-trust-badge:nth-child(1) .hero-trust-icon { filter: drop-shadow(0 8px 16px rgba(169, 118, 36, 0.18)); } body.landing-page .hero-trust-badge:nth-child(2) .hero-trust-icon { filter: drop-shadow(0 8px 16px rgba(44, 114, 214, 0.18)); } body.landing-page .hero-trust-badge:nth-child(3) .hero-trust-icon { filter: drop-shadow(0 8px 16px rgba(72, 128, 116, 0.18)); } body.landing-page .hero-trust-badge:nth-child(4) .hero-trust-icon { filter: drop-shadow(0 8px 16px rgba(73, 110, 156, 0.18)); } body.landing-page .hero-trust-copy { display: grid; min-width: 0; gap: 0.12rem; } body.landing-page .hero-trust-label { font-size: 0.76rem; letter-spacing: 0; text-transform: none; color: rgba(255, 233, 204, 0.78); } body.landing-page .hero-trust-badge strong { color: #fff8ef; font-family: "Plus Jakarta Sans", Arial, sans-serif; font-size: 0.94rem; line-height: 1.2; letter-spacing: -0.02em; } body.landing-page .hero-proof-section { position: relative; padding: 1.35rem 0 2.45rem; } body.landing-page .hero-proof-stack { display: grid; gap: 1rem; } body.landing-page .hero-confidence-panel { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; } body.landing-page .hero-form-card, body.landing-page .contact-card-summary { border: 1px solid rgba(28, 24, 20, 0.08); border-radius: 1.5rem; background: rgba(255, 251, 246, 0.92); box-shadow: var(--shadow); } body.landing-page .hero-confidence-item { position: relative; display: grid; gap: 0.8rem; min-height: 100%; padding: 1.35rem; border: 1px solid rgba(28, 24, 20, 0.08); border-radius: 1.5rem; background: linear-gradient(180deg, rgba(255, 252, 248, 0.98), rgba(246, 237, 227, 0.92)), radial-gradient(circle at top right, rgba(178, 106, 52, 0.16), transparent 42%); box-shadow: var(--shadow); transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease; } body.landing-page .hero-confidence-item::after { content: ""; position: absolute; inset: auto 1.35rem 0.95rem; height: 3px; border-radius: 999px; background: linear-gradient(90deg, rgba(178, 106, 52, 0.95), rgba(178, 106, 52, 0)); opacity: 0.72; } body.landing-page .hero-confidence-item:hover { transform: translateY(-4px); border-color: rgba(178, 106, 52, 0.22); box-shadow: 0 26px 50px rgba(31, 22, 16, 0.12); } body.landing-page .hero-confidence-head { display: flex; align-items: center; gap: 0.95rem; } body.landing-page .hero-confidence-icon { flex: 0 0 auto; display: inline-grid; place-items: center; width: 3.2rem; height: 3.2rem; border-radius: 1.1rem; background: linear-gradient(160deg, var(--accent), var(--accent-deep)); color: #fff8ef; font-family: "Plus Jakarta Sans", Arial, sans-serif; font-size: 0.86rem; font-weight: 800; letter-spacing: 0.12em; box-shadow: 0 16px 28px rgba(var(--accent-deep-rgb), 0.24); } body.landing-page .hero-confidence-item-local .hero-confidence-icon { background: linear-gradient(160deg, rgba(var(--forest-rgb), 0.92), var(--accent-deep)); } body.landing-page .hero-confidence-item-reviews .hero-confidence-icon { background: linear-gradient(160deg, var(--highlight), rgba(var(--highlight-rgb), 0.72)); } body.landing-page .hero-confidence-item-service .hero-confidence-icon { background: linear-gradient(160deg, rgba(var(--accent-rgb), 0.9), rgba(var(--accent-deep-rgb), 0.96)); } body.landing-page .hero-confidence-label { display: inline-block; font-size: 0.8rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent-deep); } body.landing-page .hero-confidence-item h3 { margin: 0.3rem 0 0; font-family: "Plus Jakarta Sans", Arial, sans-serif; font-size: 1.16rem; line-height: 1.18; letter-spacing: -0.02em; } body.landing-page .hero-confidence-item p { margin: 0; color: var(--muted); line-height: 1.62; max-width: 31ch; } body.landing-page .hero-confidence-item a { color: var(--accent-deep); font-weight: 600; } body.landing-page .hero-confidence-stars { color: #d18d3d; font-size: 1rem; letter-spacing: 0.2em; } body.landing-page .hero-aside { position: relative; width: min(100%, 31.5rem); justify-self: end; align-self: center; } body.landing-page .hero-form-card { position: relative; z-index: 3; margin: 0; padding: 1.6rem; max-width: 31.5rem; overflow: hidden; background: rgba(255, 252, 247, 0.97); box-shadow: 0 28px 55px rgba(24, 18, 12, 0.16); } body.landing-page .hero-form-card h2, body.landing-page .contact-card-summary h3 { margin: 0; font-family: "Plus Jakarta Sans", Arial, sans-serif; font-size: 1.7rem; line-height: 1.05; letter-spacing: -0.03em; } body.landing-page .hero-form-copy, body.landing-page .hero-form-meta { margin: 0.75rem 0 0; color: var(--muted); line-height: 1.7; } body.landing-page .hero-form-meta { font-size: 0.94rem; } body.landing-page .seo-strip-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; } body.landing-page .seo-strip-item { position: relative; display: grid; gap: 0.35rem; padding: 1.1rem 1.2rem 1.15rem; overflow: hidden; border-radius: 1.35rem; background: linear-gradient(155deg, rgba(29, 22, 17, 0.98), rgba(55, 38, 28, 0.96)), radial-gradient(circle at top right, rgba(255, 214, 171, 0.22), rgba(255, 214, 171, 0) 40%); box-shadow: 0 20px 45px rgba(20, 16, 12, 0.16); transition: transform 180ms ease, box-shadow 180ms ease; } body.landing-page .seo-strip-item::after { content: ""; position: absolute; inset: auto 0 0; height: 3px; background: linear-gradient(90deg, rgba(210, 141, 61, 0.96), rgba(255, 215, 172, 0.2)); } body.landing-page .seo-strip-item:hover { transform: translateY(-4px); box-shadow: 0 28px 52px rgba(20, 16, 12, 0.22); } body.landing-page .seo-strip-label { font-size: 0.74rem; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255, 235, 210, 0.62); } body.landing-page .seo-strip-row p { margin: 0; padding: 0; background: transparent; color: #f7eee1; font-family: "Plus Jakarta Sans", Arial, sans-serif; font-size: 1rem; line-height: 1.35; letter-spacing: -0.02em; text-transform: none; text-align: left; } body.landing-page .testimonial-card-proof { background: linear-gradient(180deg, rgba(255, 251, 246, 0.95), rgba(239, 228, 214, 0.85)); } body.landing-page .contact-section-final .contact-grid { align-items: start; } body.landing-page .contact-card-summary { display: grid; gap: 1rem; padding: 1.6rem; } body.landing-page .contact-summary-list { margin: 0; padding-left: 1.1rem; display: grid; gap: 0.7rem; color: var(--muted); line-height: 1.7; } body.landing-page .contact-card-summary .button { margin-top: 0.25rem; } @media (max-width: 1080px) { body.landing-page .landing-header-row { grid-template-columns: 1fr; justify-items: start; } body.landing-page .header-meta { justify-self: start; } body.landing-page .hero-grid-template { grid-template-columns: 1fr; min-height: auto; gap: 1.5rem; } body.landing-page .hero-confidence-panel { grid-template-columns: repeat(2, minmax(0, 1fr)); } body.landing-page .hero-confidence-item:last-child { grid-column: 1 / -1; } body.landing-page .seo-strip-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } body.landing-page .hero-copy { padding: 1rem 0 0; } body.landing-page .hero-trust-inline { max-width: none; } body.landing-page .hero-aside { width: 100%; justify-self: stretch; } body.landing-page .hero-form-card { max-width: none; } } @media (max-width: 640px) { .brand-mark-icon { width: clamp(3.55rem, 22vw, 4.6rem); } .brand-logo { width: clamp(182px, 56vw, 236px); } .footer-brand-lockup { gap: 0.8rem; padding: 0.85rem 0.95rem; } .footer-brand-mark { width: 4.6rem; } body.landing-page .hero-copy h1 { font-size: clamp(2.2rem, 9vw, 3.2rem); max-width: 12ch; } body.landing-page .hero-confidence-panel, body.landing-page .seo-strip-row { grid-template-columns: 1fr; } body.landing-page .hero-trust-inline { gap: 0.6rem; } body.landing-page .hero-trust-badge { flex-basis: calc(50% - 0.3rem); } body.landing-page .hero-trust-icon { width: 2.7rem; height: 2.7rem; } body.landing-page .hero-trust-badge strong { font-size: 0.84rem; } body.landing-page .hero-confidence-item:last-child { grid-column: auto; } body.landing-page .header-meta, body.landing-page .landing-header .header-cta { display: none; } body.landing-page .landing-header { padding: 0.75rem 0; } body.landing-page .hero-form-card { padding: 1.2rem; } }