@font-face {
  font-family: "Inter";
  src: url("../fonts/inter.woff2") format("woff2");
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
}
@font-face {
  font-family: "Outfit";
  src: url("../fonts/outfit.woff2") format("woff2");
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
}
:root {
  color-scheme: light;
  --ink: #0b1b3a;
  --muted: #52637c;
  --brand: #0047ab;
  --navy: #10234d;
  --line: #dce6f3;
  --pale: #f5f8fc;
  --wash: #eaf2ff;
  --white: #fff;
  --wa: #25d366;
  --wa-ink: #092b1a;
  --gradient: linear-gradient(135deg, #246eab 0%, #214eb6 53%, #1726a9 100%);
  --title: "Outfit", "Segoe UI", sans-serif;
  --body: "Inter", system-ui, sans-serif;
  --gutter: clamp(1rem, 4vw, 3.5rem);
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-padding-top: 8.75rem; }
body { margin: 0; background: var(--white); color: var(--ink); font: 1rem/1.6 var(--body); }
h1, h2, h3, p, figure { margin: 0; }
h1, h2, h3 { font-family: var(--title); line-height: 1.08; text-wrap: balance; }
h2 { font-size: clamp(2rem, 4.8vw, 3.4rem); letter-spacing: -.042em; font-weight: 700; }
h3 { font-size: 1.23rem; letter-spacing: -.02em; }
p { color: var(--muted); }
address { font-style: normal; }
img, iframe { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; touch-action: manipulation; }
button { font: inherit; cursor: pointer; touch-action: manipulation; }
svg { display: block; flex: none; width: 1.25rem; height: 1.25rem; }
:focus-visible { outline: 3px solid #2875cd; outline-offset: 4px; }
.hero :focus-visible, .final :focus-visible, .footer :focus-visible { outline-color: #c1e0ff; }
[hidden] { display: none !important; }
.wrap { width: min(100% - 2 * var(--gutter), 75rem); margin-inline: auto; }
.skip-link { position: fixed; top: .5rem; left: .5rem; z-index: 30; padding: .8rem 1rem; background: white; color: var(--brand); transform: translateY(-150%); }
.skip-link:focus { transform: translateY(0); }
.button { display: inline-flex; justify-content: center; align-items: center; gap: .55rem; min-height: 3rem; padding: .65rem 1.05rem; border: 1px solid transparent; border-radius: .72rem; font-size: .875rem; font-weight: 750; line-height: 1.16; text-align: center; }
.button-wa { color: var(--wa-ink); background: var(--wa); }
.button-blue { color: white; background: var(--brand); }
.button-light { color: white; background: #ffffff13; border-color: #ffffff70; }
.button-outline { color: var(--brand); background: white; border-color: #c9d9ef; }
.button svg { width: 1.15rem; height: 1.15rem; }
.icon { display: inline-grid; place-items: center; width: 2.65rem; height: 2.65rem; background: var(--wash); color: var(--brand); border-radius: .8rem; flex: none; }
.icon svg { width: 1.3rem; height: 1.3rem; }
.eyebrow { font-size: .72rem; font-weight: 800; letter-spacing: .145em; line-height: 1.4; color: var(--brand); margin-bottom: .8rem; }

.site-header { position: sticky; top: 0; z-index: 10; background: #fff; border-bottom: 1px solid var(--line); }
.topbar { background: #0e2450; color: #e9f1ff; padding-top: env(safe-area-inset-top); }
.topbar-inner { display: flex; flex-wrap: wrap; justify-content: center; column-gap: 1.8rem; padding-block: .47rem; font-size: .7rem; font-weight: 600; line-height: 1.38; }
.topbar-inner > span { display: inline-flex; align-items: center; gap: .35rem; }
.topbar svg { width: .9rem; height: .9rem; color: #9dc8ff; --icon-bg: #0e2450; }
.navbar { display: flex; align-items: center; justify-content: space-between; gap: .55rem; min-height: 4rem; }
.brand { display: inline-flex; align-items: center; gap: .5rem; min-height: 3rem; flex: none; }
.brand img { width: 2.5rem; height: 2.5rem; border-radius: .68rem; }
.brand span { display: grid; line-height: 1; }
.brand small { font-size: .53rem; font-weight: 800; letter-spacing: .15em; margin-bottom: .19rem; }
.brand strong { font: 750 1.43rem/.87 var(--title); letter-spacing: -.055em; }
.nav-actions { display: flex; align-items: center; gap: .28rem; }
.nav-wa { font-size: .72rem; padding-inline: .52rem; }
.nav-wa svg { width: 1.03rem; height: 1.03rem; }
.menu-toggle { display: grid; place-items: center; min-width: 3rem; min-height: 3rem; border: 0; border-radius: .6rem; color: var(--brand); background: white; }
.site-nav { display: flex; flex-wrap: wrap; gap: .25rem .6rem; }
.site-nav a { display: flex; align-items: center; min-height: 3rem; font-size: .82rem; font-weight: 650; color: #273e60; }
.site-nav a[aria-current] { color: var(--brand); }

.hero { position: relative; overflow: hidden; background: var(--gradient); color: white; }
.hero-grid { display: grid; position: relative; min-height: 0; padding-block: 2.9rem 1.65rem; gap: 1.6rem; }
.hero-copy { z-index: 1; }
.hero-kicker { color: #e4efff; display: flex; align-items: center; gap: .5rem; }
.hero-kicker svg { width: 1rem; height: 1rem; }
.hero h1 { font-size: clamp(2.9rem, 10vw, 6rem); font-weight: 750; letter-spacing: -.042em; line-height: .99; }
.hero h1 span { color: #b8dfff; }
.hero-intro { color: #edf5ff; max-width: 29rem; margin-top: 1rem; font-size: clamp(1rem, 2.2vw, 1.17rem); line-height: 1.58; }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .55rem; margin-top: 1.4rem; }
.hero-call { display: inline-flex; align-items: center; gap: .45rem; min-height: 3rem; margin-top: .3rem; color: #fff; font-size: .86rem; font-weight: 700; text-underline-offset: .23rem; }
.hero-call svg { width: 1rem; height: 1rem; }
.hero-visual { position: relative; min-width: 0; min-height: 3.25rem; }
.hero-storefront { position: relative; }
.hero-storefront img { width: 100%; height: auto; aspect-ratio: 2.22; object-fit: cover; border: 1px solid #d7e7ff80; border-radius: 1rem; box-shadow: 0 12px 32px #142b703e; }
.hero-storefront figcaption { color: #e1eeff; font-size: .66rem; text-align: right; }
.hero-storefront figcaption a { display: inline-flex; align-items: center; min-height: 3rem; text-decoration: underline; text-underline-offset: .16rem; }
.hero-plus { position: absolute; display: block; width: 16rem; aspect-ratio: 1; pointer-events: none; opacity: .11; top: -14rem; right: -8rem; transform: rotate(-11deg); }
.hero-plus::before, .hero-plus::after { content: ""; position: absolute; inset: 37% 0; border-radius: 14%; background: #cce7ff; }
.hero-plus::after { inset: 0 37%; }
.hero-address { position: relative; display: flex; align-items: center; gap: .7rem; width: fit-content; max-width: 100%; color: #fff; }
.hero-address > svg { width: 1.2rem; height: 1.2rem; }
.hero-address strong, .hero-address small { display: block; }
.hero-address strong { font-size: .83rem; }
.hero-address small { font-size: .76rem; color: #e1eeff; }
.desktop-break { display: none; }

.trust { background: white; border-bottom: 1px solid var(--line); }
.trust-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); padding-block: .8rem; }
.trust-grid > div { display: flex; align-items: center; gap: .55rem; min-height: 4.1rem; }
.trust-grid > div:nth-child(2n) { border-left: 1px solid var(--line); padding-left: .55rem; }
.trust .icon { width: 1.85rem; height: 1.85rem; border-radius: .5rem; }
.trust .icon svg { width: 1rem; height: 1rem; }
.trust strong, .trust small { display: block; }
.trust strong { font-size: .72rem; line-height: 1.22; }
.trust small { font-size: .68rem; line-height: 1.25; color: var(--muted); margin-top: .25rem; }

.section { padding-block: clamp(3.55rem, 7vw, 6.6rem); }
.tinted { background: var(--pale); }
.section-head { margin-bottom: clamp(1.5rem, 3vw, 2.3rem); }
.steps { display: grid; gap: .8rem; list-style: none; margin: 0; padding: 0; }
.steps li { position: relative; border: 1px solid var(--line); border-radius: 1.1rem; padding: 1.05rem 2.6rem 1.05rem 4.7rem; }
.steps .icon { position: absolute; top: 1.1rem; left: 1.02rem; }
.step-number { position: absolute; right: .85rem; top: .8rem; color: #456189; font-size: .72rem; font-weight: 800; letter-spacing: .04em; }
.steps p, .products p, .reasons p { font-size: .91rem; line-height: 1.55; margin-top: .42rem; }
.section-action { margin-top: 1.3rem; }
.products { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem; }
.products article { padding: 1rem .8rem; border: 1px solid var(--line); border-radius: 1rem; background: #fff; }
.products article h3 { margin-top: .75rem; font-size: 1.04rem; overflow-wrap: anywhere; }
.section-note { margin-top: .9rem; font-size: .91rem; }
.text-action { display: inline-flex; align-items: center; min-height: 3rem; gap: .35rem; color: var(--brand); font-weight: 750; text-decoration: underline; text-decoration-color: #a0b9da; text-underline-offset: .23rem; }
.text-action svg { width: 1rem; height: 1rem; }
.reasons { display: grid; gap: .7rem; }
.reasons article { display: flex; align-items: flex-start; gap: .85rem; background: var(--pale); border-radius: 1rem; padding: 1.25rem; }
.about { display: grid; align-items: center; gap: 1.5rem; }
.about p:not(.eyebrow) { margin: 1rem 0; }
.about-brand { display: grid; position: relative; overflow: hidden; place-items: center; background: var(--gradient); min-height: 14rem; border-radius: 1.35rem; }
.about-brand .hero-plus { top: -3.2rem; right: -3rem; }
.about-brand img { width: clamp(8.6rem, 20vw, 14rem); height: auto; aspect-ratio: 1; position: relative; border-radius: 50%; border: 1px solid #ffffff72; }
.gallery { padding-bottom: clamp(3.55rem, 6vw, 5.5rem); }
.photo-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
.photo-placeholder, .photo-button { display: grid; align-content: center; justify-items: center; gap: .4rem; aspect-ratio: 4/3; min-width: 0; border-radius: 1rem; border: 1px solid var(--line); overflow: hidden; background: linear-gradient(145deg, #f2f6fd, #e0ecfa); color: #385680; font-size: .85rem; font-weight: 700; }
.photo-button { position: relative; display: block; padding: 0; cursor: zoom-in; }
.photo-button img { width: 100%; height: 100%; object-fit: cover; }
.photo-button span { position: absolute; inset: auto auto .5rem .5rem; border-radius: .4rem; padding: .25rem .5rem; color: var(--navy); background: white; }
.gallery-links { display: flex; flex-wrap: wrap; gap: 0 1.4rem; margin-top: .7rem; font-size: .9rem; }
.lightbox { padding: 0; border: 0; background: #0e2450; border-radius: .9rem; min-width: min(80vw, 16rem); min-height: 4rem; max-width: min(90vw, 66rem); max-height: 90vh; }
.lightbox::backdrop { background: #071127e8; }
.lightbox img { width: auto; height: auto; max-height: 86vh; object-fit: contain; }
.lightbox-close { position: absolute; right: .5rem; top: .5rem; width: 3rem; height: 3rem; display: grid; place-items: center; border-radius: .6rem; border: 0; color: var(--brand); background: white; }

.location-grid { display: grid; gap: .8rem; }
.map, .location-card { border: 1px solid var(--line); border-radius: 1.2rem; background: #fff; overflow: hidden; }
.map { min-height: 16.5rem; display: grid; position: relative; background: #e7effa; }
.map::before { content: ""; position: absolute; inset: -25%; background: repeating-linear-gradient(0deg, transparent 0 36px, #ffffff8a 36px 40px), repeating-linear-gradient(90deg, transparent 0 64px, #ffffff98 64px 68px); transform: rotate(-26deg); pointer-events: none; }
.map iframe { position: relative; width: 100%; height: 100%; min-height: 16.5rem; border: 0; }
.map-overlay { position: relative; align-self: center; justify-self: center; text-align: center; display: grid; justify-items: center; background: #fff; padding: .9rem 1.35rem; border: 1px solid var(--line); border-radius: 1rem; box-shadow: 0 5px 18px #142a6214; font-size: .83rem; }
.map-overlay strong { margin-top: .35rem; font-size: 1rem; }
.map-overlay .button { margin-top: .55rem; }
.location-card { padding: 1.2rem; }
.location-card h3 { font-size: 1.5rem; margin-bottom: .75rem; }
.location-row { display: flex; align-items: flex-start; gap: .65rem; font-size: .88rem; margin-block: .65rem; color: var(--muted); }
.location-row > svg { color: var(--brand); margin-top: .15rem; width: 1.1rem; height: 1.1rem; }
.location-row > div { display: flex; flex-wrap: wrap; gap: 0 .75rem; }
.phone-link { display: inline-flex; align-items: center; min-height: 3rem; color: var(--brand); font-weight: 750; text-decoration: underline; text-underline-offset: .2rem; }
.phone-link svg { display: none; }
.location-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.1rem; }

.faq { display: grid; gap: .15rem; }
.faq-list { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; min-height: 3.65rem; gap: 1rem; font-size: .97rem; font-weight: 750; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary svg { color: var(--brand); }
.faq details[open] summary svg { transform: rotate(45deg); }
.faq details p { padding: 0 1.4rem .95rem 0; font-size: .93rem; }
.final-section { padding-bottom: clamp(3.1rem, 5.5vw, 5rem); }
.final { color: white; background: var(--gradient); border-radius: 1.3rem; padding: clamp(1.5rem, 5vw, 3.5rem); display: grid; align-items: center; gap: 1.25rem; }
.final .eyebrow, .final p { color: #e2eeff; }
.final p:not(.eyebrow) { margin-top: .65rem; }
.final-phone { display: flex; align-items: center; gap: .4rem; min-height: 3rem; font-size: .9rem; text-decoration: underline; text-underline-offset: .2rem; }
.final-phone svg { width: 1rem; height: 1rem; }
.final-phone + .final-phone { margin-top: -.35rem; }

.footer { padding: 2.3rem 0 calc(5.65rem + env(safe-area-inset-bottom)); color: #fff; background: #0c2048; }
.footer-grid { display: grid; gap: 1.3rem; }
.footer .brand { margin-bottom: .45rem; }
.footer h2 { font-size: 1.03rem; letter-spacing: 0; margin: .4rem 0 .55rem; }
.footer p, .footer address { color: #c6d6ef; font-size: .84rem; }
.footer address + p { margin-top: .4rem; }
.footer-social, .footer-link { display: flex; align-items: center; gap: .45rem; min-height: 3rem; width: fit-content; font-size: .83rem; }
.footer-social svg, .footer-link svg { width: 1rem; height: 1rem; }
.footer-legal, .footer-bottom { border-top: 1px solid #334770; margin-top: 1.15rem; padding-top: 1rem; }
.footer-legal p + p { margin-top: .45rem; }
.footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .35rem 1rem; color: #d6e4fb; }
.footer-bottom div { display: flex; flex-wrap: wrap; gap: .25rem 1rem; }
.footer-bottom a, .footer-bottom button { display: inline-flex; align-items: center; min-height: 3rem; color: inherit; font-size: .8rem; background: transparent; border: 0; padding: 0; text-decoration: underline; text-underline-offset: .2rem; }
.mobile-dock { position: fixed; z-index: 11; inset: auto 0 0; padding: .55rem max(var(--gutter), env(safe-area-inset-right)) calc(.55rem + env(safe-area-inset-bottom)) max(var(--gutter), env(safe-area-inset-left)); display: grid; grid-template-columns: 1.25fr 1fr; gap: .55rem; background: white; border-top: 1px solid var(--line); box-shadow: 0 -6px 22px #0b245410; }
.floating-wa { display: none; }
.cookie-banner { position: fixed; z-index: 15; left: var(--gutter); right: var(--gutter); bottom: calc(5rem + env(safe-area-inset-bottom)); width: min(28rem, 100% - 2 * var(--gutter)); display: grid; gap: .75rem; padding: 1rem; border: 1px solid var(--line); background: white; border-radius: 1rem; box-shadow: 0 7px 35px #112c6230; font-size: .86rem; }
.cookie-banner a { color: var(--brand); text-decoration: underline; }
.cookie-banner > div { display: flex; gap: .6rem; }
.legal-content { max-width: 48rem; padding-block: clamp(2.5rem, 7vw, 5.5rem); }
.legal-content h1 { font-size: clamp(2.25rem, 6vw, 4rem); letter-spacing: -.06em; }
.legal-content section { margin-top: 1.65rem; }
.legal-content h2 { font-size: 1.45rem; margin-bottom: .45rem; }
.legal-page .footer { padding-bottom: 1.6rem; }

@media (max-width: 767px) {
  .navbar:has(.menu-toggle:not([hidden])) .site-nav { display: none; }
  .navbar:has(.menu-toggle[aria-expanded="true"]) .site-nav { display: grid; position: absolute; inset: 100% 0 auto; background: white; padding: .55rem var(--gutter); border-bottom: 1px solid var(--line); box-shadow: 0 12px 22px #10254d1c; }
  .site-nav a { padding-inline: .55rem; }
  .navbar:has(.menu-toggle[hidden]) { flex-wrap: wrap; }
  .navbar:has(.menu-toggle[hidden]) .site-nav { order: 3; width: 100%; }
}
@media (max-width: 579px) {
  .hero-actions .button { padding-inline: .65rem; font-size: .8rem; }
}
@media (max-width: 380px) {
  .topbar-inner { column-gap: .65rem; font-size: .62rem; }
}
@media (min-width: 580px) {
  .hero-grid { grid-template-columns: minmax(0, 1.13fr) minmax(0, .87fr); align-items: center; padding-block: 3.3rem; gap: 1.2rem; }
  .hero h1 { font-size: clamp(3rem, 7.4vw, 6.15rem); }
  .hero-visual { min-height: 14rem; display: grid; align-content: center; justify-items: center; }
  .hero-storefront { width: 100%; }
  .hero-storefront img { aspect-ratio: 1.48; border-radius: clamp(1rem, 2vw, 1.6rem); }
  .hero-plus { top: -2rem; right: -4.3rem; width: clamp(12rem, 27vw, 26rem); }
  .hero-address { position: absolute; left: .75rem; bottom: 3.8rem; max-width: calc(100% - 1.5rem); border: 1px solid #cbdeff80; border-radius: .95rem; padding: .65rem .85rem; background: #162e83; box-shadow: 0 6px 20px #10206c35; }
  .desktop-break { display: initial; }
  .trust-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .trust-grid > div:nth-child(n+2) { border-left: 1px solid var(--line); padding-left: .65rem; }
  .steps, .reasons { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .steps li { padding: 1.25rem; }
  .steps .icon { position: static; margin-bottom: .85rem; }
  .products { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .about, .location-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .about { gap: clamp(1.5rem, 6vw, 4.8rem); }
  .about-brand { min-height: clamp(16rem, 27vw, 21rem); }
  .photo-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .final { grid-template-columns: 1.6fr 1fr; }
  .final > div:last-child { justify-self: end; }
  .footer-grid { grid-template-columns: 1.1fr 1fr .85fr; }
}
@media (min-width: 768px) {
  .nav-wa { font-size: .83rem; padding-inline: .8rem; }
  .menu-toggle { display: none; }
  .site-nav { flex-wrap: nowrap; gap: clamp(.7rem, 2vw, 1.8rem); }
  .navbar { min-height: 4.65rem; }
  .brand img { width: 2.75rem; height: 2.75rem; }
  .brand strong { font-size: 1.55rem; }
  .hero-grid { min-height: clamp(29rem, 43vw, 38.5rem); padding-block: 4rem; }
  .trust-grid { padding-block: 1.05rem; }
  .trust-grid > div:nth-child(n+2) { padding-left: clamp(.8rem, 2vw, 2rem); }
  .trust .icon { width: 2.4rem; height: 2.4rem; }
  .trust strong { font-size: .83rem; }
  .trust small { font-size: .75rem; }
  .steps li, .products article { padding: 1.4rem; }
  .products article h3 { font-size: 1.13rem; }
  .faq { grid-template-columns: .9fr 1.35fr; gap: 2.3rem; }
  .location-card { padding: 1.65rem; }
  .mobile-dock { display: none; }
  .floating-wa { position: fixed; bottom: 1.35rem; right: var(--gutter); z-index: 11; min-width: 3.35rem; height: 3.35rem; display: grid; place-items: center; color: var(--wa-ink); background: var(--wa); border-radius: 50%; box-shadow: 0 8px 24px #12396130; }
  .floating-wa svg { width: 1.65rem; height: 1.65rem; }
  .floating-wa span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .footer { padding-bottom: 1.5rem; }
  .cookie-banner { bottom: 1.3rem; }
}
@media (hover: hover) and (pointer: fine) {
  .button-wa:hover, .floating-wa:hover { background: #1ebe5a; }
  .button-blue:hover { background: #063680; }
  .button-outline:hover, .menu-toggle:hover { background: var(--wash); }
  .button-light:hover { background: #ffffff29; }
  .site-nav a:hover { color: var(--brand); text-decoration: underline; text-underline-offset: .25rem; }
  .hero-call:hover, .footer-social:hover, .footer-link:hover { text-decoration: underline; }
  .faq summary:hover { color: var(--brand); }
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
  .button, .floating-wa { transition: background-color 150ms ease; }
  .faq summary svg { transition: transform 150ms ease; }
  .hero-copy { animation: enter 360ms cubic-bezier(.2,.7,.25,1) both; }
  @keyframes enter { from { opacity: .72; transform: translateY(6px); } to { opacity: 1; transform: none; } }
}