:root {
  --radius: .375rem; --font-sans: "DM Sans", Arial, Helvetica, sans-serif; --background: oklch(0.995 0.004 270); --foreground: oklch(0.27 0.075 250);
  --card: oklch(1 0 0); --card-foreground: var(--foreground); --popover: var(--card); --popover-foreground: var(--foreground);
  --primary: oklch(0.37 0.117 252); --primary-foreground: oklch(1 0 0);
  --secondary: oklch(0.963 0.018 250); --secondary-foreground: var(--primary);
  --muted: oklch(0.965 0.012 255); --muted-foreground: oklch(0.52 0.045 252);
  --accent: oklch(0.94 0.028 350); --accent-foreground: oklch(0.42 0.16 350);
  --destructive: oklch(0.58 0.21 25); --destructive-foreground: oklch(1 0 0);
  --border: oklch(0.89 0.021 250); --input: var(--border); --ring: oklch(0.48 0.15 350);
  --brand-magenta: oklch(0.43 0.18 350); --brand-gold: oklch(0.72 0.13 75);
  --brand-pale-blue: oklch(0.965 0.019 250); --brand-ink: oklch(0.3 0.105 252);
}
.dark { --background: oklch(0.2 0.055 250); --foreground: oklch(0.97 0.008 255); --card: oklch(0.26 0.06 250); --card-foreground: var(--foreground); --popover: var(--card); --popover-foreground: var(--foreground); --primary: oklch(0.78 0.08 250); --primary-foreground: oklch(0.2 0.055 250); --secondary: oklch(0.3 0.055 250); --secondary-foreground: var(--foreground); --muted: var(--secondary); --muted-foreground: oklch(0.78 0.025 250); --accent: oklch(0.34 0.09 350); --accent-foreground: var(--foreground); --destructive: oklch(0.7 0.17 25); --destructive-foreground: var(--foreground); --border: oklch(0.43 0.045 250); --input: var(--border); --ring: oklch(0.72 0.1 350); --brand-magenta: oklch(0.73 0.13 350); --brand-gold: oklch(0.76 0.1 75); --brand-pale-blue: oklch(0.26 0.06 250); --brand-ink: var(--foreground); }
* { box-sizing: border-box; border-color: var(--border); } html { scroll-behavior: smooth; } body { margin: 0; background: var(--background); color: var(--foreground); font-family: var(--font-sans); } a { text-decoration: none; } :focus-visible { outline: 3px solid var(--brand-magenta); outline-offset: 3px; }
button, input, textarea, select { font: inherit; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; cursor: pointer; transition: filter .2s ease, background-color .2s ease, color .2s ease; }
.btn svg, .mobile-menu-toggle svg { width: 16px; height: 16px; flex: 0 0 auto; }
.mobile-menu-toggle { border: 0; background: transparent; width: 40px; height: 40px; align-items: center; justify-content: center; cursor: pointer; }
.service-link { text-decoration: none; }

