/* Retains the uploaded comic palette and typography. */
:focus-visible { outline:3px solid var(--vd); outline-offset:4px; }
.motion-paused *, .motion-paused *::before, .motion-paused *::after { animation-play-state:paused!important; transition:none!important; scroll-behavior:auto!important; }
.motion-paused .rv { opacity:1!important; transform:none!important; }
.motion-paused .hero .ghost,.motion-paused .hero .b { transform:none!important; }

/* A few readable comic captions, never a replacement for service or form copy. */
.comic-caption {
  display: inline-block;
  position: relative;
  max-width: 100%;
  padding: .65rem 1rem;
  border: 2px solid var(--ink, #1B0F3A);
  border-radius: 18px 18px 18px 4px;
  background: #C0FF72;
  color: #1B0F3A;
  box-shadow: 3px 3px 0 #1B0F3A;
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.5;
  overflow-wrap: anywhere;
}
.comic-caption--hero { margin: 0 0 1.5rem; }
.comic-conversation { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 1rem; margin: 1.5rem 0 2rem; }
.comic-conversation p { margin: 0; }
.comic-caption--reply { background: #FFB321; border-radius: 18px 18px 4px 18px; }
.card .comic-aside { margin-top: .8rem; font-size: .95rem; font-weight: 700; line-height: 1.5; color: inherit; }
@media (max-width: 600px) {
  .comic-caption--hero { font-size: .9rem; }
  .comic-conversation { gap: .8rem; }
}

.testimonial-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; margin-top: 1.5rem; }
.testimonial-card { margin: 0; padding: 1.5rem; border: 3px solid #1B0F3A; border-radius: 22px 22px 22px 5px; box-shadow: 5px 5px 0 #1B0F3A; background: #fff; color: #1B0F3A; }
.testimonial-card[data-tone="lime"] { background: #C0FF72; }
.testimonial-card[data-tone="white"] { background: #fff; }
.testimonial-card blockquote { margin: 0; font-size: 1rem; line-height: 1.75; overflow-wrap: anywhere; }
.testimonial-card blockquote p { margin: 0; }
.testimonial-card figcaption { margin-top: 1rem; font-weight: 700; }
.testimonial-note { margin-top: 1.5rem; font-size: .9rem; line-height: 1.6; }
@media (max-width: 720px) { .testimonial-grid { grid-template-columns: 1fr; } }

.portfolio-page { padding-block: 3rem 4rem; }
.portfolio-page h1 { font-size: clamp(2.5rem, 6vw, 4rem); margin-block: 1rem; }
.portfolio-intro { max-width: 65ch; line-height: 1.7; }
.portfolio-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; margin-block: 2rem 3rem; }
.portfolio-panel { padding: 1.5rem; border: 3px solid #1B0F3A; border-radius: 18px; box-shadow: 5px 5px 0 #1B0F3A; background: #fff; color: #1B0F3A; overflow-wrap: anywhere; }
.portfolio-panel h2 { font-size: 1.7rem; margin-block: 1rem; }
.portfolio-panel p { line-height: 1.65; }
.portfolio-number { display: inline-block; padding: .35rem .7rem; background: #C0FF72; border: 2px solid #1B0F3A; border-radius: 8px; font-weight: 800; }
.portfolio-status { font-weight: 700; border-top: 2px dashed #1B0F3A; padding-top: 1rem; margin-top: 1rem; }
.portfolio-note { max-width: 70ch; padding: 1.5rem; border-left: 5px solid #8C52FF; }
.portfolio-note p { margin-block: 1rem; line-height: 1.7; }
@media (max-width: 900px) { .portfolio-grid { grid-template-columns: 1fr; } }

/* Browser-QA corrections: legible captions and resilient navigation. */
.hero p.comic-caption--hero { color: #1B0F3A; font-size: 1rem; margin: 0 0 1.5rem; }
.portfolio-page h1 { text-shadow: 3px 3px 0 #FFB321; }
header.site-header .nav-links a { white-space: nowrap; }
@media (min-width: 1201px) {
  header.site-header .nav { max-width: 1320px; gap: 14px; }
  header.site-header .nav-links { gap: 14px; margin-inline: auto; flex-shrink: 0; align-items: center; }
  header.site-header .nav-links a { display: block; font-size: .94rem; line-height: 1.3; }
  header.site-header .brand { font-size: 1.65rem; gap: 8px; flex-shrink: 0; }
  header.site-header .lang-select { padding-inline: 10px; }
  header.site-header .desktop-cta { white-space: nowrap; flex-shrink: 0; }
}
@media (max-width: 1200px) {
  header.site-header { top: 0; margin: 0; background: var(--bg); pointer-events: auto; border-bottom: 2px solid var(--ink); }
  header.site-header .nav { position: relative; width: 100%; max-width: none; height: auto; min-height: var(--header-h); padding: 10px 20px; gap: 12px; margin: 0; border: 0; border-radius: 0; box-shadow: none; justify-content: space-between; }
  header.site-header .nav::after { display: none; }
  header.site-header .nav-links { display: none; }
  header.site-header .menu-btn { display: inline-block; flex-shrink: 0; }
  header.site-header .desktop-cta { display: none !important; }
  header.site-header .mobile-only-action { display: block !important; }
  header.site-header .nav-links.open { display: flex; position: absolute; top: 100%; inset-inline: 0; flex-direction: column; gap: 0; margin: 0; padding: 12px 20px; background: var(--paper); border-bottom: 3px solid var(--ink); max-height: calc(100dvh - 90px); overflow-y: auto; box-shadow: 0 6px 0 rgba(27,15,58,.1); }
  header.site-header .nav-links.open a { display: block; padding: 12px 8px; font-size: 1rem; }
  header.site-header .nav-links.open .btn { display: inline-flex; margin-block: 8px; }
}
@media (max-width: 520px) {
  header.site-header .nav { padding-inline: 12px; gap: 8px; }
  header.site-header .brand { font-size: 1.4rem; gap: 5px; flex-shrink: 0; }
  header.site-header .brand svg { width: 32px; height: 26px; }
  header.site-header #localeForm { min-width: 0; }
  header.site-header .lang-select { width: 100%; max-width: 100px; min-height: 44px; padding: 6px 5px; font-size: .85rem; }
  header.site-header .menu-btn { padding: 8px 10px; font-size: 1rem; }
}

/* Keep the decorative services burst inside its own section, not the viewport. */
#services > .wrap { position: relative; }
#services > .wrap > .burst { display: block; top: 8px; inset-inline-end: 24px; width: 180px; }
#services > .wrap > .section-heading-wrap { padding-inline-end: 230px; min-height: 220px; }
@media (max-width: 860px) {
  #services > .wrap > .burst { display: block; position: relative; top: auto; inset-inline-end: auto; width: 170px; margin: 0 auto 32px; }
  #services > .wrap > .section-heading-wrap { padding-inline-end: 0; min-height: 0; }
}

.about-page { padding-top: 120px; padding-bottom: 72px; }
.about-page .section-heading-wrap { max-width: 900px; }
.about-page .section-heading-wrap h1 { font-size: clamp(2.5rem, 4.5vw, 3.7rem); line-height: 1.08; max-width: 25ch; text-shadow: 3px 3px 0 var(--sf); }
.about-page .section-heading-wrap .lead { max-width: 65ch; }
.section-eyebrow { font-size: .9rem; font-weight: 800; letter-spacing: .08em; margin: 1.25rem 0 .75rem; }
@media (max-width: 1200px) { .about-page { padding-top: 36px; } }

/* Interior pages share readable headings and floating-header clearance. */
#main-content > .wrap > .section-heading-wrap h1 { font-size: clamp(2.5rem, 4.5vw, 3.7rem); line-height: 1.08; max-width: 25ch; text-shadow: 3px 3px 0 var(--sf); }
@media (min-width: 1201px) { #main-content > .wrap { padding-top: 120px !important; } }

/* Requested wordmark: retain the existing symbol, set the text in true lowercase. */
header.site-header .brand-wordmark { font-family: var(--text), sans-serif; font-size: 1.65rem; line-height: 1; font-weight: 800; letter-spacing: -.06em; text-transform: none; color: #8C52FF; white-space: nowrap; }
header.site-header .brand-dot { color: #C0FF72; text-shadow: 1px 1px 0 #1B0F3A; }
@media (max-width: 520px) { header.site-header .brand-wordmark { font-size: 1.4rem; } }

/* Keep mobile content and form controls clear of the floating contact shortcut. */
@media (max-width: 600px) { .wa { display: none; } }
@media (max-width: 360px) {
  header.site-header .brand-wordmark { font-size: 1.2rem; }
  header.site-header .brand svg { width: 24px; }
  header.site-header .lang-select { max-width: 82px; }
  header.site-header .menu-btn { padding-inline: 8px; }
}

/* Form state feedback remains readable without relying on colour alone. */
#status[data-state="error"] { color: #7A1532; background: #FFF0F3; border: 2px solid #7A1532; padding: 1rem; border-radius: 12px; }
#status[data-state="loading"] { color: #1B0F3A; background: #FFF6D8; border: 2px solid #1B0F3A; padding: 1rem; border-radius: 12px; }
#status[data-state="success"] { color: #164427; background: #E9FFD8; border: 2px solid #164427; padding: 1rem; border-radius: 12px; }
button[aria-busy="true"] { cursor: progress; }


/* In-flow WhatsApp contact stays clear of navigation, cards and form controls. */
.whatsapp-contact { margin-block: 18px; max-width: 36rem; }
.whatsapp-contact__link { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; max-width: 100%; box-sizing: border-box; padding: 10px 18px; border: 3px solid var(--ink); border-radius: 18px 18px 4px 18px; background: var(--lime, #C0FF72); color: var(--ink) !important; font-weight: 700; text-decoration: none; box-shadow: 4px 4px 0 var(--violet, #8C52FF); }
.whatsapp-contact__link:hover { background: var(--sf); }
.whatsapp-contact__link:focus-visible { outline: 3px solid var(--violet, #8C52FF); outline-offset: 5px; }
.whatsapp-contact small { display: block; margin-top: 12px; line-height: 1.5; overflow-wrap: anywhere; }

/* Shared detail templates: long catalogue titles must never collide or overflow. */
.detail-hero { display: flex; flex-wrap: wrap; gap: 24px; align-items: center; margin: 32px 0 40px; }
.detail-hero > .g { flex: 0 0 84px; }
.detail-hero__copy { flex: 1 1 280px; min-width: 0; }
.detail-hero__title { font-size: clamp(2rem, 4.6vw, 3.6rem); margin-top: 12px; line-height: 1.15; letter-spacing: .015em; text-shadow: none; overflow-wrap: anywhere; }
.detail-page .card { min-width: 0; overflow-wrap: anywhere; }
.detail-page .btn { max-width: 100%; white-space: normal; overflow-wrap: anywhere; text-align: center; }
.detail-page .detail-quote { width: 100%; min-width: 0; justify-content: center; gap: 8px; line-height: 1.4; }
.detail-page h4[style] { flex-wrap: wrap; }
@media (max-width: 600px) { .detail-page .card { padding: 22px !important; } .detail-hero { gap: 18px; margin-bottom: 28px; } }

#main-content .not-found-heading { text-shadow: none; line-height: 1.2; max-width: 26ch; margin-inline: auto; overflow-wrap: anywhere; }

/* Original v23 two-card styling with a seamless visual roll. */
.testimonial-carousel { margin-top: 24px; }
.testimonial-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 20px; }
.testimonial-controls[hidden] { display: none !important; }
.testimonial-controls button { min-height: 44px; }
.testimonial-controls button:focus-visible,
.testimonial-carousel .testimonial-card:focus-visible { outline: 3px solid var(--v); outline-offset: 3px; }
.testimonial-carousel.is-enhanced .testimonial-viewport { overflow: hidden; padding: 14px 8px 20px 0; }
.testimonial-carousel.is-enhanced .testimonial-grid { display: flex; gap: 1.5rem; align-items: stretch; margin: 0; direction: ltr; }
.testimonial-carousel.is-enhanced .testimonial-card { flex: 0 0 calc((100% - 1.5rem) / 2); width: calc((100% - 1.5rem) / 2); min-width: 0; box-sizing: border-box; margin: 0; transition: transform .2s ease; }
.testimonial-carousel .testimonial-card blockquote { white-space: normal; overflow-wrap: anywhere; }
.testimonial-carousel.is-enhanced .testimonial-card:hover { transform: translateY(-4px); }
.testimonial-carousel.is-manual .testimonial-viewport { overflow-x: auto; }
.testimonial-carousel.is-manual [data-testimonial-clone],
.testimonial-carousel.is-reduced [data-testimonial-clone] { display: none; }
.testimonial-carousel.is-reduced .testimonial-viewport { overflow: visible; }
.testimonial-carousel.is-reduced .testimonial-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); transform: none !important; }
.testimonial-carousel.is-reduced .testimonial-card { width: auto; max-width: 100%; transition: none; }
.testimonial-carousel.is-reduced .testimonial-card:hover { transform: none; }
.testimonial-announcement { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
@media (prefers-reduced-motion: reduce) {
 .testimonial-carousel .testimonial-card { transition: none !important; transform: none !important; }
 .testimonial-carousel [data-testimonial-clone] { display: none !important; }
}

@media (max-width: 720px) {
 .testimonial-carousel.is-enhanced .testimonial-card { flex-basis: 100%; width: 100%; }
 .testimonial-carousel.is-reduced .testimonial-grid { grid-template-columns: 1fr; }
}


/* Full-width quotes with keyboard-only pause and native touch scrolling. */
.testimonial-carousel { position: relative; padding-inline: 0; }
.testimonial-controls:not([hidden]) { display: block; height: 0; margin: 0; padding: 0; }
.testimonial-carousel.is-enhanced .testimonial-viewport { margin-inline: 0; }
.testimonial-controls [data-testimonial-toggle],
.testimonial-controls [data-testimonial-position] { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.testimonial-controls [data-testimonial-toggle]:focus { top: 0; left: 0; z-index: 3; width: auto; height: auto; padding: 10px 12px; margin: 0; overflow: visible; clip-path: none; white-space: normal; }

/* Shared saffron heading accent, including catalogue and detail pages. */
#main-content h1, #main-content h2,
html[lang="hi"] #main-content h1,
#main-content .detail-hero__title,
#main-content .not-found-heading { text-shadow: 3px 3px 0 var(--sf); }
#main-content .detail-hero__title { text-shadow: 2px 2px 0 var(--sf); }
footer.site-footer h2 { text-shadow: 3px 3px 0 var(--sf); }

/* Stable footer columns and aligned wrapping contact/navigation content. */
footer.site-footer .top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 72px); align-items: start; }
footer.site-footer .top > div { min-width: 0; }
footer.site-footer .footer-intro .lead { max-width: 38ch; line-height: 1.6; }
footer.site-footer .footer-contact { padding-top: 4px; overflow-wrap: anywhere; }
footer.site-footer .footer-contact > p { margin-bottom: 0; }
footer.site-footer .footer-contact address { line-height: 1.6; }
footer.site-footer .footer-links { display: flex; flex-wrap: wrap; gap: 12px 20px; margin-top: 20px; line-height: 1.6; }
footer.site-footer .footer-links a { display: inline-block; padding-block: 4px; }
footer.site-footer .whatsapp-contact { margin-block: 20px; }
@media (max-width: 720px) { footer.site-footer .top { grid-template-columns: 1fr; } footer.site-footer .footer-contact { padding-top: 0; } }

/* User-requested floating WhatsApp entry, separate from footer content. */
.whatsapp-contact--floating { position: fixed; right: max(18px, env(safe-area-inset-right)); bottom: max(18px, env(safe-area-inset-bottom)); z-index: 40; margin: 0; max-width: calc(100vw - 36px); }
.whatsapp-contact--floating .whatsapp-contact__link { min-height: 48px; padding: 10px 16px; }
.whatsapp-contact--floating small { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); }
html { scroll-padding-bottom: 100px; }
body:has(.whatsapp-contact--floating) footer.site-footer { padding-bottom: calc(100px + env(safe-area-inset-bottom)); }
@media (max-width: 720px) {
 .whatsapp-contact--floating { right: max(12px, env(safe-area-inset-right)); bottom: max(12px, env(safe-area-inset-bottom)); }
 .whatsapp-contact--floating .whatsapp-contact__link { padding: 8px 12px; font-size: .9rem; }
 body:has(input:focus, textarea:focus, select:focus) .whatsapp-contact--floating { visibility: hidden; }
}
@media print { .whatsapp-contact--floating { display: none; } }


/* One gentle entrance, never a repeating pulse. */
.whatsapp-contact--floating { animation: whatsapp-arrive 600ms ease-out both; }
@keyframes whatsapp-arrive { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) { .whatsapp-contact--floating { animation: none; opacity: 1; transform: none; } }

/* One short localized fact follows the selected greeting, never every tile. */
#languages .language-fact { margin-top: 16px; padding-top: 12px; border-top: 1px solid currentColor; font-size: .95rem; line-height: 1.6; min-block-size: 4.8em; overflow-wrap: anywhere; }
#languages .language-fact[hidden] { display: none; }
#languages #language-help { margin-top: 12px; }