/* =============================================================
   GI Insured — home page (Takaful design)
   -------------------------------------------------------------
   Only the three sections the mockup introduces that no existing
   component covers:

     .situations   Real Life Situations — photo scenario carousel
     .garages      Our Network Garages — logo carousel
     .split-panels FAQ beside testimonials

   Everything else on the page reuses components already built for
   the Commercial plan page (assets/plan.css) and the approved
   design (site.css): the split hero, trust strip, six tiles, the
   covered / not-covered panels, the five-step flow, the wide CTA
   and the assurance bar. Those are not restyled here.

   Loads after plan.css on the front page only.
   ============================================================= */

/* ---------- Hero crest over the car ---------------------------
   The design overlaps the protection crest on the vehicle's rear
   quarter. Only .p-hero__media--crested is affected, which only
   the home page sets, so the About / Contact / plan heroes keep
   the crest-instead-of-image behaviour they were built with. */

/* pages.css gives hero images a radius and drop shadow, which suits the
   photographs on About and Contact. The vehicle here is a cut-out that the
   design floats directly on the backdrop, so the card treatment comes off —
   on the home page only. */
.home .p-hero__media img {
  border-radius: 0;
  box-shadow: none;
  object-fit: contain;
}

/* Comprehensive plan topbar: lift the utility bar from the near-black brand
   green (--primary) to the brighter accent green so it doesn't read as black.
   Scoped to the comprehensive page only, via its body class. */
.gi-comprehensive .topbar { background: var(--accent); }

/* Comprehensive plan hero: a composed scene (car on a city road) that runs
   full-bleed to the right edge, fills the hero top-to-bottom and fades into the
   copy on the left — the same banner treatment as the About/Contact heroes.
   Scoped to the comprehensive page via its body class. */
.gi-comprehensive .p-hero__media img {
  border-radius: 0;
  box-shadow: none;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 26%, #000 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 26%, #000 100%);
}

@media (min-width: 768px) {
  /* The scene sets the height; the copy is centred against it, so the banner
     has no empty bands above or below. */
  .gi-comprehensive .p-hero__inner {
    padding-block: 0;
    align-items: stretch;
  }

  .gi-comprehensive .p-hero__copy {
    align-self: center;
    padding-block: 2.75rem;
  }

  .gi-comprehensive .p-hero__media {
    align-self: stretch;
    margin-right: calc(-1 * (var(--pad-x) + (100vw - var(--maxw)) / 2));
  }

  .gi-comprehensive .p-hero__media img {
    height: 100%;
    min-height: 100%;
    object-fit: cover;
    object-position: center;
  }
}

/* Comprehensive trust strip: a slim, compact bar rather than the tall card the
   Commercial page uses — smaller icons, tighter padding and centred items, with
   the hairline dividers the base rule already draws between them. */
.gi-comprehensive .trust-strip {
  gap: .85rem;
  padding: 1rem 1.25rem;
}

.gi-comprehensive .trust-strip li {
  align-items: center;
  gap: .6rem;
}

.gi-comprehensive .trust-strip .ico {
  width: 2.1rem;
  height: 2.1rem;
}

.gi-comprehensive .trust-strip h3 { font-size: .8125rem; margin-bottom: .1rem; }
.gi-comprehensive .trust-strip p { font-size: .6875rem; }

@media (min-width: 992px) {
  .gi-comprehensive .trust-strip { padding: 1rem 1.5rem; }
}

/* Show the trust strip as its own card AFTER the hero, instead of the Commercial
   page's treatment that lifts it up to overlap the hero bottom. */
.gi-comprehensive .section--overlap {
  margin-top: 0;
  padding-block: 1.25rem 2.5rem;
}

/* "What's covered" hub: this is car insurance, so the centre is the car itself,
   not the Commercial truck-shield. The connecting ring (.spokes__hub::before)
   stays and centres on it. */
@media (min-width: 768px) {
  .gi-comprehensive .spokes__hub { width: auto; height: auto; }
  .gi-comprehensive .spokes__car {
    position: relative;
    display: block;
    width: 11rem;
    height: auto;
    filter: drop-shadow(0 12px 22px rgba(11, 78, 59, .16));
  }
}

/* "What's not covered": each item is a soft rose card with a filled red X
   centred on top and centred copy — not the Commercial page's left-aligned
   rows. Three across on desktop; the two-column centre divider is dropped. */
.gi-comprehensive .exclusions::before { display: none; }

.gi-comprehensive .exclusion {
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: .55rem;
  padding: 1.4rem 1rem;
  border: 1px solid #f4d9d5;
  border-radius: var(--r);
  background: #fdf4f3;
}

.gi-comprehensive .exclusion__mark {
  background: #e0453a;
  border-color: #e0453a;
  color: #fff;
}

@media (min-width: 992px) {
  .gi-comprehensive .exclusions { grid-template-columns: repeat(3, 1fr); }
}

/* Dark contact bar under the CTA — serving area, phone, email and hours, the
   same details as the header top bar. */
.plan-contact-bar {
  background: #062a20;
  color: rgba(255, 255, 255, .82);
  font-size: .8125rem;
}

