/* Italic Inter — the one face the theme's fonts.css doesn't self-host.
   Upright 400/500/600 come from the theme; here we add only italic so the
   accent words ("Chemist2U", "your life", …) and <em> render as true Inter
   italic instead of a synthetic slant. One variable file covers all weights. */
@font-face {
  font-family: 'Inter';
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/inter-italic-var.woff2') format('woff2');
}

/* ============================================================
   Chemist2U — Homepage, BRAND GUIDE 2.0 skin
   Same layout/copy as the editorial redesign, re-skinned to the
   official C2U Brand Guide 2.0 system:
   • Inter everywhere (no serif display face)
   • Thoughtful Blue #0C344A ink & dark grounds
   • Caring Red #D92050 = actions/accent only
   • Moving Teal #4ECEC5 = secondary accent, used sparingly
   • Skin Cream #FFF0E8 warm surface; white default
   • Pill buttons, generous radii, soft blue-tinted shadows
   ============================================================ */
:root {
  /* ---- Core brand palette (Brand Guide 2.0) ---- */
  --c2u-red:        #D92050;  /* Caring Red — actions & accent */
  --c2u-red-light:  #EA5078;
  --c2u-red-deep:   #C01B47;  /* hover/press */
  --c2u-red-soft:   #FBE3E6;  /* pink tint surface */

  --c2u-navy:       #0C344A;  /* Thoughtful Blue — ink & dark surfaces */
  --c2u-navy-soft:  #15486A;
  --c2u-navy-deep:  #052A3F;

  --c2u-teal:       #4ECEC5;  /* Moving Teal — secondary accent */
  --c2u-teal-ink:   #0B6E66;  /* readable teal for type on teal tints */
  --c2u-teal-tint:  #D8F4F2;

  --c2u-cream:      #FFF0E8;  /* Skin Cream — warm surface */
  --c2u-paper:      #FFFFFF;  /* default white surface */
  --c2u-ink:        #0C344A;
  --c2u-body:       #1B2B36;
  --c2u-muted:      #5A6B78;
  --c2u-faint:      #90A0B8;  /* Infirmary Blue */
  --c2u-line:       #E6E6E6;

  /* tints reused by the section cards */
  --c2u-mint:       #D8F4F2;  /* teal tint  (was custom mint) */
  --c2u-peach:      #FBE3E6;  /* pink tint  (was custom peach) */
  --c2u-lavender:   #E1EEFF;  /* blue tint  (was custom lavender) */
  --c2u-blue-soft:  #E8F2FE;  /* pale info band */

  /* ---- Type: Inter is the single primary face ---- */
  --font-display: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --font-body:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;

  /* ---- Shadows (soft, blue-tinted) ---- */
  --shadow-card: 0 10px 30px rgba(12,52,74,.08);
  --shadow-md:   0 6px 20px rgba(12,52,74,.10);
  --shadow-lg:   0 16px 48px rgba(12,52,74,.16);
}

.c2u-root {
  font-family: var(--font-body);
  color: var(--c2u-body);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Headings: Inter, tight tracking, semibold/bold, Thoughtful Blue */
.c2u-root h1, .c2u-root h2, .c2u-root h3, .c2u-root h4, .c2u-root h5 {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--c2u-ink);
  margin: 0;
  text-wrap: balance;
}
.c2u-root h3, .c2u-root h4 { font-weight: 600; }
.c2u-root p { margin: 0; text-wrap: pretty; }

/* Heading + body type scale — host-theme override guard.
   Some host themes ship `.refreshedMedicinePage h1/h2/h3/p/li { font-size:… !important }`
   (incl. a ≥981px media block) which steamrolls our sizes: normal-importance
   inline styles lose to an external !important. We re-assert the intended scale
   with our own !important at higher specificity.

   Each rule is anchored on BOTH ancestors:
     • `#c2u-home`            — our template's <main> wrapper (1,1,0)
     • `.refreshedMedicinePage` — the host theme's own wrapper (0,2,0)
   Either alone outranks the theme's `.refreshedMedicinePage <tag>` (0,1,1).
   Listing both means it wins whether or not the #c2u-home wrapper is present in
   a given install — `.refreshedMedicinePage` is guaranteed to be an ancestor
   wherever the theme rules apply (that's how they reach our elements at all).
   Sizes are clamp()-fluid, so one rule replaces the theme's mobile+desktop pair. */
