/* ACCESS MEDIA & DESIGN AGENCY - Global Styles */
:root {
  --color-blue:#1279BC;
  --color-navy:#142536;
  --color-gold:#E2B222;
  --color-white:#FFFFFF;
  --color-gray:#F5F7FA;
  --color-text:#142536;
  --color-text-light:#5A6A79;
  --radius-sm:6px;
  --radius-md:14px;
  --radius-lg:28px;
  --shadow-sm:0 2px 6px rgba(20,37,54,0.08);
  --shadow-md:0 4px 16px rgba(20,37,54,0.12);
  --shadow-lg:0 8px 32px rgba(20,37,54,0.18);
  --grad-hero:linear-gradient(120deg, rgba(20,37,54,0.75), rgba(18,121,188,0.55));
  --max-width:1180px;
  --transition-fast:0.18s cubic-bezier(.4,.2,.2,1);
  --transition-slow:0.5s cubic-bezier(.4,.2,.2,1);
  --font-heading:'Poppins', 'Montserrat', system-ui, sans-serif;
  --font-body:'Inter', 'Lato', system-ui, sans-serif;
}

* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; font-family:var(--font-body); color:var(--color-text); background:var(--color-white); line-height:1.5; -webkit-font-smoothing:antialiased; overflow-x:hidden; }
html { max-width:100%; overflow-x:hidden; }

img { max-width:100%; display:block; }
button { font-family:inherit; }

h1,h2,h3,h4 { font-family:var(--font-heading); font-weight:600; line-height:1.15; margin:0 0 .6em; letter-spacing:.5px; }
p { margin:0 0 1em; }

/* Layout */
.container { width:100%; max-width:var(--max-width); margin:0 auto; padding:0 1.5rem; }
.section { padding:4.5rem 0; position:relative; }
.section.light { background:var(--color-gray); }
.section.alt { background:var(--color-navy); color:var(--color-white); }
.section-tight { padding:3.5rem 0; }

/* Header */
header.site-header { position:sticky; top:0; z-index:50; backdrop-filter:blur(12px); background:rgba(255,255,255,.82); border-bottom:1px solid rgba(20,37,54,.08); }
.header-inner { display:flex; align-items:center; justify-content:space-between; padding:.75rem 1.25rem; }
.nav-logo { display:flex; align-items:center; gap:.75rem; text-decoration:none; }
.nav-logo img { width:48px; height:48px; border-radius:50%; box-shadow:var(--shadow-sm); }
.nav-logo span { font-weight:600; font-size:1.05rem; color:var(--color-navy); }

