/* Mobile refinements preserve the original photography layout. */
html{scroll-padding-top:72px}body{overflow-x:clip}main{min-width:0}a,button{-webkit-tap-highlight-color:transparent;touch-action:manipulation}a:focus-visible,button:focus-visible{outline:2px solid #767676;outline-offset:4px}
a[aria-label="Contact via WhatsApp"]{z-index:60!important;animation:none!important;bottom:max(20px,env(safe-area-inset-bottom))!important}
@media(max-width:767px){
 header nav{height:64px}
 button[aria-label="Open menu"],button[aria-label="Close menu"]{min-width:48px;min-height:48px;display:flex;align-items:center;justify-content:center}
 html[data-view="home"] header{background:rgba(0,0,0,.24)!important;border-bottom-color:rgba(255,255,255,.35)!important}
 html[data-view="home"] header button[aria-label="Open menu"]{color:#fff!important}
 div.fixed[class*="w-[280px]"]{width:min(280px,85vw)!important;height:100dvh!important;overflow-y:auto;padding-top:env(safe-area-inset-top);padding-bottom:env(safe-area-inset-bottom)}
 div.fixed[class*="w-[280px]"] nav a,div.fixed[class*="w-[280px]"] nav button{min-height:52px;font-size:18px!important}
 #hero>section{height:100svh!important;min-height:520px;max-height:1100px}
 #hero img{object-position:35% center!important;transform:none!important}
 #hero h1{font-size:clamp(27px,7.8vw,40px)!important;letter-spacing:.13em!important;white-space:nowrap}
 #hero button{bottom:max(30px,env(safe-area-inset-bottom))!important}
 .container-custom{padding-left:16px!important;padding-right:16px!important}
 .section-title{font-size:28px!important;margin-bottom:26px!important;line-height:1.4}
 html[data-view="portfolio"] main .grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;grid-auto-rows:clamp(180px,55vw,300px)!important;gap:4px!important}
 html[data-view="portfolio"] main .grid>div{min-width:0}
 footer{padding-bottom:88px!important}
}
@media(max-width:639px){
 html[data-view="pricing"] main .grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:12px!important;align-items:start}
 html[data-view="pricing"] main .grid>div{min-width:0;height:auto!important}
 html[data-view="pricing"] main .group{height:auto!important}
 html[data-view="pricing"] main h3{font-size:16px!important;line-height:1.45!important;margin-bottom:8px!important;min-height:46px;display:flex;align-items:center;justify-content:center}
 html[data-view="pricing"] main h3+p{font-size:23px!important;line-height:1.5!important;color:#333!important}
 html[data-view="pricing"] main button{font-size:14px!important;line-height:1.5!important;min-height:44px;width:100%;color:#656565!important}
 html[data-view="pricing"] main li,html[data-view="pricing"] main p:not(h3+p){font-size:14px!important;line-height:1.75!important;color:#656565!important}
 html[data-view="pricing"] main li{margin-bottom:7px}
 html[data-view="pricing"] main a[href*="wa.me"]{min-height:44px;display:flex;align-items:center;justify-content:center;font-size:14px!important;padding:9px 6px!important;margin-top:16px}
 html[data-view="pricing"] main [class*="p-2.5"]{padding:12px 9px!important}
}
@media(max-width:359px){html[data-view="pricing"] main .grid{gap:8px!important}.container-custom{padding-left:10px!important;padding-right:10px!important}html[data-view="pricing"] main h3{font-size:15px!important}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}[class*="opacity-0"][class*="animate-"]{opacity:1!important}}
/* Show only the close icon after a tap; retain a focus cue for keyboard users. */
button[aria-label="Close menu"]{border:0;background:transparent;box-shadow:none}
html:not([data-keyboard-nav="true"]) button[aria-label="Close menu"]:focus,
html:not([data-keyboard-nav="true"]) button[aria-label="Close menu"]:focus-visible{outline:none!important;box-shadow:none!important}

/* Keep the portrait below the fixed header and anchor its crop above the head. */
@media(max-width:767px){html[data-view="about"] main{padding-top:64px}img[src*="/images/about/about-portrait-"]{object-position:center top!important}}

/* Pointer taps show the menu icon without a keyboard focus frame. */
html:not([data-keyboard-nav="true"]) button[aria-label="Open menu"]:focus,
html:not([data-keyboard-nav="true"]) button[aria-label="Open menu"]:focus-visible{outline:none!important;box-shadow:none!important}

/* Home navigation stays readable above the dark photograph at every viewport. */
html[data-view="home"] header{background:rgba(20,20,20,.92)!important;border-bottom-color:rgba(255,255,255,.25)!important}
html[data-view="home"] header nav a,
html[data-view="home"] header nav button{color:#fff!important}
html[data-view="home"] header nav a:hover,
html[data-view="home"] header nav button:hover{color:#e0e0e0!important}
html[data-view="home"] header nav span[class*="bg-accent"]{background-color:#fff!important}

.package-intro{font-size:15px;line-height:1.75;color:#555;margin:4px 0 16px;text-align:center}

/* Explicit contrast on interior pages, including the customer reviews page. */
html:not([data-view="home"]) header{background:#fff!important;border-bottom-color:#e4e4e4!important}
html:not([data-view="home"]) header nav a,
html:not([data-view="home"]) header nav button{color:#292929!important}
html:not([data-view="home"]) header nav a:hover{color:#666!important}
html:not([data-view="home"]) header nav span[class*="bg-accent"]{background-color:#292929!important}