.plan-contact-bar__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: .6rem 2rem;
  padding-block: .85rem;
  text-align: center;
}

.plan-contact-bar span,
.plan-contact-bar a {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  color: rgba(255, 255, 255, .82);
}

.plan-contact-bar a:hover { color: #fff; }
.plan-contact-bar .ico { width: 1.05rem; height: 1.05rem; flex: none; color: #4ea982; }

@media (min-width: 768px) {
  .plan-contact-bar__inner { justify-content: space-between; }
}

.p-hero__media--crested { position: relative; }

/* The crest sits over the vehicle's REAR quarter, low and to the right,
   at roughly half the car's height — not across its middle. */
.p-hero__media--crested .crest,
.p-hero__media--crested .crest-img {
  position: absolute;
  /* In the mockup the crest is a major element, not a badge: it is about
     a third of the vehicle's width, straddles the rear door and wheel arch
     rather than the bonnet, and its point drops below the car's sill. */
  /* The crest is a tall shield — its point sits just above the car's sill and
     its top reaches the window line, so it reads as protecting the vehicle
     rather than as a badge stuck on the wheel arch.
     assets/photos/takaful-shield.png is trimmed to its artwork, so this width
     is the artwork's width; the untrimmed original kept 26% transparent margin
     and no percentage here could be reasoned about. */
  /* Measured off the mockup: the crest is a quarter of the car's width, its
     right edge sits about 8% of the car's width in from the tail, and its
     point clears the tyre rather than dropping below it. */
  right: 7%;
  bottom: 9%;
  width: min(23%, 9.6rem);
  margin: 0;
}

/* The supplied crest is a cut-out PNG, so it takes no card treatment. */
.home .p-hero__media .crest-img {
  height: auto;
  border-radius: 0;
  box-shadow: none;
  object-fit: contain;
}

/* Below 768px the hero stacks and the car is already small; a
   crest on top of it would cover the vehicle rather than sit
   beside it, so it returns to the normal flow underneath. */
@media (max-width: 767px) {
  .p-hero__media--crested .crest,
  .p-hero__media--crested .crest-img {
    position: static;
    display: block;
    width: min(60%, 10rem);
    margin: -2.5rem auto 0;
  }
}

/* ---------- Coverage panel headings ---------------------------
   The Commercial design puts these in a green ribbon tab; the
   Takaful design uses a plain centred heading. Scoped to .home so
   the Commercial page keeps its ribbon. */

.home .cover-panel__tab {
  position: static;
  display: block;
  padding: 0;
  margin: 0 0 1.1rem;
  background: none;
  border-radius: 0;
  color: var(--dark);
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-align: center;
  text-transform: uppercase;
  box-shadow: none;
  /* plan.css pins this tab as an absolute pill with left:50% and a
     -50% translate. Dropping the transform without also clearing the
     offset left the heading pushed half a panel to the right, where the
     neighbouring panel painted over its tail and "What's Covered"
     rendered as "What's Cover". Clear both, and the trapezoid clip that
     shaped the pill. */
  top: auto;
  left: auto;
  transform: none;
  clip-path: none;
}

/* ---------- Section headings ----------------------------------
   The plan pages rule a hairline either side of the heading. This
   design sets them as plain centred capitals with no rules. */

.home .rule-heading { display: block; text-align: center; }
.home .rule-heading::before,
.home .rule-heading::after { content: none; }

.home .rule-heading > span {
  color: var(--dark);
  font-size: clamp(.9375rem, 1.9vw, 1.285rem);
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
}

.home .split-panel__h { color: var(--dark); letter-spacing: .05em; }

/* ---------- Hero ----------------------------------------------
   The design runs the three assurances along one line, sets the
   second heading line larger than the first, and lets the vehicle
   run out past the column. */

/* All three assurances sit on ONE line in the mockup. Wrapping "Peace of Mind"
   onto a second row pushes the buttons down and breaks the hero's rhythm, so
   the row is explicitly not allowed to wrap above the stacking breakpoint. */
.home .p-hero__ticks {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1.6rem;
}

.home .p-hero__ticks li { margin: 0; }

@media (min-width: 992px) {
  .home .p-hero__ticks { flex-wrap: nowrap; }
  .home .p-hero__ticks li { white-space: nowrap; }
}

/* The mockup's heading is the largest type on the site — "Car Insurance"
   runs to about 38% of the page width. The inherited inner-page scale set it
   roughly a quarter too small. */
.home .p-hero h1 {
  line-height: 1.02;
  /* Sized so "Car Insurance" fills the copy column on one line, as drawn —
     it is one word away from wrapping in the mockup too. */
  font-size: clamp(2.05rem, 4.35vw, 3.6rem);
}

/* "Takaful" is the quieter first line; "Car Insurance" carries the
   weight, so the accent span steps up rather than just recolouring. */
.home .p-hero h1 .txt-accent {
  display: block;
  font-size: 1.22em;
  letter-spacing: -.015em;
}

.home .p-hero__tagline { font-weight: 700; }

/* The backdrop is the supplied mosque photograph. The design sits it
   behind the VEHICLE on the right and leaves the copy on near-white —
   so the image is pushed off-centre to the right rather than stretched
   across the full hero.

   object-position cannot do this: the source is wider than it is tall
   relative to the hero box, so cover crops vertically only and the
   horizontal value is ignored. Oversizing the element is what moves it —
   and the width must be explicit, because `width:auto` on a replaced
   element resolves to the image's intrinsic width and the `right` inset
   is dropped, which leaves a hard seam partway across the hero. */
.home .p-hero__bg {
  left: 0;
  right: 0;
  /* The mockup runs the mosque edge to edge — minarets behind the copy on the
     left, the domes behind the car on the right. Oversizing it to 128% pushed
     the right-hand third of the photograph off screen and left the far right
     of the hero as empty plaza. */
  width: 100%;
  /* The mockup's mosque reads clearly behind the vehicle — domes, minarets and
     the tiled forecourt are all legible. At .62 with the wash below it the
     backdrop had faded to a pale smudge, which is the main reason the hero read
     as washed out beside the comp. */
  /* The comp treats the mosque as a watermark, not a photograph — the domes
     are barely a tint behind the car and the copy sits on near-white. Running
     it at full strength put hard architectural edges through the headline. */
  opacity: .5;
  object-position: center 42%;
  /* The supplied backdrop is a pale, low-contrast render. The mockup shows the
     domes and minarets clearly enough to be read as a mosque, which needs the
     source lifted rather than merely un-faded. */
  /* The mockup's backdrop is a cool grey-blue. The raw asset is warm cream, so
     it is desaturated and lifted in contrast rather than simply un-faded. */
  filter: saturate(.82) contrast(1.14) brightness(1.02);
}

/* Deepen the wash at the copy end so the headings sit on clean ground,
   as drawn, while the mosque still reads behind the car. */
.home .p-hero::after {
  background: linear-gradient(
    100deg,
    rgba(255, 255, 255, .9) 0%,
    rgba(255, 255, 255, .72) 26%,
    rgba(255, 255, 255, .12) 58%,
    rgba(255, 255, 255, 0) 100%
  );
}

@media (min-width: 992px) {
  /* The vehicle is the larger half of the hero and overhangs its column
     to the right, as drawn. The overhang is a fixed distance rather than
     a full bleed — bleeding to the viewport edge scales the image by the
     whole margin and the car ends up several times its intended size. */
  /* The mockup gives the vehicle a clear majority of the hero — it spans
     roughly 55% of the width against the copy's 45%, and the crest hangs off
     its rear quarter beyond that. 1.12fr left the car reading a third too
     small with dead hero under it. */
  /* Measured off the comp: "Car Insurance" is 38.6% of the page width and must
     stay on one line, so the copy column cannot go below ~42% of the
     container. 1.5fr starved it and the heading broke onto three lines. */
  .home .p-hero__inner { grid-template-columns: 1fr 1.38fr; }

  /* In the comp the copy and the car have the SAME vertical extent — the
     heading sits at the top of the hero, the buttons at the bottom, and the
     space is distributed between them. Aligning the copy to the end of the
     row instead left a third of the hero empty above the heading, which is
     what made the whole section read as loose and mis-set. */
  .home .p-hero__inner { align-items: stretch; }

  .home .p-hero__copy {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding-block: 1.75rem 1.25rem;
  }

  .home .p-hero__copy > * { margin-top: 0; margin-bottom: 0; }

  /* The design stands the car ON the bottom of the hero, with the trust
     band directly beneath it. pages.css centres the media instead, which
     is right for the About/Contact photographs but here leaves a band of
     empty hero between the car and the strip. */
  .home .p-hero__inner {
    align-items: end;
    padding-block: 1.5rem .25rem;
  }

  .home .p-hero__media {
    margin-right: clamp(-2.25rem, -1.8vw, -.5rem);
    /* The mockup stands the car ON the hero's lower edge — its front tyre
       meets the boundary with the trust strip, with no band of empty hero
       underneath. */
    margin-bottom: -2.25rem;
  }

  .home .p-hero__media img { max-height: 33rem; margin-left: auto; }
}

/* ---------- Trust strip ---------------------------------------
   A plain white band directly under the hero, divided by hairlines
   — not the inset rounded card the plan pages use.

   It stays inside the standard .container, so its first item lines
   up with the hero copy above it and the tile grid below it. It was
   briefly full-bleed, which on a wide screen left the band running
   edge to edge while every other section stopped at 1200px, and
   nothing on the page lined up. */

.home .section--overlap { margin-top: 0; padding-top: 0; }

.home .trust-strip {
  margin: 0;
  padding: .8rem 0;
  background: #fff;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

/* The plan pages give this band a 3rem icon and a tall stack. The design
   draws it as a slim bar — small icon, centred against two short lines,
   at roughly half the height. */
.home .trust-strip li { align-items: center; gap: .6rem; }

.home .trust-strip .ico { width: 3.18rem; height: 3.18rem; }

/* Both lines are set dark in the mockup. The sub-line in particular was grey
   at .6875rem, which read as a caption rather than as the claim it is. */
.home .trust-strip h3 { margin-bottom: .12rem; font-size: .96rem; }
.home .trust-strip p { color: var(--dark); font-size: .96rem; line-height: 1.4; }

@media (min-width: 992px) {
  .home .trust-strip li + li { padding-left: 1.25rem; }
}

/* ---------- What's covered: the ring ---------------------------
   Eight perils spaced around a circle centred on the shield. The
   positions below are cos/sin of 30°, 70°, 110° and 150° either
   side of vertical at radius 44%, which is what puts them on an
   even arc rather than in two straight columns. */

.home .cover-panel { background: #fff; }

.home .spokes--radial {
  position: relative;
  /* The mockup's ring fills its panel — the outer circle is a little over half
     the panel's width and the labels run out to its edges. At 19rem the whole
     diagram floated in the middle of a mostly empty card. */
  width: min(100%, 24rem);
  margin: .5rem auto 0;
  aspect-ratio: 1 / 1;
}

/* The short stem the design drops from the panel heading into the ring. */
.home .cover-panel:first-child .cover-panel__tab { position: relative; }

.home .cover-panel:first-child .cover-panel__tab::after {
  content: "";
  position: absolute;
  top: calc(100% + .2rem);
  left: 50%;
  width: 1px;
  height: 1.5rem;
  background: var(--line);
}

/* The two faint guide circles the design draws behind the perils. */
.home .spokes--radial::before,
.home .spokes--radial::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  border: 1px solid var(--line);
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

.home .spokes--radial::before { width: 88%; height: 88%; }
.home .spokes--radial::after { width: 66%; height: 66%; }

.home .spokes--radial .spokes__hub {
  position: absolute;
  top: 50%;
  left: 50%;
  display: block;
  width: 54%;
  transform: translate(-50%, -50%);
}

.home .spokes--radial .ico--hub {
  width: 100%;
  height: auto;
  color: var(--primary);
}

.home .spokes--radial .spoke {
  position: absolute;
  margin: 0;
  transform: translate(-50%, -50%);
}

/* Solid discs with the glyph knocked out in white, as drawn. */
.home .spokes--radial .icon-disc {
  display: grid;
  place-items: center;
  width: 3.5rem;
  height: 3.5rem;
  background: var(--primary);
  border-radius: 50%;
}

.home .spokes--radial .icon-disc .ico {
  width: 1.9rem;
  height: 1.9rem;
  color: #fff;
}

.home .spokes--radial .spoke__label {
  position: absolute;
  top: 50%;
  width: 8.25rem;
  color: var(--dark);
  /* Bold and near-black in the mockup — these are the section's content, not
     annotations on a diagram. */
  font-size: .8125rem;
  font-weight: 700;
  line-height: 1.3;
  transform: translateY(-50%);
}

/* Left arc — label sits outside, right-aligned toward the disc. */
.home .spokes--radial .spoke:nth-child(2)  { left: 28%;   top: 11.9%; }
.home .spokes--radial .spoke:nth-child(3)  { left: 8.7%;  top: 35%; }
.home .spokes--radial .spoke:nth-child(4)  { left: 8.7%;  top: 65%; }
.home .spokes--radial .spoke:nth-child(5)  { left: 28%;   top: 88.1%; }

/* Right arc. */
.home .spokes--radial .spoke:nth-child(6)  { left: 72%;   top: 11.9%; }
.home .spokes--radial .spoke:nth-child(7)  { left: 91.3%; top: 35%; }
.home .spokes--radial .spoke:nth-child(8)  { left: 91.3%; top: 65%; }
.home .spokes--radial .spoke:nth-child(9)  { left: 72%;   top: 88.1%; }

.home .spokes--radial .spoke:nth-child(-n+5) .spoke__label {
  right: calc(100% + .55rem);
  text-align: right;
}

.home .spokes--radial .spoke:nth-child(n+6) .spoke__label {
  left: calc(100% + .55rem);
  text-align: left;
}

/* A ring cannot be read on a narrow screen, so below 700px the
   perils become an honest single-column list instead. */
@media (max-width: 699px) {
  .home .spokes--radial {
    width: 100%;
    aspect-ratio: auto;
    display: grid;
    gap: .7rem;
  }
  .home .spokes--radial::before,
  .home .spokes--radial::after { content: none; }
  .home .spokes--radial .spokes__hub {
    position: static;
    width: 7rem;
    margin: 0 auto .75rem;
    transform: none;
  }
  .home .spokes--radial .spoke {
    position: static;
    display: flex;
    align-items: center;
    gap: .7rem;
    transform: none;
  }
  .home .spokes--radial .spoke__label {
    position: static;
    width: auto;
    text-align: left;
    transform: none;
  }
}

/* ---------- What's not covered: three-up cards ----------------
   Centred cards on a tinted panel, red mark on top — not the
   two-column left-aligned rows the Commercial page uses. */

.home .exclusions {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: .8rem;
}

/* plan.css rules a hairline down the middle of its two-column exclusion
   list. These are separate cards in a three-up grid, so that divider has
   nothing to separate and shows through the middle column. */
.home .exclusions::before { content: none; display: none; }

@media (min-width: 768px) {
  .home .exclusions { grid-template-columns: repeat(3, 1fr); }
}

.home .exclusion {
  flex-direction: column;
  align-items: center;
  gap: .55rem;
  padding: 1.1rem .85rem 1.25rem;
  background: var(--bg);
  border-radius: var(--r);
  text-align: center;
}

.home .exclusion__mark {
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  background: #d92d20;
  border: 0;
  border-radius: 50%;
}

.home .exclusion__mark .ico { width: 1.6rem; height: 1.6rem; color: #fff; }

.home .exclusion h3 { margin-bottom: .3rem; font-size: .875rem; }

/* Dark, not grey — the mockup sets the exclusion detail at the same weight of
   colour as the body copy elsewhere on the page. */
.home .exclusion p { color: var(--dark); font-size: .8125rem; line-height: 1.5; }

/* ---------- How Takaful works ----------------------------------
   Icon on the left, two lines of copy to its right. The design
   shows no step numbers here. */

.home .flow__n { display: none; }

.home .flow__step {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas:
    "ico title"
    "ico text";
  align-items: center;
  gap: 0 .7rem;
  text-align: left;
}

.home .flow__step > .ico {
  grid-area: ico;
  justify-self: start;
  width: 3.1rem;
  height: 3.1rem;
}

/* Both lines are black in the mockup. plan.css sets the title in primary green
   and the sub in grey, which on this rail read as a link over a caption. */
.home .flow__step h3 {
  grid-area: title;
  align-self: end;
  color: var(--dark);
  font-size: .875rem;
}

.home .flow__step p {
  grid-area: text;
  align-self: start;
  color: var(--dark);
  font-size: .8125rem;
}

/* ---------- Testimonials --------------------------------------
   Name and city on the left, portrait on the right. */

.home .testimonial__author {
  flex-direction: row-reverse;
  justify-content: space-between;
  width: 100%;
}

/* ---------- Wide CTA ------------------------------------------
   The heading sits on one line in the design. */

@media (min-width: 992px) {
  .home .cta-wide h2 { font-size: clamp(1.25rem, 2.2vw, 1.6rem); }
}

/* ---------- Slider widths per carousel ------------------------
   .slide is flex:0 0 100% / 50% / 33.33% in site.css, which suits
   testimonials. The two new rails show more at once, so each sets
   its own basis. The slider script measures the rendered slide
   width, so paging follows automatically. */

.situations .slide { padding: .25rem .45rem .85rem; }
.garages    .slide { padding: .25rem .35rem .5rem; flex: 0 0 50%; }

/* Partner logo carousel shows three per view on phones (the garages base is
   two). Two classes beat ".garages .slide"; capped to the phone range so the
   larger breakpoints below (which the client is happy with) stay unchanged. */
@media (max-width: 575.98px) {
  .garages.partners-rail .slide { flex: 0 0 33.3333%; }
}

@media (min-width: 576px) {
  .garages .slide { flex: 0 0 33.3333%; }
}

@media (min-width: 768px) {
  .situations .slide { flex: 0 0 50%; }
  .garages    .slide { flex: 0 0 20%; }
}

@media (min-width: 992px) {
  /* Four cards fill the view; with six scenarios in the rail there are two
     more off-screen, so it pages in three steps — arrows and three dots stay
     on screen (the script hides both only when everything already fits). */
  .situations .slide { flex: 0 0 25%; }
  .garages    .slide { flex: 0 0 12.5%; }
}

/* ---------- Real life situations ------------------------------
   Photograph on the left, copy on the right, as the mockup draws
   it. Below 480px the photo goes full width above the copy — a
   half-width photo at phone size is too small to read. */

.situation {
  display: grid;
  grid-template-columns: 7.75rem 1fr;
  height: 100%;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--sh-sm);
}

.situation__media {
  position: relative;
  /* The mockup's scenario cards are tall — the photograph runs the full height
     of the card and the copy sets to four lines beside it. */
  min-height: 11.5rem;
  background: var(--accent-soft);
}

.situation__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.situation__body { padding: .95rem .9rem; }

.situation__n {
  display: block;
  margin-bottom: .2rem;
  color: var(--accent);
  font-size: .75rem;
  font-weight: 600;
}

.situation h3 {
  margin: 0 0 .45rem;
  color: var(--dark);
  font-size: 1.0625rem;
  line-height: 1.2;
}

.situation p {
  margin: 0;
  color: var(--dark);
  font-size: .8125rem;
  line-height: 1.55;
}

@media (max-width: 479px) {
  .situation { grid-template-columns: 1fr; }
  .situation__media { min-height: 9.5rem; }
}

/* ---------- Network garages -----------------------------------
   One bordered cell per mark. The rail is a single bounded card,
   so the cells carry hairlines rather than each being a card. */

.garages__frame {
  padding: .35rem .25rem;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--sh-sm);
}

.garage {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .3rem;
  height: 100%;
  min-height: 6.25rem;
  padding: .9rem .4rem;
  border-right: 1px solid var(--line);
}

.garages .slide:last-child .garage { border-right: 0; }

.garage img {
  width: auto;
  max-width: 100%;
  /* Roughly double the previous 2.1rem. The mockup sets these marks large
     enough to be recognised at a glance, which is the whole point of a
     partner wall. */
  max-height: 3.1rem;
  object-fit: contain;
}

/* The mockup captions each mark with its brand name, except where the logo is
   already a wordmark (Kia, MG, Haval, Changan) and a caption would repeat it. */
.garage__name {
  color: var(--dark);
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .04em;
  line-height: 1;
  text-transform: uppercase;
}

/* A wordmark cell has no caption, so its logo takes the whole cell height and
   stays optically the same size as the captioned ones beside it. */
.garage--wordmark img { max-height: 3.9rem; }

/* ---------- FAQ beside testimonials ---------------------------
   Stacked on phones, two columns from 992px, matching the mockup.
   The testimonial slider keeps its own component styling; only the
   column it sits in is defined here. */

.split-panels {
  display: grid;
  gap: 1.5rem;
  align-items: start;
}

/* Grid items are min-width:auto by default, so a column cannot shrink below
   the intrinsic width of its contents — and the testimonial slider's flex
   track is intrinsically far wider than the column. Without this the column
   pushes past the container and the whole page scrolls sideways on phones. */
.split-panels > *,
.split-panels .slider,
.split-panels .slider__viewport { min-width: 0; }

@media (min-width: 992px) {
  .split-panels { grid-template-columns: .88fr 1.12fr; gap: 2rem; }
}

.split-panel__h {
  margin-bottom: 1rem;
  color: var(--primary);
  font-size: clamp(1rem, 2vw, 1.125rem);
  font-weight: 700;
  letter-spacing: .02em;
  text-align: center;
  text-transform: uppercase;
}

/* Inside this column the accordion is the whole card, so it takes
   the border rather than each row floating on the page. */
.split-panels .acc {
  padding: .35rem .9rem;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--sh-sm);
}

/* site.css draws the accordion marker as a rotating chevron; this design
   uses a plus that becomes a minus. Scoped to .home so the Insurance,
   Claims and About accordions keep the chevron they were designed with. */
.home .acc__btn::after {
  content: "";
  flex: none;
  width: 12px;
  height: 12px;
  border: 0;
  transform: none;
  transition: transform var(--t);
  background:
    linear-gradient(currentColor, currentColor) center / 12px 2px no-repeat,
    linear-gradient(currentColor, currentColor) center / 2px 12px no-repeat;
}

/* Collapse the vertical stroke to turn the plus into a minus. */
.home .acc__btn[aria-expanded="true"]::after {
  transform: none;
  background:
    linear-gradient(currentColor, currentColor) center / 12px 2px no-repeat;
}

/* The design frames the "why choose" row as one bordered card rather
   than letting it sit loose on the page, as it does on the plan pages. */
.home .assure-bar {
  padding: 1.25rem .5rem;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--sh-sm);
}

/* The testimonial column shows one card at a time on every width —
   three side by side in a half-width column would be unreadable. */
.split-panels .slide { flex: 0 0 100%; }

@media (min-width: 576px) {
  .split-panels .testimonials-col .slide { flex: 0 0 100%; }
}

/* The design shows three testimonials abreast beside the FAQ. */
@media (min-width: 992px) {
  .split-panels .testimonials-col .slide { flex: 0 0 33.3333%; }
}

/* =============================================================
   Calibration against the approved mockup
   -------------------------------------------------------------
   Everything above builds the page's structure. This last block
   is the size, weight and colour pass that brings it onto the
   comp — the page was laid out correctly but set roughly 15–20%
   too small and too light throughout, which is what made it read
   as a different design rather than the same one.

   Scoped to .home in every rule, so no other template moves.
   ============================================================= */

/* ---------- Container width ------------------------------------
   The mockup runs its content to roughly 89% of the artboard — the
   hero copy, the trust strip and the tile grid all start well left
   of where a 1200px container puts them at desktop width. Setting
   the page's own maximum brings every section onto the comp's
   gridlines at once. This content width is now the site-wide default
   (see --maxw in site.css), so every page shares the home page's
   left/right margins rather than the old narrower 1200px measure. */

/* ---------- Body copy weight -----------------------------------
   The mockup sets supporting copy in near-black. The theme's --gray
   is correct for the inner pages but drops this design's tiles and
   panels to a whisper against their headings. */

.home .tile p,
.home .p-hero__lead { color: var(--dark); }

/* ---------- Hero ----------------------------------------------- */

/* Black in the mockup, not green. The green line reads as a second
   heading and competes with "Car Insurance" directly above it. */
.home .p-hero__tagline {
  color: var(--dark);
  font-size: clamp(1rem, 2.1vw, 1.3125rem);
}

.home .p-hero__lead { font-size: .9375rem; line-height: 1.65; }

/* The mockup ticks each assurance with a filled disc in accent green,
   set on the text baseline rather than raised above it. */
/* Small discs and light labels in the comp — this row is a reassurance strip,
   not a feature list, and at 1.3rem/600 it was competing with the tagline. */
.home .p-hero__ticks .ico {
  width: .95rem;
  height: .95rem;
  margin-top: .08em;
  color: var(--accent);
}

.home .p-hero__ticks li { font-size: .8125rem; font-weight: 500; }

/* The hero buttons are the largest on the page in the mockup — a good
   half again taller than the theme's default, with the glyph sized to
   match the label rather than sitting under it. */
.home .p-hero__actions { gap: 1rem; margin-top: 1.6rem; }

.home .p-hero__actions .btn {
  padding: .95rem 1.6rem;
  font-size: .9375rem;
  border-radius: .55rem;
}

.home .p-hero__actions .btn .ico { width: 1.35rem; height: 1.35rem; }

/* The outlined WhatsApp button is white-filled with a green rule and
   green label, not a tinted fill. */
.home .p-hero__actions .btn--whatsapp {
  background: #fff;
  border: 1.5px solid var(--primary);
  color: var(--primary);
}

/* On hover the outlined button fills green with a white label and icon; without
   this the base :hover turned the icon white on the still-white fill, so it
   vanished. */
.home .p-hero__actions .btn--whatsapp:hover {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
}

.home .p-hero__actions .btn--whatsapp:hover .ico { color: #fff; }

/* ---------- Why choose Takaful: six tiles ----------------------
   The single largest correction on the page. The mockup draws these
   glyphs at roughly the height of three lines of body copy; at
   2.75rem they were a third of that and the tiles read as empty. */

/* ---------- Why choose Takaful: grid metrics ------------------
   Measured off the comp as fractions of page width, which is the only
   scale-free way to compare a 761px artboard with a 1440px render:
   card 14.3%, gap 0.76%, card height 20.4%. The inherited 1.25rem
   --gap put 1.25% between cards, which ate ~0.9% of card width six
   times over and left the row narrower than the comp's. */
.home .tiles--6 { gap: .7rem; }

.home .tiles--6 .icon-disc .ico { width: 7.28rem; height: 7.28rem; }

.home .tiles--6 .icon-disc { margin-bottom: .9rem; }

.home .tile { padding: 2.6rem .7rem 1.5rem; }

/* The comp's tiles carry very little side padding - the copy runs to
   12.5% of page width inside a 14.3% card, which is what keeps
   "Comprehensive protection" on one line instead of three. Leave the
   wrapping greedy: text-wrap:pretty re-balanced that card into three
   short lines, which is the opposite of the comp. */

/* One line per title in the mockup — "Mutual Protection" and
   "Shariah Compliant" both fit, which they cannot at the inherited
   size in a sixth of the container. */
.home .tile h3 {
  margin-bottom: .5rem;
  font-size: 1.06rem;
  letter-spacing: -.01em;
}

.home .tile p { font-size: .885rem; line-height: 1.55; }

/* ---------- Coverage hub ---------------------------------------
   The shield is the anchor of the diagram in the mockup and sits
   noticeably larger inside its ring than the first pass drew it. */

.home .spokes--radial .spokes__hub { width: 52%; }
/* Comp ratio: the shield is 0.46 of the outer guide circle. The shield
   only fills 78% of its own 24-unit box, so the hub box has to run to
   52% of the ring to land there; 46% drew it noticeably small. */

.home .cover-panel { padding-block: 1.5rem; }

/* ---------- Why choose Get Insured Takaful --------------------- */

.home .assure-bar .ico { width: 2.4rem; height: 2.4rem; }
.home .assure-bar li { gap: .8rem; font-size: .8125rem; }
.home .assure-bar { padding: 1.5rem .5rem; }

/* ---------- FAQ -------------------------------------------------
   The mockup's accordion is compact: five questions in the height
   the current build gives three, and the questions are set in the
   regular weight with the plus carrying the emphasis. */

.home .split-panels .acc { padding: .15rem 1.1rem; }

.home .split-panels .acc__btn {
  padding-block: .95rem;
  font-size: .875rem;
  font-weight: 500;
}

/* ---------- Testimonials ---------------------------------------
   Short cards: two lines of quote, a hairline, then the attribution.
   The rule above the author is what the mockup draws. */

.home .testimonial { padding: 1.15rem 1.1rem 1rem; }

.home .testimonial blockquote p {
  color: var(--dark);
  font-size: .875rem;
  line-height: 1.6;
}

.home .testimonial__author {
  align-items: center;
  margin-top: 1rem;
  padding-top: .9rem;
  border-top: 1px solid var(--line);
}

.home .testimonial__author img { width: 3rem; height: 3rem; }

.home .testimonial .stars .ico { width: 1.05rem; height: 1.05rem; }

/* ---------- Wide call to action --------------------------------
   The mockup's band is a deep, flat green with the photograph only
   just perceptible behind it. plan.css lightens toward #0f6349 across
   the gradient and runs the image at 12%, which together made the
   band read as mid-green with a visible skyline. */

.home .cta-wide {
  background: linear-gradient(115deg, var(--primary-dark) 0%, #0c4535 60%, var(--primary-dark) 100%);
}

.home .cta-wide__bg { opacity: .07; }

.home .cta-wide__inner { padding-block: 2rem; }

.home .cta-wide p {
  margin-top: .5rem;
  color: rgba(255, 255, 255, .88);
  font-size: .875rem;
  line-height: 1.55;
}

.home .cta-wide__actions .btn { padding: .9rem 1.35rem; font-size: .9375rem; }
.home .cta-wide__actions .btn .ico { width: 1.35rem; height: 1.35rem; }

/* The quote button is a green only a shade off the band in the mockup,
   not the bright accent the theme uses elsewhere. */
.home .cta-wide__actions .btn--accent {
  background: var(--primary);
  color: #fff;
}

/* Number and label both black on the white phone button. */
.home .cta-wide__actions .btn--phone { color: var(--dark); }
.home .cta-wide__actions .btn--phone strong { color: var(--dark); font-size: 1.0625rem; }
.home .cta-wide__actions .btn--phone small { color: var(--dark); }
.home .cta-wide__actions .btn--phone .ico { color: var(--primary); }

/* ---------- Contact rail ---------------------------------------
   The strip the mockup runs directly under the call to action, on a
   darker band of the same green. It belongs to the CTA section, so it
   inherits the band's stacking context and needs no background image
   of its own. */

.home .cta-rail {
  position: relative;
  z-index: 1;
  background: rgba(0, 0, 0, .22);
}

.home .cta-rail__inner {
  display: grid;
  gap: .65rem 1.5rem;
  margin: 0;
  padding-block: .85rem;
  list-style: none;
}

.home .cta-rail li {
  display: flex;
  align-items: center;
  gap: .55rem;
  color: rgba(255, 255, 255, .92);
  font-size: .8125rem;
}

.home .cta-rail .ico {
  flex: none;
  width: 1.05rem;
  height: 1.05rem;
  color: rgba(255, 255, 255, .8);
}

.home .cta-rail a { color: inherit; text-decoration: none; }
.home .cta-rail a:hover { text-decoration: underline; }

@media (min-width: 768px) {
  .home .cta-rail__inner { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 992px) {
  .home .cta-rail__inner { grid-template-columns: repeat(4, 1fr); }
}

/* ---------- Carousel controls ----------------------------------
   The mockup draws the scenario and garage arrows as bare chevrons
   sitting outside the rail, not as floating white pucks over it.
   The comprehensive plan page reuses the same rails, so it takes the
   identical control treatment as the home page. */

.home .situations .slider__nav,
.home .garages .slider__nav,
.home .testimonials .slider__nav,
.gi-comprehensive .situations .slider__nav,
.gi-comprehensive .garages .slider__nav,
.gi-comprehensive .testimonials .slider__nav {
  background: none;
  border: 0;
  box-shadow: none;
  color: var(--gray);
}

.home .situations .slider__nav:hover,
.home .garages .slider__nav:hover,
.home .testimonials .slider__nav:hover,
.gi-comprehensive .situations .slider__nav:hover,
.gi-comprehensive .garages .slider__nav:hover,
.gi-comprehensive .testimonials .slider__nav:hover { color: var(--primary); }

.home .situations .slider__nav .ico,
.home .garages .slider__nav .ico,
.home .testimonials .slider__nav .ico,
.gi-comprehensive .situations .slider__nav .ico,
.gi-comprehensive .garages .slider__nav .ico,
.gi-comprehensive .testimonials .slider__nav .ico { width: 1.5rem; height: 1.5rem; }

/* Garages: seat the chevrons in a gutter to either side of the bordered
   strip so they clear the first and last logos, the way the mockup draws
   them. */
.home .garages .garages__frame,
.gi-comprehensive .garages .garages__frame { margin-inline: 2.75rem; }
.home .garages .slider__nav--prev,
.gi-comprehensive .garages .slider__nav--prev { left: 0; }
.home .garages .slider__nav--next,
.gi-comprehensive .garages .slider__nav--next { right: 0; }

/* Situations: same treatment — the scenario arrows must clear the first and
   last cards rather than sitting over the photograph, so they read as clean
   controls beside the rail (matching the professional mockup layout). */
.home .situations .slider__viewport,
.gi-comprehensive .situations .slider__viewport { margin-inline: 2.25rem; }
.home .situations .slider__nav--prev,
.gi-comprehensive .situations .slider__nav--prev { left: 0; }
.home .situations .slider__nav--next,
.gi-comprehensive .situations .slider__nav--next { right: 0; }

/* Testimonials: same clean chevrons, seated in a gutter to either side so
   they clear the first and last review cards instead of sitting over them. */
.home .testimonials .slider__viewport,
.gi-comprehensive .testimonials .slider__viewport { margin-inline: 2rem; }
.home .testimonials .slider__nav--prev,
.gi-comprehensive .testimonials .slider__nav--prev { left: 0; }
.home .testimonials .slider__nav--next,
.gi-comprehensive .testimonials .slider__nav--next { right: 0; }