:root { --orange: #f47728; --blue: #1652a7; --ink: #13335e; }
* { box-sizing: border-box; }
html, body { min-height: 100%; margin: 0; }
body { color: var(--ink); font-family: "Nunito Sans", sans-serif; }
.hero { min-height: 100svh; isolation: isolate; overflow: hidden; position: relative; display: flex; align-items: center; padding: 3rem clamp(1.5rem, 7vw, 8rem); }
.hero__image, .hero__wash { position: absolute; inset: 0; z-index: -2; }
.hero__image { background: center / cover no-repeat url("assets/pawland-tabasco-hero.png"); transform: scale(1.01); }
.hero__wash { z-index: -1; background: linear-gradient(90deg, rgba(255,250,240,.97) 0%, rgba(255,250,240,.91) 33%, rgba(255,250,240,.4) 56%, rgba(255,250,240,.03) 78%); }
.content { width: min(610px, 100%); animation: enter .8s ease-out both; }
.brand { display: inline-flex; align-items: baseline; flex-wrap: wrap; position: relative; text-decoration: none; font-family: "Baloo 2", sans-serif; font-size: clamp(3.1rem, 6.2vw, 5.2rem); font-weight: 800; line-height: .7; letter-spacing: -4px; }
.brand__orange { color: var(--orange); text-shadow: 0 2px 0 rgba(255,255,255,.7); }
.brand__blue { color: #285caf; }
.brand__paw { align-self: flex-start; display: grid; place-items: center; width: .58em; height: .58em; margin: -.05em -.08em 0 0; border-radius: 45% 45% 40% 40%; color: white; background: var(--orange); font-family: sans-serif; font-size: .22em; transform: rotate(-20deg); }
.brand__tagline { flex-basis: 100%; max-width: 315px; margin: .22rem 0 0 .38rem; border-radius: 100px; background: #285caf; color: white; font-family: "Nunito Sans", sans-serif; font-size: .21em; font-weight: 800; letter-spacing: 1px; line-height: 1.35; text-align: center; }
.copy { margin-top: clamp(4rem, 9vh, 7.5rem); }
.eyebrow { margin: 0 0 .15rem; color: #285caf; font-size: clamp(1.45rem, 2.8vw, 2.1rem); font-weight: 900; }
h1 { margin: 0; color: var(--orange); font-family: "Baloo 2", sans-serif; font-size: clamp(4.2rem, 10vw, 7.5rem); font-weight: 800; letter-spacing: -4px; line-height: .74; text-shadow: 0 2px 0 rgba(255,255,255,.8); }
.headline { margin: 2.1rem 0 0; color: #285caf; font-size: clamp(1.3rem, 2.4vw, 1.8rem); font-weight: 600; }
.headline strong { font-weight: 900; }
.line { display: flex; align-items: center; width: min(260px, 62vw); margin: 1.5rem 0; color: var(--orange); gap: .8rem; }
.line::before, .line::after { content: ""; height: 2px; flex: 1; background: var(--orange); border-radius: 5px; }
.line span { font-size: 1.5rem; }
.message { margin: 0; font-size: clamp(1.1rem, 2vw, 1.45rem); font-weight: 600; line-height: 1.45; }
.message strong { color: #285caf; font-size: 1.1em; }
.social { display: flex; gap: .8rem; margin-top: clamp(2.3rem, 5vh, 4rem); }
.social a { display: inline-flex; align-items: center; gap: .55rem; min-height: 48px; padding: .65rem 1rem; border: 2px solid #285caf; border-radius: 99px; background: rgba(255,255,255,.72); color: #285caf; font-size: .95rem; font-weight: 800; text-decoration: none; transition: transform .2s, background .2s, color .2s; }
.social a:hover, .social a:focus-visible { transform: translateY(-3px); background: #285caf; color: white; outline: none; }
.social svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2; }
.footer { position: absolute; right: 1.5rem; bottom: 1.25rem; margin: 0; color: white; font-size: .78rem; font-weight: 700; opacity: .86; text-shadow: 0 1px 4px rgba(0,0,0,.5); }
@keyframes enter { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } }
@media (max-width: 700px) { .hero { align-items: flex-start; padding-top: 2.7rem; } .hero__image { background-position: 68% center; } .hero__wash { background: linear-gradient(180deg, rgba(255,250,240,.93), rgba(255,250,240,.75) 70%, rgba(255,250,240,.32)); } .copy { margin-top: 4.7rem; } .footer { right: auto; left: 1.5rem; color: var(--ink); font-size: .68rem; text-shadow: none; } }
@media (max-width: 390px) { .social { gap: .5rem; } .social a { padding: .62rem .72rem; font-size: .85rem; } }