#c2u-home .c2u-hero-h1, .refreshedMedicinePage .c2u-hero-h1 { font-size: clamp(30px, 4.6vw, 64px) !important; line-height: 1.05 !important; font-weight: 600 !important; letter-spacing: -0.05em !important; }
#c2u-home .c2u-h2--xl,  .refreshedMedicinePage .c2u-h2--xl  { font-size: clamp(34px, 5vw, 72px)   !important; line-height: 1.04 !important; font-weight: 600 !important; letter-spacing: -0.03em !important; }
#c2u-home .c2u-h2,      .refreshedMedicinePage .c2u-h2      { font-size: clamp(30px, 3.2vw, 48px) !important; line-height: 1.05 !important; font-weight: 600 !important; letter-spacing: -0.03em !important; }
#c2u-home .c2u-h2--spot,.refreshedMedicinePage .c2u-h2--spot{ font-size: clamp(28px, 2.9vw, 42px) !important; line-height: 1.08 !important; font-weight: 600 !important; letter-spacing: -0.03em !important; }
#c2u-home .c2u-h3,      .refreshedMedicinePage .c2u-h3      { font-size: 26px !important; line-height: 1.12 !important; font-weight: 600 !important; letter-spacing: -0.02em !important; }
#c2u-home .tc-para,     .refreshedMedicinePage .tc-para     { font-size: clamp(20px, 2.2vw, 30px) !important; line-height: 1.25 !important; font-weight: 400 !important; }

/* Italic accent: Inter italic, a softer human aside — kept restrained */
.c2u-root em, .c2u-root i { font-style: italic; }

