/* ============================================================
   refine.css — design refinements from the 7 Sep 2026 review
   Loaded LAST, after accessible.css.

   What this layer does:
   1. One quiet credentials row replaces three stacked trust devices
   2. Lighter colour rhythm down the homepage
   3. Red reserved for actions; eyebrow labels go grey
   4. Phone number visible in the desktop header
   5. Motion calibrated for an older audience: confirms, never performs

   Delete this file and its link tags to return to the previous layer.
   ============================================================ */

:root {
  --eyebrow: #5a5e66;          /* eyebrow labels on light grounds */
  --eyebrow-light: #c9d3ce;    /* eyebrow labels on dark / green grounds */
  --cream: #f6f3ee;
  --rule: #dcdedc;
}

/* ---------- 1. Credentials row ---------- */

/* Four facts, given room to breathe. The earlier version boxed each one
   behind a red bar, which made a rigid little table directly under the
   hero. Here the values do the work: each is short enough to sit on one
   line, hairline dividers separate them, and nothing is enclosed. */
.credentials {
  background: var(--white);
  border-bottom: 1px solid var(--rule);
}
.credentials-inner { padding: 46px 0 40px; }
.credentials-list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin: 0;
  padding: 0;
  list-style: none;
}
.credentials-list li {
  display: grid;
  align-content: start;
  gap: 7px;
  padding: 2px 34px;
}
.credentials-list li:first-child { padding-left: 0; }
.credentials-list li:last-child { padding-right: 0; }
.credentials-list li + li { border-left: 1px solid var(--rule); }
.credentials-list strong {
  font: 700 1.42rem/1.2 "Manrope", "DM Sans", sans-serif;
  letter-spacing: -.015em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.credentials-list strong b { font-weight: inherit; }
.credentials-list span {
  color: var(--slate);
  font-size: var(--fs-small);
  line-height: 1.5;
  text-wrap: pretty;
  min-height: 3em;          /* two lines reserved, so the four align */
}
.credentials-note {
  margin: 34px 0 0;
  color: var(--ink-3, #71757c);
  font-size: 1rem;
}

/* ---------- 1b. Quiet inline links ---------- */

/* These were heavy: bold red on a 2px underline, which read as a warning
   rather than an aside. Now they sit in the text colour with a hairline
   underline and only pick up the brand red on hover. */
.credentials-note a,
.text-link,
.home-scope-note a {
  font-weight: 600;
  color: inherit;
  border-bottom: 0;
  padding-bottom: 0;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .32em;
  text-decoration-color: rgba(127,127,127,.45);
  transition: color .18s ease, text-decoration-color .18s ease;
  /* Lightening these links must not shrink their tap target: inline-flex
     with a min-height keeps 44px of hit area while the underline still
     hugs the text baseline, so nothing looks boxed. */
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}
.credentials-note a { margin-left: 4px; white-space: nowrap; }
.credentials-note a:hover,
.text-link:hover,
.home-scope-note a:hover {
  color: var(--red-text);
  text-decoration-color: currentColor;
}
.text-link.dark:hover { color: var(--red-text); }

/* The trailing ↗ shrinks and lightens so it reads as a hint, not a shout. */
.text-link span[aria-hidden="true"],
.home-scope-note a span[aria-hidden="true"] {
  display: inline-block;
  margin-left: .3em;
  font-size: .82em;
  opacity: .6;
}

/* On dark and green grounds the underline needs to be lighter, and hover
   goes to white rather than to a red that would disappear. */
.home-scope-note a,
.hero-actions .text-link,
.service-panel strong {
  text-decoration-color: rgba(255,255,255,.4);
}
.home-scope-note a:hover,
.hero-actions .text-link:hover { color: #fff; text-decoration-color: #fff; }

/* ---------- 2. Colour rhythm ---------- */

/* Testimonials: dark charcoal -> warm cream. */
.testimonial-section { color: var(--ink); background: var(--cream); }
.testimonial-track { border-top-color: var(--rule); }
.testimonial-track blockquote,
.testimonial-track blockquote + blockquote,
.testimonial-track blockquote:last-child {
  border: 1px solid var(--rule);
  background: var(--white);
}
.testimonial-track blockquote > p { color: var(--ink); }
.testimonial-track footer { color: var(--slate); }
.testimonial-track footer strong { color: var(--red-text); }
.testimonial-heading .section-index { color: var(--eyebrow); }
.testimonial-heading > p:last-child { color: var(--slate); font-size: var(--fs-small); }
.testimonial-stars { color: #c98a00; }

/* Second service panel: near-black -> cream with red heading, so the
   pair reads as one light + one dark rather than two dark slabs. */
.caregiver-panel { color: var(--ink); background: var(--cream); border: 1px solid var(--rule); }
.caregiver-panel h2 { color: var(--red-text); }
.caregiver-panel > span,
.caregiver-panel > div > p:first-child { color: var(--slate); }
.caregiver-panel p { color: var(--slate); }
.caregiver-panel strong { color: var(--ink); border-bottom-color: var(--ink); }
.service-panel:hover { filter: none; }
.caregiver-panel:hover { background: #f1ede6; }
.elderly-panel:hover { background: #22423a; }

/* ---------- 3. Red for actions only ---------- */

.section-index { color: var(--eyebrow); letter-spacing: .08em; text-transform: uppercase; font-size: .98rem; }
.section-heading.inverse .section-index,
.coverage-section .section-index,
.coverage-copy .section-index,
.page-hero.green .section-index,
.page-hero.dark .section-index { color: var(--eyebrow-light); }
.contact-copy .section-index { color: rgba(255,255,255,.85); }

.hero-kicker::before { background: var(--red); }          /* the one red accent kept in the hero */
.care-need span,
.home-steps span,
.care-need > span,
.service-detail-card > span,
.feature-row > span,
.blog-card span { color: var(--slate); }
.faq-item[open] > summary { color: var(--ink); }
.faq-item[open] summary span { border-color: var(--ink); }

/* ---------- 4. Phone in the header ---------- */

.header-phone {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: var(--tap);
  padding: 0 12px;
  border-radius: 8px;
  font-weight: 700;
  font-size: 1.05rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.header-phone svg { width: 20px; height: 20px; fill: currentColor; }
.header-phone:hover { background: rgba(127,127,127,.12); }

/* The header was crowded into the middle of a 1240px container with the
   three right-hand controls jammed together. It now uses the full window
   width, so the logo sits at one edge, the actions at the other, and the
   nav has real space between its items. */
.site-header .shell { width: min(calc(100% - 72px), 1560px); }
.header-inner { grid-template-columns: 190px 1fr auto; gap: clamp(24px, 3vw, 64px); }
.desktop-nav { gap: clamp(18px, 2.1vw, 40px); }
.header-actions { gap: clamp(10px, 1.1vw, 20px); }

/* The language pill was as visually loud as the call to action. */
.language-toggle {
  border-color: rgba(127,127,127,.38);
  font-weight: 600;
}
.site-header.scrolled .language-toggle,
body:not([data-page="home"]) .language-toggle { border-color: var(--rule); }
/* Only the top-level nav items are kept on one line. This selector must
   stay a direct-child one: `.desktop-nav a` also matches the links inside
   the dropdowns, and nowrap on a grid item raises its min-content width,
   which pushed those rows straight out through the side of the panel. */
.desktop-nav > a,
.nav-group > button,
.header-cta { white-space: nowrap; }

/* The dropdown panel was a hard 300px, sized for the original 12px
   descriptions. At the accessible 17px the longest row needs ~360px,
   so the panel now sizes to its content within sensible bounds and the
   descriptions wrap rather than overflow. */
.nav-dropdown {
  width: max-content;
  min-width: 300px;
  max-width: min(380px, calc(100vw - 48px));
}
.nav-dropdown a { white-space: normal; }
.nav-dropdown strong { line-height: 1.3; }
.nav-dropdown small { line-height: 1.4; overflow-wrap: anywhere; }

/* Below 1500px the full-width header runs out of room, so the spacing
   steps down and the phone number drops to its icon. Measured, not
   guessed: at 1366 the un-stepped header overflowed by 99px. */
@media (max-width: 1500px) {
  .site-header .shell { width: min(calc(100% - 56px), 1560px); }
  .header-inner { gap: 22px; }
  .desktop-nav { gap: clamp(14px, 1.5vw, 22px); }
  .header-phone span { display: none; }
  /* Icon-only, but still a 44px target. */
  .header-phone { padding: 0 8px; min-width: 44px; justify-content: center; }
  .header-actions { gap: 10px; }
}
@media (max-width: 1240px) {
  .site-header .shell { width: min(calc(100% - 40px), 1560px); }
  .header-inner { gap: 16px; grid-template-columns: 172px 1fr auto; }
  .brand { width: 168px; }
  .brand img { width: 166px; }
  .desktop-nav { gap: 14px; font-size: 1.02rem; }
}
@media (max-width: 1020px) {
  .header-phone { display: none; }            /* the menu and sticky bar carry the number on small screens */
}

/* ---------- 5. Motion, calibrated ---------- */

/* Hero photo: no zoom. A photo that drifts is the classic "is the page
   still loading?" cue for older users. */
.hero-image { animation: none; transform: none; }

/* Hero copy: a single soft fade-up, slightly staggered, and done. */
.hero-copy > * { animation-duration: .5s; }

/* Map: remove the rotating rings; pulse only the selected pin, slower. */
.map-rings { display: none; }
.map-point.active .pulse { animation-duration: 2.6s; }

/* Scroll reveals: fade only, no vertical travel. */
.reveal-item { transform: none; transition: opacity .45s ease; }
.reveal-item.is-visible { transform: none; }

/* Hover: colour and underline, never lift or scale. */
.button:hover { transform: none; }
.blog-card,
.profile-card,
.group-proof-item { transition: border-color .2s ease; }
.blog-card:hover,
.profile-card:hover { border-color: #b9bcbe; transform: none; box-shadow: none; }

/* The floating WhatsApp button sits in the bottom-right corner, so the
   note's link is pulled in from the edge rather than left underneath it. */
.home-scope-note { align-items: center; justify-content: flex-start; gap: 18px; flex-wrap: wrap; }
.home-scope-note > span { flex: 1 1 auto; }
.home-scope-note a { margin-right: 96px; }

/* ---------- 5b. Support cards ---------- */

/* These were six white boxes with a small red numeral floating above a
   54px gap — the gap was reserved for an icon that was never drawn, and
   the numbering implied a sequence that does not exist. Each card now
   carries a line icon for its duty, and the numbering is gone. */
.care-need {
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding: 32px 30px 34px;
  border-radius: 20px;
  transition: border-color .22s ease, box-shadow .22s ease, transform .22s ease;
}
.care-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  margin-bottom: 24px;
  border-radius: 15px;
  background: #e3ece7;
  color: #22483b;
  transition: background .22s ease, color .22s ease, transform .22s ease;
}
.care-icon svg {
  width: 27px;
  height: 27px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.care-need h3 { margin: 0 0 10px; }
.care-need p { margin: 0; font-size: 1.03rem; }

/* A small, user-initiated response — enough to feel alive, far short of
   the 5px jump and heavy shadow the cards had before. */
.care-need:hover {
  transform: translateY(-3px);
  border-color: #c2c6c3;
  box-shadow: 0 10px 26px rgba(41,75,62,.09);
}
.care-need:hover .care-icon {
  background: var(--green);
  color: #fff;
  transform: scale(1.04);
}

/* The cards arrive in sequence as the row scrolls in — the delay is set
   per card by script.js. A short rise reads as arrival; the rest of the
   page still fades only. */
.care-need.reveal-item {
  transform: translateY(14px);
  transition: opacity .5s ease, transform .5s cubic-bezier(.22,.7,.24,1);
  transition-delay: var(--reveal-delay, 0ms);
}
.care-need.reveal-item.is-visible { transform: translateY(0); }

/* FAQ: the answer height is animated by script.js (details elements
   can't transition height in CSS alone). The marker still rotates. */
.faq-answer { will-change: height; }

/* Count-up figures hold their final width so nothing reflows. */
[data-count] { display: inline-block; min-width: 3.2ch; text-align: left; }

/* ---------- 6. Responsive ---------- */

@media (max-width: 1180px) {
  .site-header .shell { width: min(calc(100% - 48px), var(--max)); }
}
@media (max-width: 1020px) {
  .credentials-inner { padding: 38px 0 34px; }
  .credentials-list { grid-template-columns: repeat(2, 1fr); row-gap: 30px; }
  .credentials-list li:nth-child(odd) { padding-left: 0; }
  .credentials-list li:nth-child(3) { border-left: 0; }
}
@media (max-width: 760px) {
  .credentials-inner { padding: 30px 0 28px; }
  .credentials-list { grid-template-columns: 1fr; row-gap: 0; }
  .credentials-list li { padding: 18px 0; border-left: 0 !important; }
  .credentials-list li + li { border-top: 1px solid var(--rule); }
  .credentials-list strong { font-size: 1.3rem; }
  .credentials-note { margin-top: 22px; }
  .credentials-note a { display: inline-block; margin: 8px 0 0; white-space: normal; }
  .care-need { padding: 26px 24px 28px; }
  .care-icon { width: 48px; height: 48px; margin-bottom: 18px; }
  .care-icon svg { width: 24px; height: 24px; }
  .caregiver-panel { border-left: 0; border-right: 0; }
}

/* ---------- 7. Reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  .hero-copy > * { animation: none; opacity: 1; }
  .reveal-item { transition: none; opacity: 1; }
  .care-need.reveal-item { transform: none; transition: none; }
  .care-need:hover { transform: none; box-shadow: none; }
  .care-need:hover .care-icon { transform: none; }
  .map-point.active .pulse { animation: none; }
}

/* ============================================================
   8. Photography — added 8 Sep 2026
   All images ship with intrinsic width/height so the layout
   never jumps while they load, and everything below the fold
   is lazy.
   ============================================================ */

/* ---------- 8a. About: consultation portrait ---------- */

/* The story column was sized for a decorative letterform, which needed
   little room. A photograph needs presence, so the split moves closer
   to even. */
.about-layout { grid-template-columns: .95fr 1.35fr; gap: clamp(40px, 5vw, 78px); }

.about-figure {
  position: sticky;
  top: 118px;
  margin: 0;
  border-radius: 20px;
  overflow: hidden;
  background: var(--cream);
}
.about-figure img { width: 100%; height: auto; display: block; }

/* ---------- 8b. Full-bleed banner bands ---------- */

/* Banners keep their real proportions instead of being forced into a
   fixed pixel height. A 5:2 photograph squeezed into 420px on a 2000px
   monitor loses more than half its height, which is what cut the heads
   off the subjects. Sizing by aspect-ratio means the crop is the same at
   every width — which is to say, none. */
/* Nothing here is cropped. Every banner shows its photograph at the
   ratio it was shot at, and the size is controlled by capping the
   WIDTH — cropping to force a height is what cut people's heads off.
   The radius and clipping sit on the image, not on the figure, so the
   rounded corners never trim the caption underneath. */
.page-banner {
  width: min(calc(100% - 48px), var(--max));
  margin: clamp(40px, 4.5vw, 64px) auto 0;
}
.page-banner > img {
  width: 100%;
  height: auto;
  aspect-ratio: 5 / 2;      /* the source ratio exactly — no crop */
  border-radius: 22px;
  display: block;
}

/* The narrow variant carries a caption and sits between sections. Its
   photographs are 3:2, so the width is capped to keep the natural
   height in proportion with the page. */
.page-banner.narrow {
  width: min(calc(100% - 48px), 900px);
  margin: clamp(56px, 7vw, 96px) auto clamp(48px, 6vw, 82px);
}
.page-banner.narrow > img { aspect-ratio: 3 / 2; }
.page-banner figcaption {
  margin-top: 14px;
  color: var(--slate);
  font-size: var(--fs-small);
  line-height: 1.5;
}

/* ---------- 8c. Elderly care: three-up support gallery ---------- */

.support-gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-top: clamp(44px, 5vw, 68px);
}
.support-gallery figure { margin: 0; }
.support-gallery img {
  width: 100%;
  /* height:auto is required, not decorative: the intrinsic height=""
     attribute is a presentational hint that otherwise wins over
     aspect-ratio, and the images render at full pixel height. */
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  display: block;
  border-radius: 18px;
}
.support-gallery figcaption {
  margin-top: 13px;
  color: var(--slate);
  font-size: var(--fs-small);
  font-weight: 600;
}

/* ---------- 8d. Article thumbnails ---------- */

/* The cards were flex with space-between, which would have pushed a
   raw <img> around. The image is pinned to the top of the card and
   the text keeps the remaining space. */
.blog-card { padding: 0; overflow: hidden; }
.blog-thumb {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  display: block;
}
.blog-card > div { padding: 24px 26px 0; }
.blog-card > strong { padding: 0 26px 26px; }
.blog-card h2 { margin: 14px 0 10px; font-size: 1.42rem; }
.blog-card:hover .blog-thumb { filter: brightness(.97); }
.blog-thumb { transition: filter .22s ease; }

/* ---------- 8e. Responsive ---------- */

@media (max-width: 1020px) {
  .about-figure { position: static; max-width: 460px; }
  .support-gallery { grid-template-columns: 1fr 1fr; }
  .support-gallery figure:last-child { grid-column: 1 / -1; }
  .support-gallery figure:last-child img { aspect-ratio: 21 / 9; }
}
@media (max-width: 760px) {
  /* A 5:2 band is only ~150px tall on a phone — too slight to register.
     These crop to a portrait-friendlier ratio, held off-centre so both
     people stay in frame. */
  .page-banner { width: calc(100% - 32px); margin-top: 34px; }
  .page-banner > img { border-radius: 14px; }
  .page-banner.narrow { width: calc(100% - 32px); margin: 46px auto 40px; }
  .support-gallery { grid-template-columns: 1fr; gap: 26px; }
  .support-gallery figure:last-child img { aspect-ratio: 3 / 2; }
  .blog-card > div { padding: 20px 22px 0; }
  .blog-card > strong { padding: 0 22px 22px; }
}

/* ---------- 8f. Reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  .blog-thumb { transition: none; }
  .blog-card:hover .blog-thumb { filter: none; }
}

/* ============================================================
   9. Homepage sections added 8 Sep 2026
   Promise · warranty · biodata preview · scrolling testimonials
   · care guides
   ============================================================ */

/* ---------- 9a. Our promise ---------- */

.promise-section { background: var(--white); }
.promise-heading { max-width: 720px; }
.promise-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
  margin: clamp(40px, 4.5vw, 60px) 0 0;
  padding: 0;
  list-style: none;
  counter-reset: promise;
}
.promise-list li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 22px;
  align-items: start;
  padding: 30px 30px 32px;
  border: 1px solid var(--rule);
  border-radius: 20px;
  background: var(--cream);
  transition: border-color .22s ease, background .22s ease;
}
.promise-list li:hover { border-color: #c2c6c3; background: #f2eee7; }
.promise-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  border-radius: 15px;
  background: var(--white);
  color: #22483b;
  border: 1px solid var(--rule);
}
.promise-icon svg {
  width: 27px; height: 27px;
  fill: none; stroke: currentColor;
  stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
}
.promise-list h3 { margin: 4px 0 8px; font-size: 1.3rem; }
.promise-list p { margin: 0; color: var(--slate); }

/* Each promise arrives just after the one before it. */
.promise-list li.reveal-item {
  transform: translateY(14px);
  transition: opacity .5s ease, transform .5s cubic-bezier(.22,.7,.24,1);
  transition-delay: var(--reveal-delay, 0ms);
}
.promise-list li.reveal-item.is-visible { transform: translateY(0); }

/* ---------- 9b. Warranty band ---------- */

.warranty-band {
  color: #fff;
  background: var(--green);
  padding: clamp(56px, 6.5vw, 88px) 0;
  /* The service panels above are rounded cards with no bottom margin, so
     without this the green band butts straight into their corners. */
  margin-top: clamp(56px, 6vw, 92px);
}
/* `auto 1fr` stretched the second column across the full shell while the
   copy stayed capped at 640px, leaving ~330px of dead space on the right
   and pushing the whole block off-centre. Sizing the text column to its
   real width and centring the pair fixes it. */
.warranty-inner {
  display: grid;
  grid-template-columns: auto minmax(0, 640px);
  justify-content: center;
  gap: clamp(34px, 5vw, 76px);
  align-items: center;
}
.warranty-mark {
  display: grid;
  justify-items: center;
  align-content: center;
  width: clamp(150px, 15vw, 196px);
  aspect-ratio: 1;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,.34);
  background: rgba(255,255,255,.06);
}
.warranty-mark strong {
  font: 800 clamp(3.6rem, 5.4vw, 5rem)/1 "Manrope", sans-serif;
  letter-spacing: -.04em;
  font-variant-numeric: tabular-nums;
}
.warranty-mark strong b { font-weight: inherit; }
.warranty-mark span {
  margin-top: 4px;
  font-size: var(--fs-small);
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255,255,255,.78);
}
.warranty-copy { max-width: 640px; }
.warranty-band .section-index { color: #a9cbbc; }
.warranty-copy h2 { margin: 0 0 16px; font-size: clamp(2rem, 3.4vw, 3rem); line-height: 1.15; }
.warranty-copy > p { margin: 0 0 22px; color: rgba(255,255,255,.92); }
.warranty-points { margin: 0 0 28px; padding: 0; list-style: none; display: grid; gap: 11px; }
.warranty-points li {
  position: relative;
  padding-left: 32px;
  color: rgba(255,255,255,.92);
  font-size: var(--fs-small);
}
.warranty-points li::before {
  content: "";
  position: absolute;
  left: 4px; top: .55em;
  width: 11px; height: 6px;
  border-left: 2px solid #9fd3b8;
  border-bottom: 2px solid #9fd3b8;
  transform: rotate(-45deg);
}
.light-button { color: var(--green); background: #fff; }
.light-button:hover { background: #eef3f0; }

/* ---------- 9c. Biodata preview ---------- */

.biodata-preview { background: var(--cream); }
.preview-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-top: clamp(34px, 4vw, 50px);
}
.preview-card {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 20px;
  padding: 26px 26px 28px;
  border: 1px solid var(--rule);
  border-radius: 20px;
  background: var(--white);
  transition: border-color .22s ease, box-shadow .22s ease, transform .22s ease;
}
.preview-card:hover {
  transform: translateY(-3px);
  border-color: #c2c6c3;
  box-shadow: 0 10px 26px rgba(41,75,62,.09);
}
.preview-avatar {
  display: grid;
  place-items: center;
  width: 58px; height: 58px;
  border-radius: 50%;
  background: #e3ece7;
  color: #22483b;
  font: 700 1.12rem/1 "Manrope", sans-serif;
  letter-spacing: .04em;
}
.preview-top {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  color: var(--slate);
  font-size: var(--fs-small);
  font-variant-numeric: tabular-nums;
}
.preview-card h3 { margin: 8px 0 8px; font-size: 1.24rem; }
.preview-card p { margin: 0 0 16px; color: var(--slate); font-size: var(--fs-small); }
.preview-tags { display: flex; flex-wrap: wrap; gap: 7px; margin: 0; padding: 0; list-style: none; }
.preview-tags li {
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--cream);
  color: var(--slate);
  font-size: .96rem;
}
.preview-note { margin: 26px 0 0; color: var(--slate); font-size: var(--fs-small); }

/* ---------- 9d. Scrolling testimonials ---------- */

.marquee { margin-top: clamp(38px, 4vw, 56px); }

/* Three cards at a time inside the page container, rather than a
   full-bleed band of eight. The card width is derived from the same
   width formula as .shell, so exactly --cards fit with the gaps
   between them and the next one is cut cleanly at the edge. */
.marquee {
  --mq-gap: 18px;
  --mq-cards: 3;
  --mq-width: min(calc(100vw - 48px), var(--max));
  --mq-card: calc((var(--mq-width) - (var(--mq-cards) - 1) * var(--mq-gap)) / var(--mq-cards));
}

/* The viewport is the flex row: the original track and its clone sit side
   by side inside it. Both are translated by exactly one track width, so
   when the cycle restarts the clone is sitting where the original was and
   the loop is seamless. Block-level tracks would simply stack. */
.marquee-viewport {
  overflow: hidden;
  display: flex;
  width: var(--mq-width);
  margin-inline: auto;
  /* Softens the cut at both edges so the clipped cards read as "more to
     come" rather than as a rendering error. */
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 3.5%, #000 96.5%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 3.5%, #000 96.5%, transparent 100%);
}
.marquee-track {
  flex: 0 0 auto;
  display: flex;
  gap: var(--mq-gap);
  padding-right: var(--mq-gap);   /* matches the gap, so the join is even */
  will-change: transform;
}
.marquee.is-running .marquee-track { animation: marquee-scroll 70s linear infinite; }
.marquee.is-paused .marquee-track,
.marquee.is-hovered .marquee-track { animation-play-state: paused; }
.marquee.is-static .marquee-viewport { display: block; -webkit-mask-image: none; mask-image: none; }
.marquee.is-static .marquee-track { flex-wrap: wrap; justify-content: center; padding: 0; }
.marquee.is-static blockquote { flex-basis: calc((var(--mq-width) - 2 * var(--mq-gap)) / 3); }

@keyframes marquee-scroll {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-100%, 0, 0); }
}

/* The heading was a three-column grid built for the old side-by-side
   layout, which left the title floating mid-row. */
.testimonial-heading { display: block; max-width: 760px; }
.testimonial-heading h2 { margin: 0 0 14px; }
.testimonial-heading > p:last-child { margin: 0; }

/* The blockquotes come from the original three-column grid, so their
   layout rules are reset for a horizontal track. */
.marquee blockquote {
  flex: 0 0 var(--mq-card);
  margin: 0;
  padding: 30px 30px 26px;
  border: 1px solid var(--rule);
  border-radius: 20px;
  background: var(--white);
}
.marquee blockquote > p { min-height: 0; margin: 0; font-size: 1.14rem; line-height: 1.6; }
.marquee blockquote footer { display: grid; gap: 3px; margin-top: 20px; }
.marquee blockquote footer strong { color: var(--red-text); font-size: var(--fs-small); }
.marquee blockquote footer span { color: var(--slate); font-size: var(--fs-small); }
.marquee .testimonial-stars { margin-bottom: 16px; color: #c98a00; }

/* Left, so it never crowds the fixed WhatsApp button. */
.marquee-controls { display: flex; justify-content: flex-start; margin-top: 22px; }
.marquee-toggle {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: var(--tap);
  padding: 0 18px;
  border: 1px solid var(--rule-2, #c6c9c6);
  border-radius: 999px;
  background: var(--white);
  color: var(--ink);
  font: 600 var(--fs-small)/1 "DM Sans", sans-serif;
  cursor: pointer;
}
.marquee-toggle:hover { border-color: var(--slate); }
.marquee-icon {
  width: 12px; height: 13px;
  border-left: 4px solid currentColor;
  border-right: 4px solid currentColor;
}
.marquee-toggle[aria-pressed="true"] .marquee-icon {
  width: 0; height: 0;
  border: 7px solid transparent;
  border-left: 11px solid currentColor;
  border-right: 0;
}

/* ---------- 9e. Care guides on the homepage ---------- */

.home-articles { background: var(--white); }
.article-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: clamp(34px, 4vw, 50px);
}
.article-card {
  display: block;
  border: 1px solid var(--rule);
  border-radius: 20px;
  overflow: hidden;
  background: var(--white);
  transition: border-color .22s ease, box-shadow .22s ease, transform .22s ease;
}
.article-card img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  display: block;
  transition: filter .22s ease;
}
.article-card > div { padding: 22px 24px 26px; }
.article-card span {
  color: var(--slate);
  font-size: var(--fs-small);
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.article-card h3 { margin: 12px 0 10px; font-size: 1.28rem; line-height: 1.3; }
.article-card p { margin: 0; color: var(--slate); font-size: var(--fs-small); }
.article-card:hover {
  transform: translateY(-3px);
  border-color: #c2c6c3;
  box-shadow: 0 10px 26px rgba(41,75,62,.09);
}
.article-card:hover img { filter: brightness(.97); }

/* ---------- 9f. Responsive ---------- */

@media (max-width: 1020px) {
  .marquee { --mq-cards: 2; }
  .promise-list { grid-template-columns: 1fr; }
  .preview-grid, .article-grid { grid-template-columns: 1fr 1fr; }
  .article-grid > :last-child { grid-column: 1 / -1; }
  .warranty-inner {
    grid-template-columns: 1fr;
    justify-content: stretch;
    justify-items: start;
    gap: 34px;
  }
}
@media (max-width: 760px) {
  .promise-list li { grid-template-columns: 1fr; gap: 16px; padding: 24px 22px 26px; }
  .promise-icon { width: 48px; height: 48px; }
  .preview-grid, .article-grid { grid-template-columns: 1fr; }
  .article-grid > :last-child { grid-column: auto; }
  .preview-card { grid-template-columns: 1fr; gap: 16px; }
  .marquee { --mq-gap: 14px; --mq-cards: 1; --mq-width: calc(100vw - 32px); }
  .marquee blockquote { padding: 24px 22px; }
  .marquee-controls { justify-content: center; }
  .warranty-mark { width: 132px; }
}

/* ---------- 9g. Reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  .marquee.is-running .marquee-track { animation: none; }
  .promise-list li.reveal-item { transform: none; transition: none; }
  .preview-card:hover, .article-card:hover { transform: none; box-shadow: none; }
  .article-card:hover img { filter: none; }
}

/* ============================================================
   10. Contact page — coverage map and office location
   ============================================================ */

/* The pin positions and label rules were written as
   body[data-page="home"] …, so the same SVG on any other page fell back
   to its raw coordinates. Scoping to .map-card instead means the
   component works wherever it is used. */
.map-card .map-point text { opacity: 0; transition: opacity .2s ease; }
.map-card .map-point.active text,
.map-card .map-point[data-area="Penang"] text,
.map-card .map-point[data-area="Ipoh"] text,
.map-card .map-point[data-area="Johor Bahru"] text,
.map-card .map-point[data-area="Sabah / Sarawak"] text { opacity: 1; }
.map-card .map-point[data-area="Penang"]          { transform: translate(96px,185px); }
.map-card .map-point[data-area="Ipoh"]            { transform: translate(120px,229px); }
.map-card .map-point[data-area="Klang"]           { transform: translate(131px,315px); }
.map-card .map-point[data-area="Petaling Jaya"]   { transform: translate(136px,311px); }
.map-card .map-point[data-area="Kuala Lumpur"]    { transform: translate(139px,308px); }
.map-card .map-point[data-area="Puchong"]         { transform: translate(136px,319px); }
.map-card .map-point[data-area="Cheras"]          { transform: translate(141px,316px); }
.map-card .map-point[data-area="Seremban"]        { transform: translate(146px,332px); }
.map-card .map-point[data-area="Melaka"]          { transform: translate(156px,362px); }
.map-card .map-point[data-area="Johor Bahru"]     { transform: translate(202px,401px); }
.map-card .map-point[data-area="Sabah / Sarawak"] { transform: translate(520px,320px); }

/* ---------- Find us ---------- */

.find-us { background: var(--white); }
.find-us-layout {
  display: grid;
  grid-template-columns: minmax(0, 380px) minmax(0, 1fr);
  gap: clamp(30px, 4vw, 56px);
  align-items: start;
  margin-top: clamp(34px, 4vw, 48px);
}
.find-us-details h3 {
  margin: 0 0 12px;
  font-size: 1.28rem;
  line-height: 1.3;
}
.find-us-details address {
  margin: 0 0 26px;
  color: var(--slate);
  font-style: normal;
  line-height: 1.65;
}
.find-us-contact { margin: 0 0 28px; display: grid; gap: 14px; }
.find-us-contact > div {
  display: grid;
  grid-template-columns: 84px 1fr;
  gap: 14px;
  align-items: baseline;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--rule);
}
.find-us-contact > div:last-child { border-bottom: 0; padding-bottom: 0; }
.find-us-contact dt {
  color: var(--slate);
  font-size: var(--fs-small);
  font-weight: 700;
}
.find-us-contact dd {
  margin: 0;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}
.find-us-contact dd a {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .28em;
  text-decoration-color: rgba(127,127,127,.45);
}
.find-us-contact dd a:hover { color: var(--red-text); text-decoration-color: currentColor; }

.find-us-map { display: grid; gap: 12px; }
.find-us-map iframe {
  width: 100%;
  aspect-ratio: 16 / 10;
  min-height: 340px;
  border: 1px solid var(--rule);
  border-radius: 20px;
  display: block;
  /* Google's embed renders on a light ground; the frame keeps it from
     floating on the page background. */
  background: var(--cream);
}
.find-us-fallback { margin: 0; color: var(--slate); font-size: var(--fs-small); }
.find-us-fallback a { text-decoration: underline; text-underline-offset: .25em; }

@media (max-width: 900px) {
  .find-us-layout { grid-template-columns: 1fr; }
  .find-us-map iframe { min-height: 300px; aspect-ratio: 4 / 3; }
}
@media (max-width: 760px) {
  .find-us-contact > div { grid-template-columns: 1fr; gap: 4px; }
  .find-us-details .button { width: 100%; }
}

/* Phones: the 1240px block above sizes the logo for tablets; this overrides it. */
@media (max-width: 760px) {
  .header-inner { grid-template-columns: 100px 1fr auto; }
  .brand { width: 100px; height: auto; }
  .brand img { width: 96px; }
}