/* Complete CSS styles for all pages with mobile menu and cookie banner */
/* =========================================================
   Whispering Dream Pitch Studio — Creative Artistic Theme
   Mobile-first, flexbox-only, high-contrast, brand-forward
   ========================================================= */
/* 1) Reset & base */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Montserrat:wght@600;700;800&display=swap');
* { box-sizing: border-box; }
html, body { height: 100%; }
html { scroll-behavior: smooth; }
body { margin: 0; font-family: Inter, Arial, sans-serif; color: #0E1B2E; background: #FFFFFF; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
img { max-width: 100%; height: auto; display: block; }
a { color: #28549b; text-decoration: none; }
a:hover, a:focus { text-decoration: underline; outline: none; }
:root { --primary: #28549b; --secondary: #00C2A8; --accent: #F5FAFF; --ink: #0E1B2E; --muted: #5B6C8C; --line: #E5EAF3; --canvas: #FFFFFF; --highlight: #FF5A8A; /* artistic micro-accent */ }
/* Fallbacks */
body { color: var(--ink, #0E1B2E); background: var(--canvas, #FFFFFF); }
/* Typography scale */
h1, h2, h3 { font-family: Montserrat, Inter, Arial, sans-serif; line-height: 1.2; margin: 0 0 12px; color: var(--primary); }
h1 { font-size: 34px; letter-spacing: -0.02em; }
h2 { font-size: 26px; letter-spacing: -0.01em; }
h3 { font-size: 20px; }
p, li { font-size: 16px; line-height: 1.7; color: var(--ink); margin: 0 0 12px; }
small, .meta-kicker { font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.subheadline { font-size: 18px; color: var(--ink); opacity: 0.9; }
strong { color: var(--ink); }
/* Artistic heading underline */
h2.art-underline, .content-wrapper > h2 { position: relative; display: inline-flex; align-items: center; }
.content-wrapper > h2::after { content: ""; height: 8px; width: 56px; background: var(--secondary); border-radius: 8px; margin-left: 12px; display: inline-block; opacity: 0.9; }
/* Layout helpers */
.container { width: 100%; max-width: 1200px; padding: 0 20px; margin: 0 auto; display: flex; flex-direction: column; gap: 20px; }
.content-wrapper { display: flex; flex-direction: column; gap: 16px; position: relative; z-index: 1; }
.section { margin-bottom: 60px; padding: 40px 20px; }
.card-container { display: flex; flex-wrap: wrap; gap: 24px; }
.card { margin-bottom: 20px; position: relative; }
.content-grid { display: flex; flex-wrap: wrap; gap: 20px; justify-content: space-between; }
.text-image-section { display: flex; align-items: center; gap: 30px; flex-wrap: wrap; }
.testimonial-card { display: flex; align-items: center; gap: 20px; padding: 20px; }
.feature-item { display: flex; flex-direction: column; align-items: flex-start; gap: 15px; }
/* Spacing consistency */
section { padding: 52px 0; }
section + section { margin-top: 20px; }
/* Interactive focus */
:focus-visible { outline: 3px solid var(--secondary); outline-offset: 2px; border-radius: 6px; }
/* 2) Header & Navigation */
header { position: sticky; top: 0; background: var(--canvas); border-bottom: 1px solid var(--line); z-index: 50; }
header .container { flex-direction: row; align-items: center; justify-content: space-between; gap: 16px; padding-top: 12px; padding-bottom: 12px; }
.logo img { height: 36px; width: auto; }
.main-nav { display: none; align-items: center; gap: 16px; }
.main-nav a { padding: 10px 12px; border-radius: 10px; color: var(--ink); font-weight: 500; transition: background 200ms ease, color 200ms ease; }
.main-nav a:hover { background: var(--accent); color: var(--primary); }
.header-cta { display: none; align-items: center; gap: 10px; }
/* Mobile menu toggle */
.mobile-menu-toggle { background: var(--primary); color: #fff; border: 0; padding: 10px 14px; border-radius: 12px; font-size: 18px; line-height: 1; cursor: pointer; transition: transform 200ms ease, box-shadow 200ms ease; }
.mobile-menu-toggle:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(11,47,106,0.25); }
/* Mobile menu overlay */
.mobile-menu { position: fixed; inset: 0 0 0 0; background: rgba(14,27,46,0.72); display: flex; align-items: flex-start; justify-content: flex-end; transform: translateX(100%); transition: transform 300ms ease; z-index: 100; }
.mobile-menu.open { transform: translateX(0); }
.mobile-menu .mobile-nav { background: var(--canvas); width: 88%; max-width: 360px; height: 100%; display: flex; flex-direction: column; gap: 4px; padding: 20px; box-shadow: -8px 0 24px rgba(0,0,0,0.15); }
.mobile-menu-close { align-self: flex-end; background: transparent; border: 0; font-size: 24px; color: var(--ink); cursor: pointer; padding: 6px; margin-bottom: 6px; }
.mobile-nav a { padding: 14px 12px; border-radius: 12px; color: var(--ink); font-weight: 600; display: flex; align-items: center; justify-content: space-between; }
.mobile-nav a:hover { background: var(--accent); color: var(--primary); }
/* 3) Buttons */
.button { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 12px 18px; border-radius: 14px; border: 2px solid transparent; font-weight: 700; letter-spacing: 0.02em; transition: transform 180ms ease, box-shadow 220ms ease, background 200ms ease, color 200ms ease, border-color 200ms ease; cursor: pointer; }
.button.primary { background: var(--secondary); color: #05241F; border-color: var(--secondary); box-shadow: 0 6px 16px rgba(0,194,168,0.35); }
.button.primary:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(0,194,168,0.45); }
.button.secondary { background: var(--canvas); color: var(--primary); border-color: var(--primary); }
.button.secondary:hover { background: var(--accent); transform: translateY(-2px); box-shadow: 0 6px 16px rgba(11,47,106,0.18); }
.button:active { transform: translateY(0); box-shadow: none; }
/* 4) Hero */
.hero { background: var(--accent); position: relative; overflow: hidden; }
/* Decorative artistic shapes */
.hero::before, .hero::after { content: ""; position: absolute; border-radius: 50%; opacity: 0.12; pointer-events: none; z-index: 0; }
.hero::before { width: 520px; height: 520px; background: var(--secondary); right: -160px; top: -140px; filter: blur(2px); }
.hero::after { width: 360px; height: 360px; background: var(--primary); left: -120px; bottom: -140px; }
.hero .container { position: relative; z-index: 1; }
.hero .content-wrapper { gap: 16px; }
.hero h1 { font-size: 32px; color: var(--primary); }
.hero .cta-group { display: flex; flex-wrap: wrap; gap: 12px; }
.supporting-bullets { display: flex; flex-direction: column; gap: 10px; padding: 0; margin: 8px 0 0; list-style: none; }
.supporting-bullets li { padding: 10px 12px 10px 40px; border: 1px solid var(--line); border-radius: 12px; position: relative; background: #fff; }
.supporting-bullets li::before { content: ""; width: 16px; height: 16px; border-radius: 50%; background: var(--secondary); position: absolute; left: 12px; top: 50%; transform: translateY(-50%); box-shadow: 0 0 0 4px rgba(0,194,168,0.18); }
.trust-badges p { color: var(--muted); font-size: 14px; }
/* 5) Stats & KPI cards */
.stats { background: #FFFFFF; }
.kpi-cards { display: flex; flex-wrap: wrap; gap: 16px; }
.kpi { flex: 1 1 140px; min-width: 140px; padding: 16px; border: 1px solid var(--line); border-radius: 16px; background: #fff; display: flex; flex-direction: column; gap: 6px; box-shadow: 0 4px 12px rgba(14,27,46,0.06); }
.kpi strong { font-size: 22px; color: var(--primary); }
.kpi span { color: var(--muted); font-size: 14px; }
.metric-definitions p, .awards-mentions p { color: var(--muted); }
/* 6) Feature grid */
.feature-grid { display: flex; flex-wrap: wrap; gap: 16px; }
.feature { flex: 1 1 260px; padding: 18px; border-radius: 16px; border: 1px solid var(--line); background: #fff; box-shadow: 0 6px 16px rgba(11,47,106,0.06); transition: transform 200ms ease, box-shadow 200ms ease; }
.feature:hover { transform: translateY(-4px); box-shadow: 0 12px 28px rgba(11,47,106,0.12); }
.feature h3 { color: var(--primary); font-size: 18px; }
/* 7) Services cards */
.service-cards, .service-list { display: flex; flex-wrap: wrap; gap: 16px; }
.service-card, .service-item { flex: 1 1 260px; padding: 18px; border-radius: 16px; border: 1px solid var(--line); background: #fff; box-shadow: 0 4px 12px rgba(14,27,46,0.06); }
.service-card h3, .service-item h3 { color: var(--primary); font-size: 18px; margin-bottom: 8px; }
/* 8) Process / Stepper */
.stepper, .process ol, .method ol { display: flex; flex-wrap: wrap; gap: 12px; padding-left: 0; margin: 0; list-style: none; }
.stepper li, .process ol li, .method ol li { flex: 1 1 240px; border: 1px dashed var(--line); background: #fff; border-radius: 14px; padding: 14px; position: relative; }
.stepper li::before, .process ol li::before, .method ol li::before { content: ""; width: 8px; height: 8px; background: var(--highlight); border-radius: 50%; position: absolute; left: 12px; top: 12px; }
/* 9) Case teasers & cards */
.teasers { display: flex; flex-wrap: wrap; gap: 16px; }
.teaser { flex: 1 1 260px; padding: 18px; border-radius: 16px; border: 1px solid var(--line); background: #fff; box-shadow: 0 4px 12px rgba(14,27,46,0.06); }
/* Case grid: content-wrapper as flex container */
.case-grid .content-wrapper { display: flex; flex-wrap: wrap; gap: 16px; }
.case-grid .content-wrapper > h2 { flex: 1 1 100%; }
.case-card { flex: 1 1 320px; padding: 18px; border-radius: 16px; border: 1px solid var(--line); background: #fff; box-shadow: 0 4px 12px rgba(14,27,46,0.06); }
/* 10) Testimonials — ensure high contrast (light bg, dark text) */
.testimonials { background: #FDFEFF; }
.testimonials .content-wrapper { gap: 16px; }
.testimonial-card { background: #FFFFFF; border: 1px solid var(--line); border-left: 6px solid var(--secondary); border-radius: 16px; box-shadow: 0 6px 16px rgba(0,0,0,0.06); color: var(--ink); }
.testimonial-card p { margin: 0; }
/* 11) Pricing tiers */
.packages .content-wrapper, .inclusions .content-wrapper, .value .content-wrapper { display: flex; flex-wrap: wrap; gap: 16px; }
.packages .content-wrapper > h2 { flex: 1 1 100%; }
.tier { flex: 1 1 260px; padding: 18px; border-radius: 16px; border: 1px solid var(--line); background: #fff; box-shadow: 0 4px 12px rgba(14,27,46,0.06); position: relative; }
.tier h3 { margin-bottom: 10px; }
.tier ul { margin: 0; padding-left: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; }
.tier ul li { padding-left: 26px; position: relative; }
.tier ul li::before { content: ""; width: 10px; height: 10px; border-radius: 2px; background: var(--primary); position: absolute; left: 0; top: 8px; box-shadow: 0 0 0 4px rgba(11,47,106,0.10); }
/* 12) FAQ */
.faq .content-wrapper, .faq .container .content-wrapper { display: flex; flex-direction: column; gap: 12px; }
.faq-item { display: flex; flex-direction: column; gap: 6px; padding: 16px; border-radius: 14px; border: 1px solid var(--line); background: #fff; }
.faq-item h3 { margin-bottom: 4px; font-size: 18px; color: var(--primary); }
/* 13) Contact details */
.contact-details .content-wrapper p a { text-decoration: underline; text-underline-offset: 2px; }
/* 14) CTA Groups */
.cta-group { display: flex; flex-wrap: wrap; gap: 12px; }
/* 15) Footer */
footer { background: var(--primary); color: #E9F2FF; margin-top: 40px; }
footer a { color: #E9F2FF; }
footer .container { padding-top: 28px; padding-bottom: 28px; }
footer .content-wrapper { display: flex; flex-direction: column; gap: 20px; }
.footer-top { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; justify-content: space-between; }
.footer-menu { display: flex; flex-wrap: wrap; gap: 12px; }
.footer-menu a { padding: 8px 10px; border-radius: 10px; transition: background 200ms ease; }
.footer-menu a:hover { background: rgba(255,255,255,0.1); }
.footer-contact { display: flex; flex-direction: column; gap: 6px; }
.footer-contact img { width: 16px; height: 16px; display: inline-block; vertical-align: middle; margin-right: 6px; }
.legal { border-top: 1px solid rgba(255,255,255,0.16); padding-top: 12px; font-size: 14px; color: #DCE8FF; }
/* 16) Legal pages */
.legal .content-wrapper, .terms .content-wrapper, .principles .content-wrapper, .rights .content-wrapper, .roles .content-wrapper { display: flex; flex-direction: column; gap: 12px; }
.legal ul, .terms ul, .principles ul, .rights ul { padding-left: 18px; }
/* 17) Artistic micro-animations */
[data-tilt] { transition: transform 300ms ease; }
[data-tilt]:hover { transform: translateY(-4px) rotate(-0.4deg); }
/* 18) Utilities */
.hidden { display: none !important; }
.muted { color: var(--muted); }
/* 19) Mobile-first responsive adjustments */
@media (min-width: 480px) {
  h1 { font-size: 36px; }
  h2 { font-size: 28px; }
}
@media (min-width: 768px) {
  header .container { gap: 20px; }
  .main-nav { display: flex; }
  .header-cta { display: flex; }
  .mobile-menu-toggle { display: none; }
  .hero h1 { font-size: 44px; }
  .subheadline { font-size: 20px; }
  .text-image-section { flex-direction: row; }
}
@media (max-width: 768px) {
  .text-image-section { flex-direction: column; }
}
@media (min-width: 1024px) {
  h1 { font-size: 48px; }
  h2 { font-size: 32px; }
  p, li { font-size: 17px; }
}
/* 20) Forms (future-proof) */
input, select, textarea { width: 100%; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--line); background: #fff; font-family: inherit; font-size: 16px; }
input:focus, select:focus, textarea:focus { border-color: var(--secondary); box-shadow: 0 0 0 4px rgba(0,194,168,0.15); outline: none; }
/* 21) Pricing disclaimers */
.disclaimer { color: var(--muted); font-size: 14px; }
/* 22) Headers inside colored sections */
.pricing-teaser, .pricing-cta, .contact-cta { background: var(--accent); }
/* 23) Ensure all common section wrappers are flex-oriented */
.features .content-wrapper, .services .content-wrapper, .process .content-wrapper, .case-teasers .content-wrapper, .pricing-teaser .content-wrapper, .pricing-cta .content-wrapper, .contact-cta .content-wrapper, .approach .content-wrapper, .quality .content-wrapper, .stats .content-wrapper, .story .content-wrapper, .team .content-wrapper, .next-steps .content-wrapper, .browse .content-wrapper, .value .content-wrapper { display: flex; flex-direction: column; gap: 16px; }
/* 24) High-contrast rules for testimonial and review text */
.testimonials h2, .testimonials p, .testimonial-card p, .testimonial-card strong { color: #0E1B2E; }
/* 25) Mobile menu z-index safety */
header, .mobile-menu { z-index: 100; }
/* 26) Cookie Consent Banner & Modal */
.cookie-banner { position: fixed; left: 0; right: 0; bottom: 0; background: #FFFFFF; border-top: 2px solid var(--secondary); box-shadow: 0 -6px 24px rgba(0,0,0,0.12); padding: 16px 20px; display: flex; flex-direction: column; gap: 12px; transform: translateY(100%); transition: transform 300ms ease; z-index: 120; }
.cookie-banner.show { transform: translateY(0); }
.cookie-banner .cookie-inner { display: flex; flex-direction: column; gap: 12px; }
.cookie-banner p { margin: 0; color: var(--ink); }
.cookie-buttons { display: flex; flex-wrap: wrap; gap: 10px; }
.cookie-buttons .btn { padding: 10px 14px; border-radius: 12px; font-weight: 700; border: 2px solid transparent; cursor: pointer; transition: transform 180ms ease, box-shadow 200ms ease, background 200ms ease; }
.cookie-buttons .accept { background: var(--secondary); color: #05241F; border-color: var(--secondary); box-shadow: 0 6px 16px rgba(0,194,168,0.35); }
.cookie-buttons .accept:hover { transform: translateY(-2px); }
.cookie-buttons .reject { background: #fff; color: var(--primary); border-color: var(--primary); }
.cookie-buttons .reject:hover { background: var(--accent); transform: translateY(-2px); }
.cookie-buttons .settings { background: #fff; color: var(--ink); border-color: var(--line); }
.cookie-buttons .settings:hover { background: var(--accent); }
/* Modal overlay */
.cookie-modal { position: fixed; inset: 0; background: rgba(14,27,46,0.6); display: none; align-items: center; justify-content: center; z-index: 130; }
.cookie-modal.open { display: flex; }
.cookie-modal .cookie-panel { width: 92%; max-width: 720px; background: #FFFFFF; border-radius: 18px; border: 1px solid var(--line); box-shadow: 0 16px 48px rgba(0,0,0,0.28); display: flex; flex-direction: column; gap: 16px; padding: 20px; }
.cookie-panel header { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.cookie-panel header h3 { margin: 0; color: var(--primary); font-size: 20px; }
.cookie-panel .close { background: transparent; border: 0; font-size: 22px; cursor: pointer; color: var(--ink); }
.cookie-categories { display: flex; flex-direction: column; gap: 12px; }
.cookie-category { display: flex; flex-direction: column; gap: 6px; padding: 12px; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.cookie-category .row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.cookie-actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; }
/* Toggle switch (analytics/marketing) */
.toggle { display: inline-flex; align-items: center; gap: 10px; }
.toggle .switch { width: 46px; height: 26px; background: #E7EEF7; border-radius: 16px; position: relative; display: inline-flex; align-items: center; padding: 0 3px; transition: background 200ms ease; }
.toggle .knob { width: 20px; height: 20px; background: #fff; border-radius: 50%; box-shadow: 0 2px 6px rgba(0,0,0,0.2); transform: translateX(0); transition: transform 200ms ease; }
.toggle.active .switch { background: var(--secondary); }
.toggle.active .knob { transform: translateX(20px); }
/* 27) Accessibility: contrast & spacing in testimonial/review sections */
.testimonials a { color: var(--primary); text-decoration: underline; }
/* 28) Prevent overlapping by adequate spacing */
.features, .services, .process, .case-teasers, .testimonials, .pricing-teaser, .faq, .pricing-cta, .contact-cta, .service-catalog, .approach, .quality, .stats, .story, .team, .next-steps, .browse, .value, .contact-details, .brief, .response, .packages, .inclusions, .case-grid, .cta, .terms, .principles, .rights, .roles, .legal { margin-bottom: 20px; }
/* 29) Artistic dividers */
.hr-accent { height: 4px; width: 80px; background: var(--highlight); border-radius: 4px; }
/* 30) Ensure aligning of text-image sections */
.text-image-section { align-items: center; }
/* 31) Icon sizing defaults */
img[alt^=""]:not([alt]) { } /* just placeholder if empty alt used */
/* 32) Header CTA stacking on small */
@media (max-width: 480px) { .header-cta { width: 100%; justify-content: flex-end; } }
/* 33) Ensure adequate min spacing for all cards */
.card, .feature, .service-card, .service-item, .teaser, .case-card, .testimonial-card, .faq-item, .tier, .kpi { margin-bottom: 20px; }
/* 34) Artistic link underline on hover */
a:hover { text-decoration-color: var(--highlight); }
/* 35) Lists inside sections without default bullets styling (opt-in visuals) */
section ul { margin: 0; }
/* 36) Specific page tweaks */
.hero p + .cta-group { margin-top: 6px; }
.pricing .hero .disclaimer { margin-top: 8px; }
/* 37) Z-index safety for decorative shapes */
.hero .content-wrapper, .hero .container { position: relative; z-index: 1; }
/* Done: Flexbox-only layouts, high-contrast testimonials, responsive mobile menu & cookie banner styles */