/* ============================================================
   Brand landing pages — /car-insurance/{brand}/
   Scoped under .brand-2026. Reuses site components (page-hero,
   card, tile, tiles, steps, cta-wide, acc) and only styles the
   brand-specific bits here. Enqueued on page-brand.php only.
   ============================================================ */

/* Brand hero: show the uploaded vehicle photo at full strength as a full-bleed
   background (like the Commercial page), not the faint 10% watermark. The base
   .p-hero::after white wash still keeps the left-hand heading legible. */
.brand-2026 .p-hero__bg{ opacity:1; filter:saturate(1.08) contrast(1.04); }

/* Embedded insurance calculator (replaces the old model selector). Constrain
   the lean form to a comfortable centred width inside the wide brand container. */
.brand-2026 .brand-calc{ max-width:760px; margin-inline:auto; }

.brand-crumb{ background:var(--accent-soft, #eaf5ef); font-size:.82rem; }
.brand-crumb .container{ display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; padding-block:.7rem; }
.brand-crumb a{ color:var(--gray); text-decoration:none; }
.brand-crumb a:hover{ color:var(--accent); }
.brand-crumb [aria-current="page"]{ color:var(--dark); font-weight:600; }

.brand-2026 .brand-intro p{ max-width:60rem; margin:0 auto .9rem; color:var(--gray); font-size:1.02rem; line-height:1.7; text-align:center; }

/* Model selector card */
.brand-2026 .brand-selector{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:1.5rem;
  padding:clamp(1.4rem,3vw,2.2rem);
  background:linear-gradient(115deg,#eef4f1,#f6faf8);
  border:1px solid var(--line);
}
.brand-2026 .brand-selector__copy h2{ margin:0 0 .35rem; font-size:1.35rem; }
.brand-2026 .brand-selector__copy p{ margin:0; color:var(--gray); font-size:.95rem; }
.brand-2026 .brand-selector__form{ display:flex; flex-wrap:wrap; gap:.75rem; align-items:center; }
.brand-2026 .brand-selector__form select{
  min-width:240px; padding:.8rem 1rem; border:1px solid var(--line); border-radius:var(--r-sm);
  background:#fff; font:inherit; color:var(--dark);
}

/* Popular model cards */
.brand-2026 .brand-models{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(2,1fr); gap:1rem; }
.brand-2026 .brand-model{ display:flex; align-items:center; gap:.85rem; padding:1rem 1.15rem; text-decoration:none; color:var(--dark); transition:transform var(--t), box-shadow var(--t); }
.brand-2026 .brand-model:hover{ transform:translateY(-3px); box-shadow:var(--sh); }
.brand-2026 .brand-model__ico{ display:grid; place-items:center; width:44px; height:44px; flex:none; border-radius:50%; background:var(--accent-soft); color:var(--accent); }
.brand-2026 .brand-model__ico .ico{ width:22px; height:22px; }
.brand-2026 .brand-model__name{ font-weight:600; }
.brand-2026 .brand-model__cta{ margin-left:auto; display:inline-flex; align-items:center; gap:.3rem; color:var(--accent); font-size:.85rem; font-weight:600; white-space:nowrap; }
.brand-2026 .brand-model__cta .ico{ width:16px; height:16px; }

/* Comprehensive + Takaful split */
.brand-2026 .brand-split{ display:grid; grid-template-columns:repeat(2,1fr); gap:1.25rem; }
.brand-2026 .brand-info{ padding:clamp(1.4rem,3vw,2rem); }
.brand-2026 .brand-info h3{ margin:0 0 .6rem; font-size:1.2rem; }
.brand-2026 .brand-info p{ margin:0 0 1.1rem; color:var(--gray); line-height:1.7; }

/* Claims strip */
.brand-2026 .brand-claims{ display:flex; align-items:center; justify-content:space-between; gap:1.5rem; flex-wrap:wrap; padding:clamp(1.4rem,3vw,2rem); }
.brand-2026 .brand-claims h2{ margin:0 0 .5rem; font-size:1.3rem; }
.brand-2026 .brand-claims p{ margin:0; color:var(--gray); max-width:46rem; line-height:1.7; }

/* Related services */
.brand-2026 .brand-related{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(2,1fr); gap:1rem; }
.brand-2026 .brand-related__item{ display:flex; align-items:center; gap:.75rem; padding:1rem 1.15rem; text-decoration:none; color:var(--dark); transition:transform var(--t), box-shadow var(--t); }
.brand-2026 .brand-related__item:hover{ transform:translateY(-3px); box-shadow:var(--sh); color:var(--primary); }
.brand-2026 .brand-related__item > .ico:first-child{ color:var(--accent); flex:none; }
.brand-2026 .brand-related__item span{ font-weight:600; flex:1; }
.brand-2026 .brand-related__item > .ico:last-child{ width:16px; height:16px; color:var(--gray-light); }

@media (max-width:720px){
  .brand-2026 .brand-models,
  .brand-2026 .brand-split,
  .brand-2026 .brand-related{ grid-template-columns:1fr; }
  .brand-2026 .brand-selector{ flex-direction:column; align-items:stretch; text-align:center; }
  .brand-2026 .brand-selector__form{ justify-content:center; }
  .brand-2026 .brand-selector__form select{ min-width:0; width:100%; }
}