/* Buttons — Caring Red fill, white text, pill */
.c2u-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font: 600 15px/1 var(--font-body);
  padding: 14px 22px; border-radius: 999px; border: none;
  cursor: pointer; text-decoration: none;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
  white-space: nowrap;
}
.c2u-btn--primary { background: var(--c2u-red); color: #fff; }
.c2u-btn--primary:hover { background: var(--c2u-red-deep); }
.c2u-btn--primary:active { transform: scale(.985); }
.c2u-btn--big { padding: 17px 28px; font-size: 16px; }

/* Light outline button — secondary CTA on dark (navy) surfaces. Hover mirrors
   the primary: a gentle fill + brighter border, no jump. */
.c2u-btn--outline-light { background: transparent; color: #fff; border: 1.5px solid rgba(255,255,255,0.3); }
.c2u-btn--outline-light:hover { background: rgba(255,255,255,0.12); border-color: rgba(255,255,255,0.65); }

/* Smooth hover transitions + the icon nudges subtly right on every primary button. */
.c2u-btn { transition: background .2s ease, border-color .2s ease, color .2s ease; }
.c2u-btn svg { transition: transform .25s cubic-bezier(.2,.7,.2,1); }
.c2u-btn--primary:hover svg { transform: translateX(3px); }
@media (prefers-reduced-motion: reduce) {
  .c2u-btn svg { transition: none; }
  .c2u-btn--primary:hover svg { transform: none; }
}

/* Some host themes force `body a:where(...):hover { text-decoration: underline }`.
   That :where() carries 0 specificity, so the rule is only (0,1,2) — a plain
   `.class:hover` (0,2,0) outscores it. Keep our buttons and hero CTA tiles clean
   on hover/focus. */
.c2u-btn:hover, .c2u-btn:focus, .c2u-btn:focus-visible,
.c2u-cta:hover, .c2u-cta:focus, .c2u-cta:focus-visible { text-decoration: none; }

/* Eyebrow / kicker — small overline, Caring Red */
.c2u-kicker {
  font: 600 12px/1 var(--font-body);
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--c2u-red);
}

/* ── Hero entrance animation (CLS-safe: transform/opacity only) ──────────────
   Word masks keep their final inline box from first paint; the inner span is
   what slides. The `pre-anim` class (added before first paint by an inline head
   script) hides the animated bits until GSAP takes over.                     */
.c2u-wm {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
  padding-bottom: 0.14em;
  margin-bottom: -0.14em;
}
.c2u-wi { display: inline-block; will-change: transform; }

html.pre-anim .hero-anim .c2u-wi { transform: translateY(115%); }
html.pre-anim .hero-anim [data-anim="desc"] { opacity: 0; transform: translateY(16px); }
html.pre-anim .hero-anim .c2u-cta { opacity: 0; transform: translateY(28px); }
html.pre-anim .hero-anim [data-anim="trust"] { opacity: 0; transform: translateY(28px); }

@media (prefers-reduced-motion: reduce) {
  html.pre-anim .hero-anim .c2u-wi,
  html.pre-anim .hero-anim [data-anim="desc"],
  html.pre-anim .hero-anim [data-anim="trust"],
  html.pre-anim .hero-anim .c2u-cta { transform: none; opacity: 1; }
}

/* ── Scroll-triggered entrance for "Why people choose" (mirrors hero) ────────
   Hidden until the section's IntersectionObserver adds `.is-in`, at which point
   GSAP plays the same word-rise + fade motion. Transform/opacity only.        */
.whyc-anim:not(.is-in) .c2u-wi { transform: translateY(115%); }
.whyc-anim:not(.is-in) [data-anim="row"] { opacity: 0; transform: translateY(26px); }

@media (prefers-reduced-motion: reduce) {
  .whyc-anim .c2u-wi,
  .whyc-anim [data-anim="row"] { transform: none; opacity: 1; }
}

/* ── Generic scroll entrance (testimonials, FAQ) — same convention as "why
   people choose us": items rise + fade in a stagger when the section enters
   view. Pre-hidden until GSAP plays (or .is-in is forced by the fallback). ── */
.reveal-on-scroll:not(.is-in) [data-anim="rise"] { opacity: 0; transform: translateY(28px); }
@media (prefers-reduced-motion: reduce) {
  .reveal-on-scroll [data-anim="rise"] { opacity: 1; transform: none; }
}

/* ── Final CTA card entrance — word-rise headline (same masked motion as the
   hero / "take care" sections); body + buttons fade-up via [data-anim="rise"]
   handled by the .reveal-on-scroll rule above. ─────────────────────────────── */
.cta-anim:not(.is-in) .c2u-wi { transform: translateY(115%); }
@media (prefers-reduced-motion: reduce) {
  .cta-anim .c2u-wi { transform: none; }
}

/* ── Final-CTA mini tiles (2×2 grid of choices) ─────────────────────────────── */
.c2u-mini-cta {
  display: flex; align-items: center; gap: 18px;
  padding: 22px 26px; border-radius: 16px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.12);
  text-align: left; text-decoration: none; color: #fff;
  transition: background .2s ease, border-color .2s ease, transform .2s ease;
}
.c2u-mini-cta:hover, .c2u-mini-cta:focus-visible {
  background: rgba(255,255,255,.07);
  border-color: rgba(255,255,255,.28);
  transform: translateY(-2px);
  text-decoration: none;
}
.c2u-mini-cta__ic { flex-shrink: 0; display: inline-flex; }
.c2u-mini-cta__text { display: flex; flex-direction: column; gap: 4px; }
.c2u-mini-cta__title { font: 600 19px/1.15 var(--font-body); letter-spacing: -0.01em; color: #fff; }
.c2u-mini-cta__sub { font: 400 15px/1.25 var(--font-body); color: rgba(255,255,255,.6); }

/* ── "Take care of it" photo placeholders — plain rounded photo card. The
   data-anim="tc-photo" wrapper is what GSAP drives on entrance. ─────────────── */
.tc-photo-card {
  width: 100%; height: 100%;
  background: #E0DCD6 center / cover no-repeat;
  border-radius: 16px;
}

/* ── "Take care of it" scroll-reveal moment ──────────────────────────────────
   A tall section with a sticky-centred headline. Words + paragraphs stay hidden
   (masked / faded) until JS adds `.is-in` — triggered when the section's top
   reaches ~100px from the viewport top, i.e. the previous section is almost
   fully scrolled away. Same word-rise motion as the hero.                      */
.takecare-anim:not(.is-in) .c2u-wi { transform: translateY(115%); }
.takecare-anim:not(.is-in) [data-anim="tc"] { opacity: 0; transform: translateY(18px); }
.takecare-anim:not(.is-in) [data-anim="tc-photo"] { opacity: 0; transform: translateY(-44px); }

@media (prefers-reduced-motion: reduce) {
  .takecare-anim .c2u-wi,
  .takecare-anim [data-anim="tc"],
  .takecare-anim [data-anim="tc-photo"] { transform: none; opacity: 1; }
}

/* ── "Take care of it" layout ────────────────────────────────────────────────
   Photos live in their OWN grid tracks beside the text, so they can never
   overlap the copy regardless of viewport width: a fixed-width photo rail on
   each side, with a flexible (shrinking) text column between them.
     • ph1 → top-left      • ph2 → centre-right      • ph3 → bottom-left
   On mobile the same three items restack to two-up on top + one below
   (see the ≤767px block). Photo sizing is driven here and tuned per breakpoint;
   transforms used by the scroll reveal sit on top and don't fight the grid. */
.tc-layout {
  display: grid;
  grid-template-columns: auto minmax(0, 720px) auto;
  grid-template-rows: auto auto;
  justify-content: center;
  align-items: center;
  column-gap: clamp(28px, 5vw, 96px);
  row-gap: 40px;
  width: 100%;
}
.tc-text { grid-column: 2; grid-row: 1 / span 2; text-align: center; }
.tc-ph   { width: 184px; height: 184px; }
.tc-ph1  { grid-column: 1; grid-row: 1; justify-self: start; align-self: start; }
.tc-ph2  { grid-column: 3; grid-row: 1 / span 2; justify-self: end;   align-self: center; }
.tc-ph3  { grid-column: 1; grid-row: 2; justify-self: start; align-self: end; }

/* Desktop-only "chaos" nudges — offset via position (not transform) so they
   stack with the GSAP reveal transforms instead of overwriting them. */
@media (min-width: 981px) {
  .tc-ph1 { position: relative; left: -20px; top: -80px; }
  .tc-ph3 { position: relative; left: 20px;  top: 60px; }
}

/* ── "Why" split-section row hover ──────────────────────────────────────────
   Transforms are scoped to the row's CHILDREN (.whyc-ic / .whyc-text), never
   the [data-anim="row"] element itself — that one is driven by the GSAP
   entrance, and a competing CSS transition on its transform would smear it. */
.whyc-ic { transition: background .4s cubic-bezier(.2,.7,.2,1), transform .4s cubic-bezier(.2,.7,.2,1), box-shadow .4s ease; }
.whyc-ic svg { transition: stroke .35s ease; }
.whyc-text { transition: transform .4s cubic-bezier(.2,.7,.2,1); }
.whyc-text h3 { transition: color .3s ease; }

.whyc-row:hover .whyc-ic {
  background: var(--c2u-red) !important;
  transform: scale(1.08) rotate(-4deg);
  box-shadow: 0 12px 26px rgba(217,32,80,.30);
}
.whyc-row:hover .whyc-ic svg { stroke: #fff; }
.whyc-row:hover .whyc-ic i { color: #fff; }
.whyc-ic i { color: var(--c2u-red); font-style: normal; display: inline-flex; transition: color .35s ease; }
.whyc-ic i svg { transition: fill .35s ease; }
.whyc-row:hover .whyc-text { transform: translateX(8px); }
.whyc-row:hover .whyc-text h3 { color: var(--c2u-red); }

@media (prefers-reduced-motion: reduce) {
  .whyc-ic, .whyc-text, .whyc-text h3, .whyc-ic svg { transition: none; }
}

/* ── Reveal group — "Why people choose us" anchors, the service stack rises
   over it ────────────────────────────────────────────────────────────────────
   The why-section is sticky (top:0) inside the group, so it pins once it
   reaches the top of the viewport and stays put while you keep scrolling. The
   service stack that follows carries an OPAQUE curtain painted with the exact
   same fixed page gradient — because background-attachment:fixed is anchored to
   the viewport, the curtain aligns pixel-for-pixel with the page behind it, so
   it reads as seamless while it slides up and covers (unmasks) the pinned
   section. Pinning is confined to this group: once the group's bottom passes,
   the why-section releases.                                                    */
.reveal-group { position: relative; }
.reveal-group .whyc-anim {
  position: sticky;
  top: 0;
  z-index: 0;
}
.svc-stack-wrap {
  position: relative;
  z-index: 1;
  background: radial-gradient(125% 125% at 50% 90%, #fff 35%, #FBE3E6 100%);
  background-attachment: fixed;
}

/* ── Service spotlights — sticky "unmask" stack ─────────────────────────────
   The three service cards live inside ONE white rounded container (.svc-stack)
   that's content-width, not full-bleed. Each card is position:sticky, so as you
   scroll the next card rises and covers the one above it (the unmask effect).
   No overflow clip on the parent — that would kill sticky — so each card carries
   its own matching radius + white fill to read as a single panel.            */
.svc-stack {
  position: relative;
  /* trailing room so the LAST card can fully dock at top:88 and cover the card
     beneath it before that card releases (otherwise the previous card peeks out
     above the last one, because its bottom margin counts toward sticky release) */
  padding-bottom: 72px;
}
.svc-card {
  position: sticky;
  top: 88px;
  background: #fff;
  border-radius: 36px;
  padding: 72px;
  box-shadow: 0 2px 4px rgba(24, 39, 75, 0.04), 0 12px 28px -8px rgba(24, 39, 75, 0.10), 0 40px 80px -32px rgba(24, 39, 75, 0.12);
  margin-bottom: 32px;
}
/* last card keeps the same 32px bottom margin as the others: a sticky-stacked
   card releases by (height + bottom-margin), so equal margins stop the previous
   card slipping out above the last one before it's fully covered */
.svc-card-inner { width: 100%; }

/* per-card scroll entrance — content fades + rises in a stagger when the card
   enters view (mirrors the "why people choose us" reveal) */
.svc-anim:not(.is-in) [data-anim="sl-item"] { opacity: 0; transform: translateY(34px); }
@media (prefers-reduced-motion: reduce) {
  .svc-anim [data-anim="sl-item"] { opacity: 1; transform: none; }
}

/* Service-card photo — plain rounded photo, fills the media column. The
   GSAP-driven [data-anim="sl-item"] wrapper handles the entrance reveal. */
.svc-photo {
  width: 100%;
  height: 440px;
  border-radius: 24px;
  background: #E0DCD6 center / cover no-repeat;
}

.sl-cta { display: inline-flex; align-items: center; gap: 8px; }

@media (max-width: 980px) {
  /* Single column. Both the text and photo are inline-styled to grid-row:1, which
     overlapped them once columns collapsed — so reset every child to one column
     and let them flow into separate rows. Photos are hidden on tablet and
     re-shown below the content on mobile (see the ≤767px block).
     Sticky is kept so the card-over-card "unmask" stacking works here too. */
  .svc-card { position: sticky !important; top: 80px; padding: 32px; }
  .svc-card-inner { grid-template-columns: 1fr !important; gap: 32px !important; }
  .svc-card-inner > div { grid-column: 1 !important; grid-row: auto !important; }
  .svc-card-inner .sl-media { display: none !important; }
}

/* ── Hero CTA tiles ──────────────────────────────────────────
   Three full-width photo tiles; lead tile (--lg) larger than the
   other two. No icons — photography + hover motion carry them.   */
.c2u-hero-ctas {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-top: 76px;
}
.c2u-cta {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  /* Tile heights are authored against the default content-box (padding adds on
     top of min-height). Host themes ship a global `*{box-sizing:border-box}`
     reset that folds the padding INTO min-height, collapsing every tile by its
     vertical padding (e.g. 384→340 on mobile). Opt this element back out so the
     design height holds regardless of the theme's reset. !important guards
     against a class-scoped global reset (e.g. `.refreshedMedicinePage *`). */
  box-sizing: content-box !important;
  min-height: 340px;
  padding: 28px 30px;
  border-radius: 22px;
  overflow: hidden;
  isolation: isolate;
  text-decoration: none;
  color: #fff;
}
.c2u-cta__img {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  display: block;
  transform: scale(1.02);
  transition: transform .7s cubic-bezier(.2,.7,.2,1);
}
.c2u-cta__scrim {
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to top, rgba(5,28,42,.8) 0%, rgba(5,28,42,.38) 46%, rgba(5,28,42,.04) 100%);
  transition: opacity .45s ease;
}
.c2u-cta:hover .c2u-cta__img,
.c2u-cta:focus-visible .c2u-cta__img { transform: scale(1.09); }
.c2u-cta:hover .c2u-cta__scrim,
.c2u-cta:focus-visible .c2u-cta__scrim { opacity: .82; }

.c2u-cta__eyebrow {
  font: 600 12px/1 var(--font-body);
  letter-spacing: .14em; text-transform: uppercase;
  color: rgba(255,255,255,.85);
  display: none; /* temporarily hidden — re-enable to inline-flex to show category labels */
  align-items: center; gap: 10px;
}
.c2u-cta__eyebrow::before {
  content: ""; width: 22px; height: 2px; background: var(--c2u-red);
  display: inline-block;
  transition: width .4s cubic-bezier(.2,.7,.2,1);
}
.c2u-cta:hover .c2u-cta__eyebrow::before,
.c2u-cta:focus-visible .c2u-cta__eyebrow::before { width: 46px; }

.c2u-cta__row { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-top: auto; }
.c2u-cta__title { font: 600 26px/1.05 var(--font-body); letter-spacing: -0.02em; color: #fff; }
.c2u-cta--lg .c2u-cta__title { font-size: 40px; }
.c2u-cta__sub { font: 500 14px/1.35 var(--font-body); color: rgba(255,255,255,.8); margin-top: 8px; max-width: 30ch; }
.c2u-cta--lg .c2u-cta__sub { font-size: 16px; }

.c2u-cta__arrow {
  flex-shrink: 0;
  width: 48px; height: 48px; border-radius: 999px;
  border: 1.5px solid rgba(255,255,255,.5);
  display: flex; align-items: center; justify-content: center;
  color: #fff;
  transition: background .35s ease, border-color .35s ease, transform .45s cubic-bezier(.2,.7,.2,1);
}
.c2u-cta:hover .c2u-cta__arrow,
.c2u-cta:focus-visible .c2u-cta__arrow {
  background: var(--c2u-red);
  border-color: var(--c2u-red);
  transform: rotate(-45deg);
}

/* (Hero CTA tile responsive rules now live in the RESPONSIVE block below.) */

/* ============================================================
   RESPONSIVE
   Breakpoints: mobile ≤767px · tablet 768–980px · desktop >980px
   The layout is built mostly with React inline styles, so these
   overrides use !important to win over inline (non-important)
   declarations. Two cascading blocks:
     • max-width:980px  → tablet + mobile (the layout collapses)
     • max-width:767px  → mobile-only fine tuning (wins over the above)
   ============================================================ */

/* ── Desktop nav + dropdown ─────────────────────────────────────────────────── */
.c2u-header-bar > img { flex-shrink: 0; }   /* keep the logo from squishing */
.c2u-nav { display: flex; align-items: center; gap: 28px; flex-shrink: 0; }
.c2u-nav-item {
  font: 500 14px/1 var(--font-body); color: var(--c2u-navy);
  text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: color .18s ease;
}
.c2u-nav-item:hover { color: var(--c2u-red); }

.c2u-has-dd { position: relative; }
/* invisible bridge so the pointer can travel from label to menu without dropping */
.c2u-has-dd::after { content: ''; position: absolute; left: 0; right: 0; top: 100%; height: 16px; }
.c2u-dd {
  position: absolute; top: calc(100% + 14px); left: -14px;
  min-width: 210px; padding: 8px;
  background: #fff; border: 1px solid var(--c2u-line); border-radius: 14px;
  box-shadow: var(--shadow-md);
  display: flex; flex-direction: column;
  transform: translateY(-6px); transition: opacity .18s ease, transform .18s ease, visibility .18s ease;
}
.c2u-has-dd:hover .c2u-dd { transform: translateY(0); }
.c2u-dd a {
  font: 500 14px/1 var(--font-body); color: var(--c2u-navy);
  text-decoration: none; padding: 12px 14px; border-radius: 10px;
  white-space: nowrap; transition: background .15s ease, color .15s ease;
}
.c2u-dd a:hover { background: var(--c2u-red-soft); color: var(--c2u-red); }

/* ── Search field + account ─────────────────────────────────────────────────── */
.c2u-header-right { display: flex; align-items: center; gap: 14px; min-width: 0; flex-shrink: 1; }
.c2u-search {
  display: flex; align-items: center; gap: 8px;
  background: #F5F6F7; border: 1px solid var(--c2u-line);
  border-radius: 999px; padding: 5px 5px 5px 18px;
  width: 240px; min-width: 0; /* shrinks to absorb a tight bar; nav stays fixed */
  transition: border-color .18s ease, background .18s ease;
}
.c2u-search:focus-within { border-color: var(--c2u-red); background: #fff; }
.c2u-search input {
  flex: 1 1 auto; min-width: 0;
  border: none; background: none; outline: none; width: 100%;
  font: 500 14px/1 var(--font-body); color: var(--c2u-navy);
}
.c2u-search input::placeholder { color: var(--c2u-muted); }
.c2u-search input::-webkit-search-cancel-button { -webkit-appearance: none; }
.c2u-search-btn {
  flex-shrink: 0;
  width: 34px; height: 34px; border-radius: 999px;
  background: var(--c2u-red); border: none; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background .18s ease;
}
.c2u-search-btn:hover { background: var(--c2u-red-deep); }

.c2u-header-user {
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--c2u-navy); cursor: pointer; text-decoration: none;
  transition: color .18s ease;
}
.c2u-header-user:hover { color: var(--c2u-red); }

/* ── Mobile icon cluster (search · account · menu) — desktop-hidden ──────────── */
.c2u-header-mobile { display: none; align-items: center; gap: 4px; }
.c2u-header-mobile button,
.c2u-header-mobile a {
  width: 44px; height: 44px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: none; border: none; cursor: pointer; color: var(--c2u-navy); border-radius: 10px;
}
.c2u-header-mobile button:hover,
.c2u-header-mobile a:hover { background: rgba(12,52,74,0.06); }

/* ── Mobile search drop-down bar ────────────────────────────────────────────────
   Absolutely anchored to the bottom of the sticky bar so it floats OVER the page
   content (rather than pushing it down). */
.c2u-msearch {
  display: none; overflow: hidden; max-height: 0;
  position: absolute; top: 100%; left: 0; right: 0;
  background: #fff;
  transition: max-height .25s ease;
}
.c2u-msearch.is-open {
  max-height: 76px;
  border-top: 1px solid var(--c2u-line);
  box-shadow: 0 18px 28px -16px rgba(12, 52, 74, 0.22);
}
.c2u-msearch .c2u-search { width: auto; margin: 12px 20px; }

/* ── Mobile nav — drops down below the bar (same motion as the search field) ──
   Horizontal padding only: vertical padding/margins would show while the panel
   is collapsed, so all vertical spacing lives on inner elements and is clipped
   by max-height:0 + overflow:hidden. */
.c2u-mobile-menu {
  display: none;
  overflow: hidden;
  max-height: 0;
  position: absolute; top: 100%; left: 0; right: 0;
  padding: 0 20px;
  background: #fff;
  transition: max-height .3s ease;
}
.c2u-mobile-menu.is-open {
  max-height: min(480px, calc(100vh - 56px));
  overflow-y: auto;
  border-top: 1px solid var(--c2u-line);
  box-shadow: 0 18px 28px -16px rgba(12, 52, 74, 0.22);
}
.c2u-mobile-menu nav { display: flex; flex-direction: column; padding-top: 4px; }
.c2u-mobile-menu nav { padding-bottom: 16px; }
.c2u-mobile-menu nav > a {
  font: 600 20px/1 var(--font-body); color: var(--c2u-navy);
  text-decoration: none; padding: 17px 4px;
}
.c2u-mobile-menu__sub { display: flex; flex-direction: column; padding: 4px 0 8px 16px; }
.c2u-mobile-menu__sub a {
  font: 500 16px/1 var(--font-body); color: var(--c2u-muted);
  text-decoration: none; padding: 12px 4px;
}

/* ─────────────────────────────────────────────────────────────────────────
   TABLET + MOBILE  (≤980px)
   ───────────────────────────────────────────────────────────────────────── */
@media (max-width: 980px) {
  /* Page gradient — iOS Safari ignores background-attachment:fixed, so the
     scrolling gradient "restarts" per section. Instead paint it on a single
     viewport-fixed pseudo-element (which iOS does honour): it spans 100vh and
     stays put while scrolling. The root's own gradient is dropped, and the
     service-stack background is made transparent below so the one fixed layer
     shows through continuously with no seam. */
  .c2u-root { position: relative; z-index: 0; background: none !important; }
  .c2u-root::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: -1;
    background: radial-gradient(125% 125% at 50% 90%, #fff 35%, #FBE3E6 100%);
  }

  /* Header collapses to logo + icon cluster (search · account · menu). The full
     nav + search bar don't fit once the search field is in the bar, so they
     give way to the hamburger drawer from tablet down. */
  .c2u-nav, .c2u-header-right { display: none !important; }
  .c2u-header-mobile { display: flex !important; }
  .c2u-msearch       { display: block; }
  .c2u-mobile-menu   { display: block; }

  /* Section gutters */
  .c2u-header-bar   { padding: 12px 32px 12px !important; }
  .hero-anim        { padding: 88px 32px 72px !important; }
  .whyc-anim        { padding: 72px 32px !important; }
  .svc-stack-wrap   { padding: 0 32px 32px !important; background: transparent !important; }
  .reviews-anim     { padding: 80px 32px !important; }
  .faq-anim         { padding: 80px 32px !important; }
  .cta-section      { padding: 32px 32px 80px !important; }
  .cta-anim         { padding: 96px 40px !important; }

  /* Hero */
  .c2u-hero-h1      { white-space: normal !important; }
  .c2u-hero-desc    { width: auto !important; max-width: 640px !important; margin-bottom: 56px !important; }
  .c2u-hero-ctas    { grid-template-columns: 1fr 1fr !important; margin-top: 48px !important; }

  /* Trust band */
  .c2u-trustband    { gap: 28px 40px !important; margin-top: 56px !important; }

  /* Why-choose: single column, drop the sticky pin + heading gutter */
  .reveal-group .whyc-anim { position: static !important; }
  .whyc-grid        { grid-template-columns: 1fr !important; gap: 40px !important; }
  .whyc-points      { grid-column: auto !important; }
  .whyc-head h2     { padding-right: 0 !important; }

  /* Reviews: stack header + cards */
  .reviews-head     { flex-direction: column !important; align-items: flex-start !important; }
  .reviews-head > div:last-child { text-align: left !important; }
  .reviews-grid     { grid-template-columns: 1fr !important; }
  .reviews-feature  { padding: 40px !important; }

  /* FAQ width */
  .faq-inner        { max-width: 680px !important; width: 100% !important; }

  /* Take care: keep photos beside the text, just smaller + tighter gutter */
  .takecare-anim    { min-height: 150vh !important; }
  .tc-sticky        { padding: 0 32px !important; }
  .tc-layout        { column-gap: clamp(20px, 4vw, 56px) !important; row-gap: 28px !important; }
  .tc-ph            { width: 148px !important; height: 148px !important; }
}

/* ─────────────────────────────────────────────────────────────────────────
   MOBILE  (≤767px)
   ───────────────────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
  /* Header (collapse handled in the ≤980 block) */
  .c2u-header-bar   { padding: 10px 20px 10px !important; }

  /* Section gutters */
  .hero-anim        { padding: 64px 20px 52px !important; }
  .whyc-anim        { padding: 56px 20px !important; }
  .svc-stack-wrap   { padding: 0 16px 24px !important; }
  .reviews-anim     { padding: 64px 20px !important; }
  .faq-anim         { padding: 64px 20px !important; }
  .cta-section      { padding: 24px 16px 64px !important; }
  .cta-anim         { padding: 72px 24px !important; }
  .c2u-mini-cta-grid { grid-template-columns: 1fr !important; gap: 14px !important; }
  .c2u-mini-cta      { padding: 18px 20px !important; }

  /* Hero */
  .c2u-hero-desc    { font-size: 17px !important; margin-bottom: 44px !important; }
  .c2u-hero-ctas    { grid-template-columns: 1fr !important; gap: 14px !important; margin-top: 40px !important; }
  .c2u-cta          { min-height: 240px !important; padding: 22px 22px !important; }
  .c2u-cta__title   { font-size: 22px !important; }

  /* Trust band → stacked, no vertical rules */
  .c2u-trustband    { flex-direction: column !important; gap: 24px !important; margin-top: 44px !important; }
  .c2u-trust-div    { display: none !important; }

  /* Why-choose rows: tighter icon column */
  .whyc-row         { gap: 16px !important; }
  .whyc-row h3      { font-size: 22px !important; }
  .whyc-row p       { font-size: 16px !important; }

  /* Service spotlight — single column: content first, photo below */
  .svc-card         { padding: 20px !important; border-radius: 26px !important; }
  .svc-card-inner   { gap: 24px !important; }
  .svc-card-inner > div:not(.sl-media) { grid-row: 1 !important; }
  .svc-card-inner .sl-media { display: block !important; grid-column: 1 !important; grid-row: 2 !important; }
  .svc-photo        { height: 260px !important; }

  /* Reviews */
  .reviews-feature  { padding: 28px !important; }
  .reviews-feature blockquote { font-size: 23px !important; }

  /* Take care: stack — two photos on top, text, one photo below */
  .tc-sticky  { padding: 0 20px !important; }
  .tc-layout  {
    grid-template-columns: 1fr 1fr !important;
    grid-template-rows: auto auto auto !important;
    justify-items: center !important;
    column-gap: 16px !important;
    row-gap: 24px !important;
  }
  .tc-text h2 { font-size: clamp(46px, 13vw, 64px) !important; }
  .tc-ph      { width: 96px !important; height: 96px !important; }
  .tc-ph1     { grid-column: 1 / span 2 !important; grid-row: 1 !important; justify-self: center !important; align-self: center !important; position: relative !important; left: -32px !important; }
  .tc-text    { grid-column: 1 / span 2 !important; grid-row: 2 !important; }
  .tc-ph2     { grid-column: 1 !important; grid-row: 3 !important; justify-self: end !important;   align-self: center !important; position: relative !important; left: -12px !important; top: 12px !important; }
  .tc-ph3     { grid-column: 2 !important; grid-row: 3 !important; justify-self: start !important; align-self: center !important; position: relative !important; left: 12px !important; top: 32px !important; }
}

/* ── FAQ accordion (vanilla, was React state) — single open at a time.
   The toggle swaps plus⇄minus purely from the button's aria-expanded; JS only
   flips aria-expanded and the panel's grid-template-rows (CSS animates it). ── */
.c2u-faq-ico { flex-shrink: 0; display: inline-flex; transition: transform .25s ease; }
.c2u-faq-ico .c2u-ico-plus  { display: inline-flex; }
.c2u-faq-ico .c2u-ico-minus { display: none; }
.c2u-faq-q[aria-expanded="true"] .c2u-faq-ico { transform: rotate(180deg); }
.c2u-faq-q[aria-expanded="true"] .c2u-faq-ico .c2u-ico-plus  { display: none; }
.c2u-faq-q[aria-expanded="true"] .c2u-faq-ico .c2u-ico-minus { display: inline-flex; }