nav.primary-nav { display:flex; align-items:center; gap:2rem; }
nav.primary-nav ul { list-style:none; margin:0; padding:0; display:flex; align-items:center; gap:1.8rem; }
nav.primary-nav li { position:relative; }
nav.primary-nav a, .nav-more-btn { background:none; border:none; font:inherit; text-decoration:none; color:var(--color-text-light); font-weight:500; font-size:.85rem; position:relative; padding:.45rem 0; cursor:pointer; }
nav.primary-nav a:focus-visible, .nav-more-btn:focus-visible { outline:2px solid var(--color-gold); outline-offset:4px; border-radius:4px; }
nav.primary-nav a:hover, .nav-more-btn:hover { color:var(--color-blue); }
nav.primary-nav .has-submenu .nav-more-btn { display:flex; align-items:center; gap:.35rem; }
nav.primary-nav .submenu { position:absolute; top:100%; left:0; background:#fff; border:1px solid rgba(20,37,54,.12); box-shadow:var(--shadow-md); border-radius:var(--radius-md); padding:.4rem 0; min-width:200px; display:none; flex-direction:column; }
nav.primary-nav li.open > .submenu { display:flex; }
nav.primary-nav .submenu a { padding:.5rem 1rem; font-size:.75rem; white-space:nowrap; }
nav.primary-nav .submenu a:hover { background:var(--color-gray); }

/* Buttons */
.btn { display:inline-flex; align-items:center; gap:.5rem; border:none; cursor:pointer; font-weight:600; letter-spacing:.3px; font-size:.9rem; padding:.85rem 1.35rem; border-radius:var(--radius-md); text-decoration:none; position:relative; overflow:hidden; transition:var(--transition-fast); }
.btn-primary { background:var(--color-blue); color:var(--color-white); box-shadow:var(--shadow-sm); }
.btn-primary:hover, .btn-primary:focus-visible { background:#0e6aa7; box-shadow:var(--shadow-md); }
.btn-secondary { background:var(--color-gold); color:var(--color-navy); }
.btn-secondary:hover, .btn-secondary:focus-visible { background:#cda114; }
.btn-ghost { background:transparent; color:var(--color-white); border:1px solid rgba(255,255,255,.65); }
.btn-ghost:hover { background:rgba(255,255,255,.12); }
.btn-outline { background:transparent; color:var(--color-blue); border:1px solid var(--color-blue); }
.btn-outline:hover { background:var(--color-blue); color:var(--color-white); }

/* Hero Carousel */
.hero { position:relative; min-height:70vh; display:grid; place-items:center; color:var(--color-white); }
.hero-slider { position:absolute; inset:0; overflow:hidden; }
.hero-slide { position:absolute; inset:0; background-size:cover; background-position:center; display:flex; align-items:center; opacity:0; transition:opacity var(--transition-slow); }
.hero-slide.active { opacity:1; }
/* Full-slide gradient overlay behind content for legibility */
.hero-slide::before { content:""; position:absolute; inset:0; background:var(--grad-hero); z-index:0; }
.hero-content { position:relative; z-index:1; max-width:760px; padding:2.75rem 2.25rem; }
/* Remove localized box styling */
.hero-content h1 { font-size:clamp(2.2rem, 6vw, 3.4rem); margin:0 0 1rem; }
.hero-content p { font-size:1.1rem; margin:0 0 2rem; }
.hero-ctas { display:flex; flex-wrap:wrap; gap:1rem; }
.hero-dots { position:absolute; bottom:1.25rem; left:50%; transform:translateX(-50%); display:flex; gap:.5rem; }
.hero-dots button { width:14px; height:14px; border-radius:50%; border:none; background:rgba(255,255,255,.45); cursor:pointer; transition:var(--transition-fast); }
.hero-dots button.active { background:var(--color-gold); }
.hero-dots button:focus-visible { outline:2px solid var(--color-white); outline-offset:2px; }

/* Pillars */
.pillars { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:1.25rem; margin-top:2rem; }
.pillar { padding:1.75rem 1.5rem; border-radius:var(--radius-lg); color:var(--color-white); position:relative; overflow:hidden; box-shadow:var(--shadow-md); isolation:isolate; }
.pillar h3 { margin:0 0 .75rem; font-size:1rem; letter-spacing:1px; }
.pillar p { margin:0; font-size:.85rem; line-height:1.4; }

/* About */
.about-grid { display:grid; gap:3rem; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); align-items:center; }
.about-photo { border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-lg); position:relative; }
.about-photo img { width:100%; height:100%; object-fit:cover; }
.approach { display:flex; gap:1rem; flex-wrap:wrap; margin-top:1.25rem; }
.approach-step { background:var(--color-blue); color:var(--color-white); padding:.65rem 1rem; border-radius:var(--radius-md); font-size:.8rem; letter-spacing:.5px; box-shadow:var(--shadow-sm); }

/* Services */
.services-grid { display:grid; gap:1.5rem; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); margin-top:2rem; }
.service-card { background:var(--color-white); border:1px solid rgba(20,37,54,.08); padding:1.5rem 1.25rem 1.25rem; border-radius:var(--radius-lg); box-shadow:var(--shadow-sm); display:flex; flex-direction:column; gap:.75rem; position:relative; transition:var(--transition-fast); }
.service-card:hover { transform:translateY(-4px); box-shadow:var(--shadow-md); }
.service-icon { font-size:1.6rem; }
.service-card h3 { font-size:1rem; margin:.25rem 0 .25rem; }
.service-card p { font-size:.8rem; color:var(--color-text-light); margin:0 0 .75rem; }
.service-card a { align-self:flex-start; }