.container-site { width: min(100% - 80px, 1240px); margin-inline: auto; }
.site-shell { overflow: clip; } section[id] { scroll-margin-top: 88px; }
.skip-link { position: fixed; left: 16px; top: -100px; z-index: 100; background: var(--primary); color: var(--primary-foreground); padding: 12px; } .skip-link:focus { top: 8px; }
.site-header { position: sticky; top: 0; z-index: 50; background: var(--background); border-bottom: 1px solid var(--border); }
.header-inner { min-height: 80px; display: grid; grid-template-columns: minmax(0,1fr) auto auto; align-items: center; gap: 42px; }
.brand-link { display: inline-flex; width: fit-content; } .brand-link img { width: 210px; height: auto; display: block; }
.desktop-nav { display: flex; align-items: center; gap: 30px; white-space: nowrap; } .desktop-nav a { font-size: 13px; font-weight: 700; color: var(--foreground); transition: color .2s; } .desktop-nav a:hover { color: var(--brand-magenta); }
.header-whatsapp { background: var(--brand-magenta) !important; color: var(--primary-foreground) !important; min-height: 43px; padding-inline: 20px !important; font-weight: 700 !important; border-radius: 4px !important; } .header-whatsapp:hover, .cta-main:hover { filter: brightness(1.12); }
.mobile-menu-toggle, .mobile-nav { display: none; }
.hero { height: min(680px, calc(100svh - 80px)); min-height: 545px; position: relative; display: flex; align-items: center; background: var(--secondary); }
.hero-image, .hero-shade { position: absolute; inset: 0; width: 100%; height: 100%; } .hero-image { object-fit: cover; object-position: center 55%; } .hero-shade { background: linear-gradient(90deg, var(--background) 0%, color-mix(in oklab, var(--background) 97%, transparent) 19%, color-mix(in oklab, var(--background) 74%, transparent) 43%, transparent 71%); }
.hero-content { position: relative; z-index: 1; padding-top: 24px; padding-bottom: 42px; } .eyebrow, .kicker { color: var(--brand-magenta); font-size: 11px; font-weight: 800; letter-spacing: .13em; } .eyebrow { display: flex; align-items: center; gap: 12px; margin-bottom: 24px; } .eyebrow-line { width: 30px; height: 2px; background: var(--brand-gold); }
h1, h2, h3, p { margin-top: 0; } h1, h2 { letter-spacing: 0; } h1 { max-width: 710px; font-size: clamp(40px, 4.5vw, 66px); line-height: 1.105; font-weight: 700; color: var(--brand-ink); margin-bottom: 24px; } h1 em, h2 em { font-style: normal; color: var(--brand-magenta); } .hero-content > p { max-width: 540px; font-size: 17px; line-height: 1.65; color: var(--muted-foreground); margin-bottom: 32px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; } .cta-main { min-height: 50px !important; height: auto !important; padding: 12px 22px !important; background: var(--brand-magenta) !important; color: var(--primary-foreground) !important; border-radius: 4px !important; font-size: 13px !important; font-weight: 700 !important; white-space: normal !important; text-align: center; } .cta-outline { min-height: 50px !important; height: auto !important; padding: 12px 20px !important; border: 1px solid var(--primary) !important; color: var(--primary) !important; background: color-mix(in oklab, var(--background) 75%, transparent) !important; border-radius: 4px !important; font-size: 13px !important; font-weight: 700 !important; }
.hero-scroll { position: absolute; bottom: 25px; right: max(40px, calc((100vw - 1240px)/2)); color: var(--primary); display: grid; place-items: center; height: 40px; width: 40px; border: 1px solid var(--primary); border-radius: 50%; }
.section-pad { padding-block: 104px; } .section-heading { display: flex; justify-content: space-between; align-items: end; gap: 50px; margin-bottom: 42px; } .section-heading h2, .why-intro h2, .contact-copy h2 { font-size: clamp(34px, 3.7vw, 52px); line-height: 1.16; font-weight: 700; color: var(--brand-ink); margin: 13px 0 0; } .section-heading > p { max-width: 355px; margin: 0 0 5px; line-height: 1.65; font-size: 15px; color: var(--muted-foreground); }
.services-section { background: var(--background); } .services-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 18px; } .service-card { background: var(--card); border: 1px solid var(--border); border-radius: 4px; overflow: hidden; min-width: 0; display: flex; flex-direction: column; transition: transform .2s ease, box-shadow .2s ease; } .service-card:hover { transform: translateY(-3px); box-shadow: 0 16px 30px color-mix(in oklab, var(--primary) 8%, transparent); } .service-featured { grid-column: span 2; display: grid; grid-template-columns: 1.05fr 1fr; background: var(--brand-pale-blue); } .service-image-wrap { position: relative; height: auto; aspect-ratio: 1 / 1; overflow: hidden; background: var(--secondary); } .service-featured .service-image-wrap { height: auto; min-height: 0; aspect-ratio: 1 / 1; } .service-image-wrap img { width: 100%; height: 100%; object-fit: cover; } .service-content { padding: 23px 25px 24px; display: flex; flex-direction: column; flex: 1; } .service-featured .service-content { padding: 32px 30px; } .service-number { font-size: 10px; font-weight: 800; color: var(--brand-magenta); letter-spacing: .1em; margin-bottom: 10px; } .service-content h3 { font-size: 21px; line-height: 1.23; color: var(--brand-ink); margin-bottom: 9px; } .service-featured h3 { font-size: 29px; } .service-content p { color: var(--muted-foreground); font-size: 13px; line-height: 1.6; margin-bottom: 17px; } .service-link { padding: 0 !important; height: auto !important; justify-content: flex-start !important; color: var(--brand-magenta) !important; font-size: 12px !important; font-weight: 800 !important; white-space: normal !important; text-align: left; margin-top: auto; } .service-link:hover { text-decoration: underline; } .services-note { color: var(--muted-foreground); font-size: 12px; line-height: 1.6; margin: 20px 0 0; }
.why-section { background: var(--brand-pale-blue); } .why-layout { display: grid; grid-template-columns: .95fr 1fr; gap: 9%; } .why-intro h2 { margin-bottom: 22px; } .why-intro > p { font-size: 16px; line-height: 1.7; color: var(--muted-foreground); max-width: 445px; } .why-flower { color: var(--brand-magenta); font-size: 94px; line-height: 1; opacity: .22; display: block; margin-top: 28px; } .why-list > div { border-top: 1px solid var(--border); padding: 21px 0; display: grid; grid-template-columns: 44px 1fr; gap: 14px; } .why-list > div:last-child { border-bottom: 1px solid var(--border); } .why-list > div > span { color: var(--brand-magenta); font-size: 11px; font-weight: 800; padding-top: 4px; } .why-list h3 { color: var(--brand-ink); font-size: 18px; margin-bottom: 6px; } .why-list p { font-size: 14px; line-height: 1.55; color: var(--muted-foreground); margin: 0; }
.steps-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 24px; margin: 48px 0 32px; } .steps-grid > div { border-top: 2px solid var(--brand-magenta); padding: 25px 10px 0 0; } .steps-grid span { color: var(--brand-magenta); font-size: 12px; font-weight: 800; } .steps-grid h3 { color: var(--brand-ink); font-size: 21px; margin: 23px 0 9px; } .steps-grid p { color: var(--muted-foreground); line-height: 1.6; font-size: 14px; max-width: 280px; }
.contact-section { background: var(--primary); color: var(--primary-foreground); } .contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12%; } .contact-copy .kicker { color: var(--brand-gold); } .contact-copy h2 { color: var(--primary-foreground); margin-bottom: 20px; } .contact-copy h2 em { color: oklch(0.84 0.08 75); } .contact-copy > p { color: color-mix(in oklab, var(--primary-foreground) 78%, transparent); line-height: 1.7; max-width: 450px; margin-bottom: 28px; } .contact-copy .cta-main { background: var(--background) !important; color: var(--primary) !important; } .contact-details { display: grid; gap: 25px; } .contact-detail { display: grid; grid-template-columns: 23px 1fr; gap: 17px; padding-bottom: 23px; border-bottom: 1px solid color-mix(in oklab, var(--primary-foreground) 25%, transparent); } .contact-detail > svg { margin-top: 5px; color: var(--brand-gold); } .contact-detail span { display: block; font-size: 10px; font-weight: 800; letter-spacing: .11em; color: color-mix(in oklab, var(--primary-foreground) 65%, transparent); margin-bottom: 8px; } .contact-detail strong { display: block; font-size: 19px; } .contact-detail p { margin: 4px 0 8px; font-size: 14px; color: color-mix(in oklab, var(--primary-foreground) 80%, transparent); } .contact-detail a { display: flex; align-items: center; gap: 6px; width: fit-content; color: var(--primary-foreground); font-weight: 700; font-size: 14px; margin-top: 7px; } .contact-detail a:hover { text-decoration: underline; }
.site-footer { background: var(--background); padding-top: 50px; } .footer-inner { display: flex; justify-content: space-between; gap: 30px; align-items: start; } .footer-inner img { width: 190px; height: auto; } .footer-inner p { color: var(--muted-foreground); font-size: 13px; margin: 14px 0 0; } .footer-links { display: flex; gap: 22px; } .footer-links a { color: var(--primary); display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 700; } .footer-bottom { border-top: 1px solid var(--border); margin-top: 50px; padding: 20px 0; display: flex; justify-content: space-between; gap: 18px; font-size: 11px; color: var(--muted-foreground); }
.mobile-whatsapp { display: none; }
@media (max-width: 1050px) { .desktop-nav { gap: 16px; } .header-inner { gap: 20px; } .brand-link img { width: 180px; } .header-whatsapp { padding-inline: 13px !important; } }
@media (max-width: 800px) { .container-site { width: min(100% - 36px, 650px); } .header-inner { min-height: 68px; grid-template-columns: minmax(0,1fr) auto; } .brand-link img { width: 176px; } .desktop-nav, .header-whatsapp { display: none !important; } .mobile-menu-toggle { display: inline-flex !important; color: var(--primary); } .mobile-nav.is-open { display: flex; flex-direction: column; padding: 5px 18px 15px; background: var(--background); border-top: 1px solid var(--border); } .mobile-nav a { display: flex; justify-content: space-between; align-items: center; padding: 13px 3px; border-bottom: 1px solid var(--border); color: var(--primary); font-weight: 700; font-size: 14px; } section[id] { scroll-margin-top: 68px; } .hero { min-height: 660px; height: auto; align-items: start; } .hero-image { height: 56%; top: auto; object-position: 72% center; } .hero-shade { background: linear-gradient(180deg, var(--background) 0%, var(--background) 35%, color-mix(in oklab, var(--background) 94%, transparent) 53%, transparent 74%); } .hero-content { padding-top: 45px; padding-bottom: 250px; } h1 { font-size: clamp(35px, 8vw, 48px); max-width: 620px; } .hero-content > p { font-size: 15px; max-width: 490px; } .hero-scroll { display: none; } .section-pad { padding-block: 74px; } .section-heading { align-items: start; flex-direction: column; gap: 16px; margin-bottom: 30px; } .section-heading > p { max-width: 550px; } .services-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } .service-featured { grid-column: span 2; } .why-layout, .contact-grid { grid-template-columns: 1fr; gap: 32px; } .why-flower { display: none; } .contact-grid { gap: 46px; } .mobile-whatsapp { position: fixed; z-index: 60; display: flex; justify-content: center; align-items: center; gap: 9px; left: 14px; right: 14px; bottom: 12px; min-height: 48px; border-radius: 4px; color: var(--primary-foreground); background: var(--brand-magenta); font-weight: 800; font-size: 14px; box-shadow: 0 4px 15px color-mix(in oklab, var(--primary) 24%, transparent); } .site-footer { padding-bottom: 65px; } }
@media (max-width: 560px) { .hero { min-height: 0; display: flex; flex-direction: column; } .hero-image { position: relative; order: 2; height: 165px; object-position: 67% 57%; } .hero-shade { display: none; } .hero-content { padding-top: 26px; padding-bottom: 16px; order: 1; } h1 { font-size: 33px; margin-bottom: 14px; } .eyebrow { margin-bottom: 17px; } .hero-content > p { margin-bottom: 18px; font-size: 14px; } .section-pad { padding-block: 54px; } .hero-actions { flex-direction: column; align-items: stretch; } .hero-actions .cta-main, .hero-actions .cta-outline { width: 100%; } .services-grid { grid-template-columns: 1fr; gap: 14px; } .service-featured { grid-column: span 1; display: flex; flex-direction: column; } .service-featured .service-image-wrap { min-height: 0; } .service-image-wrap { height: auto; } .service-featured .service-content { padding: 23px 25px 24px; } .service-featured h3 { font-size: 23px; } .section-heading h2, .why-intro h2, .contact-copy h2 { font-size: 35px; } .steps-grid { grid-template-columns: 1fr; gap: 20px; margin-top: 35px; } .steps-grid > div { padding-top: 15px; } .steps-grid h3 { margin-top: 10px; } .steps-grid p { max-width: none; } .footer-inner, .footer-bottom { flex-direction: column; } .footer-links { margin-top: 8px; } .footer-bottom { margin-top: 35px; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } }