/* PREVIEW Option 6b (25 Oct 2026): bolder new look for all pages.
   Loaded after style.css. Builds on the gentle look (6) and adds: wave-edged full-width heroes
   with an umbrella pattern, gradient section titles, swipeable service cards on phones,
   full-width colour bands, gradient buttons and a wave-topped footer. */
:root { --radius: 18px; --shadow: 0 10px 28px rgba(10, 45, 128, .10); --shadow-hover: 0 18px 38px rgba(10, 45, 128, .18);
  --umbrella: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='90' viewBox='0 0 90 90'%3E%3Cpath d='M25 45a20 20 0 0 1 40 0z' fill='none' stroke='white' stroke-opacity='.12' stroke-width='2'/%3E%3Cpath d='M45 45v14a4 4 0 0 0 8 0' fill='none' stroke='white' stroke-opacity='.12' stroke-width='2'/%3E%3C/svg%3E"); }

body { background: #f3f6fb; }
header { background: #fff; border-bottom: 0; box-shadow: 0 2px 20px rgba(10, 45, 128, .08); }

/* full-width heroes with wave bottom and umbrella pattern */
main > .hero, main > section.hero {
  border-radius: 0; margin: 0 0 2rem; padding: 4.5rem 1.5rem 5.5rem;
  background: var(--umbrella), radial-gradient(circle at 80% 10%, rgba(255, 255, 255, .2), transparent 45%), linear-gradient(140deg, #0A2D80 0%, #0b4fa0 55%, #0088A8 100%);
  margin-inline: calc(50% - 50vw); padding-inline: max(1.5rem, calc(50vw - 50% + 1.5rem));
  clip-path: polygon(0 0, 100% 0, 100% 88%, 75% 100%, 25% 92%, 0 100%);
}
.hero h1 { font-size: clamp(2rem, 6vw, 3.2rem); letter-spacing: -.01em; }
.hero p { font-size: 1.08rem; }

/* gradient, centred section titles */
main section > h2:not(.section-label) { text-align: center; font-size: clamp(1.5rem, 4.5vw, 2.1rem); background: linear-gradient(90deg, #0A2D80, #0088A8); -webkit-background-clip: text; background-clip: text; color: transparent; }
main section > h2:not(.section-label)::after { content: ""; display: block; width: 54px; height: 5px; border-radius: 5px; background: linear-gradient(90deg, #0A2D80, #0088A8); margin: .5rem auto 0; }
main section > h2:not(.section-label) + p { text-align: center; max-width: 560px; margin-inline: auto; }
.hero h2, .qf-hero h2, .road h2, .protect h2 { background: none; color: inherit; }
.hero h2::after, .qf-hero h2::after, .road h2::after, .protect h2::after { display: none !important; }
.road h2, .protect h2 { color: #0A2D80; }

/* gradient pill buttons */
.cta-button, .help-btn.primary { border-radius: 999px; background: #fff; box-shadow: 0 8px 20px rgba(10, 45, 128, .2); transition: transform .2s, box-shadow .2s; }
main .cta-button:not(.hero-carousel__cta) { background: linear-gradient(135deg, #0088A8, #0A2D80); color: #fff; }
.hero .cta-button { background: #fff; color: #0A2D80; }
.cta-button:hover, .help-btn:hover { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(10, 45, 128, .26); opacity: 1; }

/* cards */
.service-card, .why-touma-list li, .claims-callout, .partner-logo { background: #fff; border: 0; box-shadow: var(--shadow); transition: transform .25s, box-shadow .25s; }
.service-card:hover, .partner-logo:hover { transform: translateY(-5px); box-shadow: var(--shadow-hover); }
.service-card { border-radius: 22px; overflow: hidden; }
.service-card__photo { transition: transform .5s; }
.icon-badge { background: linear-gradient(135deg, #0A2D80, #0088A8); box-shadow: 0 8px 16px rgba(0, 136, 168, .32); }

/* phones: service cards become a swipeable row */
@media (max-width: 700px) {
  .service-cards { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 14px; padding: 6px 4px 18px; margin-inline: -1.25rem; padding-inline: 1.25rem; scrollbar-width: none; }
  .service-cards::-webkit-scrollbar { display: none; }
  .service-cards > .service-card { flex: 0 0 78%; scroll-snap-align: center; }
}

/* trust strip as a floating pill */
.trust-strip { background: #fff; border: 0; box-shadow: var(--shadow); border-radius: 999px; }
@media (max-width: 640px) { .trust-strip { border-radius: 20px; } }

/* full-width colour bands */
.help-box { border-radius: 0; margin-inline: calc(50% - 50vw); padding: 2rem max(1.25rem, calc(50vw - 50% + 1.25rem)); background: var(--umbrella), linear-gradient(135deg, #0A2D80, #12419f); box-shadow: none; }
.switch-save { border: 0; border-inline-start: 7px solid #0088A8; box-shadow: var(--shadow); border-radius: 22px; }

/* wave-topped navy footer */
footer { position: relative; background: #0A2D80; color: rgba(255, 255, 255, .78); border-top: 0; box-shadow: 0 0 0 100vmax #0A2D80; clip-path: polygon(-100vmax 40px, 25% 0, 60% 34px, calc(100% + 100vmax) 6px, calc(100% + 100vmax) 100%, -100vmax 100%); padding-top: 4rem; margin-top: 4rem; }
footer a { color: #fff; }
footer .footer-columns h4, footer .footer-columns .site-group-label { color: #fff; }
footer .footer-columns a, footer .footer-columns li a { color: rgba(255, 255, 255, .82); }
footer .footer-columns a:hover { color: #fff; }
/* titles inside blue boxes stay white */
main .hero > h2:not(.section-label), main .hero h1, main .help-box h2, main .glow-band h2 { background: none !important; -webkit-background-clip: border-box !important; background-clip: border-box !important; color: #fff !important; text-align: inherit; }
main .hero > h2:not(.section-label)::after, main .help-box h2::after { display: none !important; }
/* Rich: buttons move a little when pointed at */
.cta-button:hover, .help-btn:hover, .qf-btn:hover, .pr-cta:hover { transform: translateY(-3px) scale(1.03); }
.card-cta { transition: transform .2s; } .card-cta:hover { transform: translateX(4px); } [dir="rtl"] .card-cta:hover { transform: translateX(-4px); }
.service-card:hover .service-card__photo { transform: scale(1.05); }
/* keep side slides from making the page scroll sideways */
html, body { overflow-x: clip; }

/* intro box (hero-light): white card with navy text, not blue */
main > .hero.hero-light { background: radial-gradient(circle at 85% 0%, rgba(0,136,168,.10), transparent 45%), linear-gradient(180deg, #ffffff, #eef4fb) !important; color: #0A2D80; clip-path: none; margin: 1.5rem 0; padding: 2.5rem 1.25rem; border-radius: 22px; box-shadow: 0 12px 30px rgba(10,45,128,.10); }
main > .hero.hero-light h1, main > .hero.hero-light h2 { color: #0A2D80 !important; }
main > .hero.hero-light p { color: #3d4a66; }
main > .hero.hero-light .hero-message, main > .hero.hero-light .hero-message strong { color: #0088A8; }
main > .hero.hero-light .cta-button { background: linear-gradient(135deg, #0088A8, #0A2D80); color: #fff; }
/* hero photos: slow zoom while each slide shows */
.hero-carousel__slide img { transform-origin: 60% 40%; }
.hero-carousel__slide.is-active img { animation: heroZoom 7s ease-out both; }
@keyframes heroZoom { from { transform: scale(1); } to { transform: scale(1.12); } }
@media (prefers-reduced-motion: reduce) { .hero-carousel__slide.is-active img { animation: none; } }