/* Portfolio */
.filter-chips { display:flex; flex-wrap:wrap; gap:.6rem; margin:0 0 1.5rem; }
.filter-chips button { background:var(--color-gray); border:1px solid rgba(20,37,54,.1); padding:.55rem .9rem; font-size:.75rem; font-weight:500; border-radius:var(--radius-sm); cursor:pointer; transition:var(--transition-fast); }
.filter-chips button.active { background:var(--color-blue); color:var(--color-white); }
.filter-chips button:hover { background:#e2e6ea; }
.portfolio-grid { columns:3 240px; column-gap:1rem; }
.work-item { break-inside:avoid; position:relative; margin:0 0 1rem; border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-md); cursor:pointer; }
.work-item img { width:100%; display:block; }
.work-hover { position:absolute; inset:0; background:rgba(20,37,54,.74); color:var(--color-white); opacity:0; display:flex; flex-direction:column; justify-content:flex-end; padding:1rem 1rem 1.25rem; transition:var(--transition-fast); }
.work-item:hover .work-hover { opacity:1; }
.work-hover h4 { margin:0 0 .4rem; font-size:.95rem; }
.work-hover span { font-size:.65rem; letter-spacing:.5px; opacity:.85; }

/* Printing */
.printing-table { width:100%; max-width:760px; border-collapse:collapse; margin:2rem 0 1rem; font-size:.78rem; }
.printing-table th, .printing-table td { border:1px solid rgba(20,37,54,.12); padding:.65rem .75rem; text-align:left; }
.printing-table th { background:var(--color-navy); color:var(--color-white); font-weight:500; }

/* Packages */
.packages-grid { display:grid; gap:1.5rem; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); margin-top:2rem; }
.package-card { background:var(--color-white); border:1px solid rgba(20,37,54,.08); padding:1.75rem 1.5rem; border-radius:var(--radius-lg); box-shadow:var(--shadow-sm); display:flex; flex-direction:column; gap:.9rem; position:relative; }
.package-card h3 { margin:0; font-size:1.15rem; }
.package-meta { font-size:.7rem; font-weight:600; letter-spacing:.6px; color:var(--color-blue); }
.package-list { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.45rem; font-size:.75rem; }
.package-list li { position:relative; padding-left:1.1rem; }
.package-list li::before { content:"✔"; position:absolute; left:0; top:0; color:var(--color-gold); font-size:.7rem; }

/* Testimonials */
.testimonials { display:grid; gap:1.25rem; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); margin-top:2rem; }
.testimonial { background:var(--color-white); border:1px solid rgba(20,37,54,.08); padding:1.5rem 1.25rem 1.25rem; border-radius:var(--radius-lg); box-shadow:var(--shadow-sm); position:relative; display:flex; flex-direction:column; gap:.75rem; }
.testimonial p { font-size:.8rem; margin:0; }
.testimonial strong { font-size:.7rem; letter-spacing:.5px; color:var(--color-blue); }
.testimonial img { width:48px; height:48px; border-radius:50%; object-fit:cover; box-shadow:var(--shadow-sm); }

/* CTA Band */
.cta-band { background:var(--color-blue); color:var(--color-white); border-radius:var(--radius-lg); padding:2.75rem 2.25rem; text-align:center; box-shadow:var(--shadow-md); }
.cta-band h2 { margin:0 0 1rem; font-size:clamp(1.8rem,5vw,2.4rem); }
.cta-band .band-buttons { display:flex; flex-wrap:wrap; justify-content:center; gap:1rem; }

/* Contact Form */
.contact-grid { display:grid; gap:2.5rem; grid-template-columns:repeat(auto-fit,minmax(340px,1fr)); margin-top:2rem; }
form.quote-form { display:grid; gap:1rem; }
.form-row { display:flex; gap:1rem; flex-wrap:wrap; }
.field { flex:1 1 160px; display:flex; flex-direction:column; gap:.4rem; }
.field label { font-size:.7rem; font-weight:600; letter-spacing:.7px; color:var(--color-text-light); }
.field input, .field select, .field textarea { width:100%; padding:.75rem .85rem; border:1px solid rgba(20,37,54,.18); border-radius:var(--radius-md); background:var(--color-white); font-size:.8rem; font-family:var(--font-body); resize:vertical; min-height:44px; }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { outline:2px solid var(--color-blue); outline-offset:2px; }
.multi-select { display:flex; flex-wrap:wrap; gap:.5rem; }
.multi-select label { background:var(--color-gray); border:1px solid rgba(20,37,54,.15); padding:.5rem .7rem; border-radius:var(--radius-sm); font-size:.65rem; cursor:pointer; user-select:none; display:flex; align-items:center; gap:.4rem; }
.multi-select input { display:none; }
.multi-select input:checked + span { color:var(--color-white); background:var(--color-blue); padding:.3rem .45rem; border-radius:var(--radius-sm); }
.form-status { font-size:.7rem; font-weight:600; letter-spacing:.5px; min-height:18px; }
.form-status.success { color:green; }
.form-status.error { color:#cc1d1d; }

/* Footer */
footer.site-footer { background:var(--color-navy); color:var(--color-white); padding:3.5rem 0 2.5rem; }
.footer-grid { display:grid; gap:2rem; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); }
.footer-col h4 { margin:0 0 .75rem; font-size:.85rem; letter-spacing:1px; }
.footer-col ul { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.5rem; }
.footer-col a { color:rgba(255,255,255,.85); text-decoration:none; font-size:.7rem; }
.footer-col a:hover { color:var(--color-gold); }
.newsletter { display:flex; gap:.5rem; margin-top:.75rem; }
.newsletter input { flex:1; padding:.6rem .75rem; border-radius:var(--radius-md); border:1px solid rgba(255,255,255,.4); background:rgba(255,255,255,.15); color:var(--color-white); }
.newsletter input:focus-visible { outline:2px solid var(--color-gold); }
.newsletter button { font-size:.7rem; }
.copyright { margin-top:2.5rem; font-size:.6rem; opacity:.7; text-align:center; }

/* WhatsApp Floating Button */
.whatsapp-float { position:fixed; bottom:1.25rem; right:1.25rem; z-index:60; }
.whatsapp-float a { background:#25D366; color:#fff; display:flex; align-items:center; gap:.5rem; padding:.9rem 1rem; border-radius:50px; box-shadow:var(--shadow-lg); font-size:.75rem; font-weight:600; letter-spacing:.5px; text-decoration:none; }
.whatsapp-float a:hover { background:#1ebe58; }

/* Mobile nav overlay */
.nav-overlay { position:fixed; inset:0; background:rgba(20,37,54,.35); opacity:0; pointer-events:none; transition:opacity var(--transition-fast); z-index:40; }
body.nav-open .nav-overlay { opacity:1; pointer-events:auto; }

/* Animations & Transitions - Soft & Modern */
.reveal { opacity:0; transform:translateY(24px); transition:opacity .7s cubic-bezier(.2,.8,.2,1), transform .7s cubic-bezier(.2,.8,.2,1); }
.reveal.visible { opacity:1; transform:translateY(0); }

/* Smooth button transitions */
.btn { box-shadow:0 2px 8px rgba(18,121,188,.12); transition:all var(--transition-fast); }
.btn:hover { transform:translateY(-2px); box-shadow:0 6px 16px rgba(18,121,188,.18); }
.btn:active { transform:translateY(0); }

/* Card hover effects */
.service-card, .package-card, .testimonial, .work-item { transition:all .3s cubic-bezier(.2,.8,.2,1); }
.service-card:hover { box-shadow:0 12px 24px rgba(20,37,54,.15); }
.work-item:hover { box-shadow:0 16px 32px rgba(20,37,54,.18); }

/* Smooth input focus */
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { box-shadow:0 0 0 3px rgba(18,121,188,.1); }

/* Soft backdrop filters */
header.site-header { background:rgba(255,255,255,.88); }

/* Reduce motion for accessibility */
@media (prefers-reduced-motion:reduce) {
  * { animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important; }
}

/* Responsive Tweaks - Mobile First */
@media (max-width:820px) {
  /* Header & Nav */
  .header-inner { padding:.6rem 1rem; }
  .mobile-nav-toggle { display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; border-radius:var(--radius-md); border:none; background:rgba(18,121,188,.08); font-size:1.3rem; cursor:pointer; color:var(--color-blue); transition:all var(--transition-fast); }
  .mobile-nav-toggle:hover { background:rgba(18,121,188,.15); }
  .mobile-nav-toggle:focus-visible { outline:2px solid var(--color-gold); outline-offset:2px; }
  
  /* Mobile Nav Drawer */
  nav.primary-nav { position:fixed; top:0; right:0; height:100vh; width:85%; max-width:320px; background:#fff; padding:5rem 1.5rem 2rem; flex-direction:column; align-items:flex-start; gap:.75rem; box-shadow:-8px 0 32px rgba(20,37,54,.12); transform:translateX(100%); transition:transform 0.32s cubic-bezier(.4,.0,.2,1); display:flex; z-index:50; overflow-y:auto; pointer-events:none; visibility:hidden; will-change:transform; }
  body.nav-open nav.primary-nav { transform:translateX(0); pointer-events:auto; visibility:visible; }
  nav.primary-nav ul { flex-direction:column; align-items:flex-start; gap:.5rem; width:100%; }
  nav.primary-nav a { font-size:.9rem; padding:.6rem 0; transition:color var(--transition-fast); }
  nav.primary-nav a:hover { color:var(--color-blue); }
  nav.primary-nav .submenu { position:static; box-shadow:none; border:none; background:transparent; width:100%; margin-top:.3rem; padding-left:1rem; border-left:2px solid rgba(18,121,188,.2); }
  nav.primary-nav .submenu a { font-size:.8rem; padding:.4rem 0; color:var(--color-text-light); }
  nav.primary-nav li.open > .submenu { display:flex; }
  
  /* Hide desktop nav CTA on mobile */
  .nav-ctas { display:none !important; }
  
  /* Hero on mobile */
  .hero { min-height:60vh; }
  .hero-content { padding:1.75rem 1.25rem; max-width:100%; }
  .hero-content h1 { font-size:clamp(1.6rem, 5vw, 2.4rem); margin:0 0 .8rem; }
  .hero-content p { font-size:.95rem; margin:0 0 1.5rem; line-height:1.6; }
  .hero-ctas { gap:.75rem; }
  .hero-dots { bottom:.75rem; }
  .hero-dots button { width:12px; height:12px; }
  
  /* Pillars grid */
  .pillars { grid-template-columns:1fr; gap:.9rem; }
  .pillar { padding:1.25rem; border-radius:var(--radius-md); }
  
  /* About grid */
  .about-grid { gap:2rem; grid-template-columns:1fr; }
  .about-photo { max-height:300px; }
  
  /* Services grid */
  .services-grid { grid-template-columns:1fr; gap:1.2rem; }
  .service-card { padding:1.25rem 1rem; }
  
  /* Portfolio */
  .filter-chips { gap:.4rem; margin:0 0 1rem; }
  .filter-chips button { padding:.4rem .65rem; font-size:.7rem; }
  .portfolio-grid { columns:1 1fr; column-gap:.75rem; }
  
  /* Form */
  .contact-grid { gap:2rem; grid-template-columns:1fr; }
  .form-row { flex-direction:column; gap:.6rem; }
  .field { flex:1 1 100%; }
  
  /* CTA Band */
  .cta-band { padding:2rem 1.5rem; }
  .cta-band h2 { font-size:clamp(1.4rem, 4vw, 1.8rem); margin:0 0 1rem; }
  .cta-band .band-buttons { gap:.75rem; flex-direction:column; }
  .cta-band .band-buttons a { width:100%; text-align:center; }
  
  /* Footer */
  .footer-grid { grid-template-columns:1fr; gap:1.5rem; }
  footer.site-footer { padding:2.5rem 0 2rem; }
  
  /* WhatsApp float button */
  .whatsapp-float { bottom:1rem; right:1rem; }
  .whatsapp-float a { padding:.7rem .9rem; font-size:.7rem; }
  
  /* Smooth scrolling sections */
  .section { padding:3.5rem 0; }
  .section-tight { padding:2.5rem 0; }
  
  /* Button scaling */
  .btn { padding:.75rem 1.15rem; font-size:.85rem; }
}

/* Mobile overlay with soft blur */
.nav-overlay { position:fixed; inset:0; background:rgba(20,37,54,.4); backdrop-filter:blur(3px); opacity:0; pointer-events:none; transition:opacity 0.3s cubic-bezier(.4,.0,.2,1); z-index:49; }
body.nav-open .nav-overlay { opacity:1; pointer-events:auto; }
body.nav-open { overflow:hidden; }

/* Desktop only: hide mobile elements */
@media (min-width:821px) {
  .mobile-nav-toggle, .nav-overlay { display:none !important; }
}

/* Extra small phones */
@media (max-width:480px) {
  h1, h2 { font-size:clamp(1.3rem, 4vw, 2rem); }
  .hero-content { padding:1.5rem 1rem; }
  .hero-content h1 { font-size:clamp(1.4rem, 4.5vw, 2rem); }
  .section { padding:2.75rem 0; }
  .container { padding:0 1rem; }
  .btn { padding:.65rem .95rem; font-size:.8rem; }
  .hero-ctas { flex-direction:column; }
  .hero-ctas .btn { width:100%; }
}

@media (prefers-reduced-motion:reduce) {
  * { animation:none !important; transition:none !important; }
}