/* ============================================================
   Claims page (page ID 10995, /claims-2/) — scoped styles
   All selectors prefixed with .claims-page or .cp- to avoid
   any bleed into other pages.
   ============================================================ */

.claims-page{
  /* Palette — sampled from adroit.com.au */
  --cp-navy:#0d1f3d;
  --cp-navy-deep:#091534;
  --cp-red:#FD3743;
  --cp-red-deep:#e0252e;
  --cp-ink:#0d1f3d;
  --cp-body:#555555;          /* match site body colour rgb(85,85,85) */
  --cp-muted:#7f8597;
  --cp-hairline:#e3e6ee;
  --cp-paper:#ffffff;
  --cp-paper-off:#f5f5f5;

  /* Font stacks pulled from the live theme. NB International is the
     Adroit brand body sans (loaded by the theme); Montserrat for headings
     and Roboto for secondary UI. We reuse the theme's webfonts so the
     Claims page reads as part of the same site rather than a one-off. */
  --cp-font-body: "NB International", Roboto, Arial, Helvetica, sans-serif;
  --cp-font-heading: "Montserrat", "NB International", Arial, Helvetica, sans-serif;
  --cp-font-ui: "Roboto", "NB International", Arial, Helvetica, sans-serif;
  /* Back-compat alias used elsewhere in this file */
  --cp-font: var(--cp-font-body);

  --cp-pad-x: clamp(24px, 5vw, 88px);
  --cp-section-y: clamp(80px, 10vw, 140px);
  --cp-ease: cubic-bezier(.2,.7,.2,1);

  font-family: var(--cp-font-body);
  color: var(--cp-body);
  font-size: 15.36px;          /* match site body size (0.96em at 16px root) */
  line-height: 1.4;
  font-weight: 200;            /* NB International Light — site's body weight */
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.claims-page *,
.claims-page *::before,
.claims-page *::after{ box-sizing: border-box; }

.claims-page a{ color: var(--cp-navy); text-decoration: none; }
.claims-page a:hover{ color: var(--cp-red); }

.claims-page h1,
.claims-page h2,
.claims-page h3,
.claims-page h4{
  color: var(--cp-ink);
  font-family: var(--cp-font-heading);
  font-weight: 500;
  letter-spacing: -.02em;
  line-height: 1.22;
  margin: 0;
}
/* Type scale matched to adroit.com.au:
 *   H1 (landing-page hero): Montserrat 500 / clamps 32 → 44px (homepage hero is 44px)
 *   H2 (section heads):     Montserrat 600 / clamps 22 → 28px (homepage section H2 is 26–28px)
 *   H3 (sub-headers):       Roboto 700 / 19px (matches site product page H2 size for sub-headings)
 *
 * Theme's main.css has aggressive h1/h2 rules (and an html.larger that
 * shrinks the root font); !important here keeps the scope locked to
 * .claims-page. */
.claims-page h1,
.claims-page h1.elementor-heading-title{
  font-family: var(--cp-font-heading) !important;
  font-size: clamp(32px, 3.4vw, 44px) !important;
  font-weight: 500;
  letter-spacing: -.02em;
  line-height: 1.22;
}
.claims-page h2,
.claims-page h2.elementor-heading-title{
  font-family: var(--cp-font-heading) !important;
  font-size: clamp(22px, 2.2vw, 28px) !important;
  font-weight: 600;
  letter-spacing: -.01em;
  line-height: 1.14;
  color: var(--cp-ink) !important;
}
.claims-page h3,
.claims-page h3.elementor-heading-title{
  font-family: var(--cp-font-ui) !important;
  font-size: 1.1em !important;     /* ~17.6px — close to site's H2-as-sub-heading */
  font-weight: 700;
  line-height: 1.22;
  color: var(--cp-ink) !important;
}
.claims-page p{ margin: 0; }

.cp-wrap{ max-width: 1240px; margin: 0 auto; padding: 0 var(--cp-pad-x); }

/* Editorial kicker above each section heading. Rendered as a Heading widget
   so the editor gets an inline Title field, with class cp-kicker on the
   wrapper. The dashes are CSS pseudo-elements on the wrapper. */
.cp-kicker,
.claims-page .cp-kicker.elementor-widget-heading{
  display: flex; align-items: center; justify-content: center; gap: 14px;
  margin-bottom: 18px;
}
.cp-kicker::before,
.cp-kicker::after,
.claims-page .cp-kicker.elementor-widget-heading::before,
.claims-page .cp-kicker.elementor-widget-heading::after{
  content: ""; width: 36px; height: 1px; background: var(--cp-red); display: block; flex: none;
}
.claims-page .cp-kicker .elementor-heading-title,
.claims-page .cp-kicker.elementor-widget-heading .elementor-heading-title{
  text-transform: uppercase;
  letter-spacing: .32em;
  font-size: .74em !important;
  font-weight: 700;
  color: var(--cp-red) !important;
  line-height: 1.4;
}
/* Left-aligned variant used in the contact section — keep the left dash,
   drop the right one. */
.claims-page .cp-kicker--start,
.claims-page .cp-kicker.cp-kicker--start.elementor-widget-heading{
  justify-content: flex-start;
}
.claims-page .cp-kicker--start::after,
.claims-page .cp-kicker.cp-kicker--start.elementor-widget-heading::after{ display: none; }
.cp-section-head{ text-align: center; max-width: 780px; margin: 0 auto 56px; }
.cp-section-head h2{ margin-bottom: 20px; }
.cp-section-head p{ color: var(--cp-body); font-size: 1.05em; max-width: 62ch; margin: 0 auto; }

/* ----------- Hero -----------
 * Photo is an Elementor Image widget (.cp-hero__photo) so editors can
 * swap it via the media library. The widget is positioned absolutely
 * inside the hero as a background layer, with a CSS-only navy wedge
 * (.cp-hero::after) clipping over its left side. */
.claims-page .cp-hero{
  position: relative;
  min-height: clamp(560px, 78vh, 760px);
  overflow: hidden;
  background: var(--cp-navy);
  isolation: isolate;
}

/* Hero photo Image widget — positioned absolutely as background layer */
.claims-page .cp-hero > .cp-hero__photo,
.claims-page .cp-hero .cp-hero__photo.elementor-widget-image{
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  left: 35% !important;
  width: auto !important;
  max-width: none !important;
  height: auto !important;
  z-index: 0;
  margin: 0 !important;
  padding: 0 !important;
}
.claims-page .cp-hero__photo .elementor-widget-container,
.claims-page .cp-hero__photo .elementor-image{
  width: 100%; height: 100%;
}
.claims-page .cp-hero__photo img{
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
  display: block;
  /* darken slightly so white text remains legible */
  filter: brightness(.65);
}

/* Navy wedge — CSS-only decorative overlay clipping over the left ~70% */
.claims-page .cp-hero::after{
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  width: auto !important;
  height: auto !important;
  z-index: 1 !important;
  background:
    radial-gradient(900px 540px at 15% 20%, rgba(253,55,67,.10), transparent 60%),
    radial-gradient(700px 480px at -10% 110%, rgba(255,255,255,.04), transparent 60%),
    linear-gradient(var(--cp-navy), var(--cp-navy)) !important;
  clip-path: polygon(0 0, 62% 0, 78% 100%, 0 100%) !important;
  opacity: 1 !important;
  display: block !important;
  pointer-events: none;
}

/* Mobile (≤ 768px): drop the diagonal wedge + photo so content gets the
   full width. Plain navy background with photo hidden.
   Also: stack the Quick Actions card BELOW the hero instead of overlapping
   it. On desktop the negative margin-top floats the card up over the hero
   bottom edge, but on mobile the hero meta column stacks vertically — the
   Email item ends up at the bottom of the hero and gets hidden by the
   overlapping card. */
@media (max-width: 768px){
  .claims-page .cp-hero{
    min-height: auto;
  }
  .claims-page .cp-hero > .cp-hero__photo{ display: none !important; }
  .claims-page .cp-hero::after{
    clip-path: none !important;
    /* keep the subtle red glow for visual interest */
  }
  .claims-page .cp-hero__content{
    padding-block-start: clamp(48px, 12vw, 80px) !important;
    padding-block-end: clamp(48px, 12vw, 80px) !important;
  }
  .claims-page .cp-quick-actions{
    margin-top: 0 !important;
    padding-block-start: 24px;
    padding-block-end: 24px;
  }
  /* Stack hero meta items vertically with some breathing room */
  .claims-page .cp-hero .cp-meta{
    flex-direction: column !important;
    gap: 18px !important;
  }
}
.cp-hero__content{
  position: relative; z-index: 2; max-width: 1240px; margin: 0 auto;
  padding: clamp(70px, 10vw, 130px) var(--cp-pad-x) clamp(140px, 14vw, 200px);
  color: #fff;
}
/* Elementor wraps widgets in nested divs; make sure widget wrappers
   inside the hero don't break the layered z-index. */
.cp-hero .elementor-widget,
.cp-hero .e-con-inner,
.cp-hero .e-con{ position: relative; z-index: 2; }
/* Heading & text colour overrides for Elementor inside hero */
.cp-hero .elementor-heading-title{ color: #fff; }
.cp-hero .elementor-widget-text-editor{ color: #dde3f1; }
.cp-crumbs{ display: flex; gap: 10px; align-items: center; color: #b9c1d6; font-size: .84em; margin-bottom: 30px; font-weight: 500; }
.cp-crumbs a{ color: #b9c1d6; }
.cp-crumbs a:hover{ color: #fff; }
.cp-crumbs svg{ width: 14px; height: 14px; opacity: .6; }
.cp-crumbs .cp-now{ color: #fff; }

.cp-hero h1{
  color: #fff; max-width: 13ch;
  opacity: 0; transform: translateY(14px);
  animation: cpRise .9s var(--cp-ease) .05s forwards;
}
.cp-hero h1 em{ font-style: normal; color: var(--cp-red); font-weight: 800; }
/* Hero lede paragraph — cap line length so it doesn't span the full hero.
   Elementor's `.e-con > .elementor-widget { max-width: 100% }` rule has
   higher specificity than `.cp-hero .cp-lede` (4 classes vs 2), so we
   need !important to win. */
.cp-hero .cp-lede,
.claims-page .cp-hero .cp-lede{
  margin-top: 22px;
  max-width: 46ch !important;
  color: #dde3f1;
  font-family: var(--cp-font-body);
  font-size: 15.36px !important;   /* match site body — px not rem because the
                                      theme has html.larger 72.5% shrinking root */
  font-weight: 200;
  line-height: 1.5;
  opacity: 0; transform: translateY(14px);
  animation: cpRise .9s var(--cp-ease) .25s forwards;
}
.cp-hero .cp-cta-row{
  margin-top: 38px; display: flex; gap: 14px; flex-wrap: wrap;
  opacity: 0; transform: translateY(14px);
  animation: cpRise .9s var(--cp-ease) .45s forwards;
}
.cp-hero .cp-meta{
  margin-top: 38px; display: flex; gap: 32px; flex-wrap: wrap; color: #dde3f1; font-size: .92em;
  opacity: 0; transform: translateY(14px);
  animation: cpRise .9s var(--cp-ease) .65s forwards;
}
.cp-hero .cp-meta strong{ display: block; font-weight: 800; color: #fff; font-size: 1.04em; letter-spacing: -.005em; margin-bottom: 2px; }
.cp-hero .cp-meta a{ color: #fff; }
.cp-hero .cp-meta .cp-dot{
  display: inline-block; width: 6px; height: 6px; border-radius: 50%;
  background: #46d18a; margin-right: 8px;
  box-shadow: 0 0 0 4px rgba(70,209,138,.18); vertical-align: middle;
}

@keyframes cpRise{ to{ opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce){
  .cp-hero h1, .cp-hero .cp-lede, .cp-hero .cp-cta-row, .cp-hero .cp-meta{ opacity: 1; transform: none; animation: none; }
}

/* ----------- Buttons (scoped) -----------
 * Only target the inner .elementor-button. The .cp-btn class lives on the
 * widget WRAPPER — styling it as a button directly would double up with
 * the styling on the inner anchor (two stacked pills). */
.claims-page .cp-btn{ display: inline-flex; }

/* ----------- Quick Actions ----------- */
.cp-quick-actions{ position: relative; margin-top: clamp(-110px, -10vw, -80px); z-index: 3; }
.cp-qa-card{
  background: #fff;
  box-shadow: 0 30px 80px -20px rgba(13,31,61,.22), 0 2px 8px rgba(13,31,61,.06);
  display: grid; grid-template-columns: repeat(4, 1fr);
}
.cp-qa-cell{
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  padding: 38px 24px 34px; text-align: center;
  color: var(--cp-ink); position: relative;
  transition: background .2s var(--cp-ease);
}
.cp-qa-cell + .cp-qa-cell::before{
  content: ""; position: absolute; left: 0; top: 24px; bottom: 24px; width: 1px; background: var(--cp-hairline);
}
.cp-qa-cell:hover{ background: #fbfbfc; color: var(--cp-red); }
.cp-qa-cell .cp-ico{
  width: 54px; height: 54px; color: var(--cp-red);
  display: flex; align-items: center; justify-content: center;
}
.cp-qa-cell .cp-ico svg{ width: 100%; height: 100%; stroke: currentColor; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.cp-qa-cell .cp-ttl{ font-weight: 800; color: var(--cp-ink); font-size: 1.04em; letter-spacing: -.005em; }
.cp-qa-cell .cp-sub{ font-size: .82em; color: var(--cp-muted); margin-top: -6px; }
.cp-qa-cell:hover .cp-ttl{ color: var(--cp-red); }

@media (max-width: 880px){
  .cp-qa-card{ grid-template-columns: repeat(2,1fr); }
  .cp-qa-cell:nth-child(3)::before{ display: none; }
  .cp-qa-cell:nth-child(3),
  .cp-qa-cell:nth-child(4){ border-top: 1px solid var(--cp-hairline); }
}
@media (max-width: 520px){
  .cp-qa-card{ grid-template-columns: 1fr; }
  .cp-qa-cell + .cp-qa-cell::before{ display: none; }
  .cp-qa-cell + .cp-qa-cell{ border-top: 1px solid var(--cp-hairline); }
}

/* ----------- Section ----------- */
.cp-section{ padding: var(--cp-section-y) 0; background: #fff; }
.cp-section--off{ background: var(--cp-paper-off); }

.cp-props{
  display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(30px, 4vw, 56px);
  margin-top: 20px;
}
@media (max-width: 880px){ .cp-props{ grid-template-columns: repeat(2,1fr); gap: 48px 32px; } }
@media (max-width: 520px){ .cp-props{ grid-template-columns: 1fr; } }
.cp-prop{ text-align: center; }
.cp-prop .cp-ico{
  width: 72px; height: 72px; color: var(--cp-red); margin: 0 auto 22px;
  display: flex; align-items: center; justify-content: center;
}
.cp-prop .cp-ico svg{ width: 100%; height: 100%; stroke: currentColor; fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.cp-prop h3{ margin-bottom: 10px; font-size: 1.18em; }
.cp-prop p{ font-size: .96em; color: var(--cp-body); max-width: 30ch; margin: 0 auto; }

/* ----------- Urgent band ----------- */
.cp-urgent{
  background: linear-gradient(95deg, var(--cp-red) 0%, var(--cp-red-deep) 100%);
  color: #fff;
}
.cp-urgent .cp-wrap{
  display: grid; grid-template-columns: auto 1fr auto; gap: 28px; align-items: center;
  /* Keep the horizontal padding from .cp-wrap so the contents don't sit
     flush against the viewport edge on narrow screens — the `padding: 28px 0`
     shorthand was wiping out the inherited horizontal padding. */
  padding-block: 28px;
  padding-inline: var(--cp-pad-x);
}
.cp-urgent .cp-ico{
  width: 48px; height: 48px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.14); border-radius: 50%;
}
.cp-urgent .cp-ico svg{ width: 24px; height: 24px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.cp-urgent .cp-text .cp-label{ font-size: .74em; letter-spacing: .32em; text-transform: uppercase; opacity: .86; font-weight: 700; }
.cp-urgent .cp-text .cp-name{ font-size: 1.06em; margin-top: 4px; font-weight: 600; }
.cp-urgent .cp-phone{
  font-size: clamp(20px, 2.2vw, 28px); font-weight: 800; letter-spacing: -.01em;
  color: #fff; padding-left: clamp(16px, 3vw, 36px); border-left: 1px solid rgba(255,255,255,.25);
}
.cp-urgent .cp-phone a{ color: inherit; }
@media (max-width: 680px){
  .cp-urgent .cp-wrap{ grid-template-columns: auto 1fr; }
  .cp-urgent .cp-phone{
    grid-column: 1 / -1; padding-left: 0;
    border-left: 0; border-top: 1px solid rgba(255,255,255,.25);
    padding-top: 18px; margin-top: 6px;
  }
}

/* ----------- Emergency contacts (Elementor Nested Tabs widget) -----------
 * Restyle .e-n-tabs to a sidebar (tab buttons left, content right) layout.
 * Tab heading bar becomes a 320px sidebar; tabs stack vertically.
 */
.claims-page .cp-tabs.e-n-tabs,
.claims-page .cp-tabs .e-n-tabs{
  display: grid;
  grid-template-columns: 320px 1fr;
  background: #fff;
  box-shadow: 0 20px 60px -24px rgba(13,31,61,.18), 0 1px 2px rgba(13,31,61,.04);
  margin-top: 20px;
  overflow: hidden;
}
@media (max-width: 820px){
  .claims-page .cp-tabs.e-n-tabs,
  .claims-page .cp-tabs .e-n-tabs{ grid-template-columns: 1fr; }
}

/* Tabs heading column (the tab buttons) */
.claims-page .cp-tabs .e-n-tabs-heading{
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;   /* tab buttons sit at top, not vertically centered */
  align-items: stretch !important;
  background: var(--cp-paper-off);
  padding: 18px 0;
  border-right: 1px solid var(--cp-hairline);
}
@media (max-width: 820px){
  .claims-page .cp-tabs .e-n-tabs-heading{
    flex-direction: row;
    overflow-x: auto;
    padding: 0;
    border-right: 0;
    border-bottom: 1px solid var(--cp-hairline);
  }
}

/* Individual tab button */
.claims-page .cp-tabs .e-n-tab-title{
  width: 100%;
  text-align: left;
  background: transparent;
  border: 0;
  cursor: pointer;
  padding: 20px 24px 20px 28px !important;
  display: flex;
  gap: 18px;
  align-items: center;
  color: var(--cp-ink) !important;
  font-family: var(--cp-font-body) !important;
  font-weight: 400;
  font-size: 15.36px;
  border-left: 3px solid transparent !important;
  transition: background .15s var(--cp-ease), color .15s var(--cp-ease), border-color .15s var(--cp-ease);
  line-height: 1.4;
}
.claims-page .cp-tabs .e-n-tab-title:hover{
  background: #fff !important;
  color: var(--cp-red) !important;
}
/* Elementor's default active tab uses a green/primary-coloured fill — override.
   Multiple selectors cover both attribute and class states. */
.claims-page .cp-tabs .e-n-tab-title[aria-selected="true"],
.claims-page .cp-tabs .e-n-tab-title.e-n-tab-title-active,
.claims-page .cp-tabs .e-n-tab-title[data-active="true"]{
  background: #fff !important;
  background-color: #fff !important;
  border-left-color: var(--cp-red) !important;
  color: var(--cp-ink) !important;
  box-shadow: none !important;
}
/* Wrappers / overlays Elementor may add for the active state */
.claims-page .cp-tabs .e-n-tab-title > *{ background: transparent !important; }
/* Elementor's tab-title-text sets its own font-size which collapses to the
   theme's html root (9.6px). Set it explicitly so the main label reads as a
   small heading. */
.claims-page .cp-tabs .e-n-tab-title-text{
  display: flex;
  flex-direction: column;
  line-height: 1.3;
  font-family: var(--cp-font-heading);
  font-size: 16px;
  font-weight: 600;
  color: var(--cp-ink);
}
.claims-page .cp-tabs .e-n-tab-title-text small{
  font-family: var(--cp-font-body);
  font-size: 13px;
  color: var(--cp-muted);
  font-weight: 400;
  letter-spacing: .02em;
  margin-top: 4px;
}
/* Tab icon (Elementor's icon control output) */
.claims-page .cp-tabs .e-n-tab-icon{ width: 34px; height: 34px; flex: none; color: var(--cp-red); }
.claims-page .cp-tabs .e-n-tab-icon svg{ width: 100%; height: 100%; fill: currentColor; }
@media (max-width: 820px){
  .claims-page .cp-tabs .e-n-tab-title{ flex: 1 0 auto; min-width: 200px; border-left: 0 !important; border-bottom: 3px solid transparent !important; }
  .claims-page .cp-tabs .e-n-tab-title[aria-selected="true"]{ border-bottom-color: var(--cp-red) !important; }
}

/* Tab content panels */
.claims-page .cp-tabs .e-n-tabs-content{
  padding: clamp(28px, 4vw, 48px);
}
.claims-page .cp-tabs .e-n-tabs-content > .e-con{
  padding: 0;
  --padding-block-start: 0; --padding-block-end: 0;
  --padding-inline-start: 0; --padding-inline-end: 0;
}
.claims-page .cp-tabs .cp-tab-content{
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* Contractor row — Elementor container with .cp-contractor class.
   Layout: info column (name + desc) on left, big phone number on right. */
.claims-page .cp-contractor{
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  padding: 22px 4px !important;
  border-top: 1px solid var(--cp-hairline);
}
.claims-page .cp-contractor:first-child{ border-top: 0; padding-top: 6px !important; }
.claims-page .cp-contractor__info{ flex: 1 1 60%; min-width: 0; }
/* Provider logo widget — sits on its own row above name/desc/phone.
   For row-direction cards (non-multi) the widget needs `flex: 0 0 100%`
   to force a wrap. For column-direction cards (cp-multi) the logo is
   already on its own row naturally — don't apply flex-basis 100% there
   because in column flex layouts flex-basis controls cross-axis HEIGHT
   and would squish the rest of the card.
   Capping by height (not width) keeps logos with different aspect ratios
   visually balanced — a wide horizontal logo and a square mark sit at the
   same optical weight. */
.claims-page .cp-contractor:not(.cp-multi) .cp-logo{
  flex: 0 0 100% !important;
  width: 100% !important;
  max-width: 100% !important;
}
.claims-page .cp-contractor .cp-logo .elementor-widget-container{
  width: auto;
  max-width: 120px;
}
.claims-page .cp-contractor .cp-logo img{
  display: block;
  width: auto;
  height: 36px;
  max-width: 120px;
  object-fit: contain;
}
.claims-page .cp-contractor .cp-name .elementor-heading-title{
  font-family: var(--cp-font-heading) !important;
  font-weight: 600 !important;
  color: var(--cp-ink) !important;
  font-size: 16px !important;
  letter-spacing: -.005em;
  margin-bottom: 4px;
  line-height: 1.3;
}
/* The sub-heading text-editor widget nests `widget-container > p`. Setting
   .88em on all three layers compounded down to ~10.5px — set a single
   absolute size on the leaf and leave the wrappers alone. */
.claims-page .cp-contractor .cp-desc,
.claims-page .cp-contractor .cp-desc .elementor-widget-container{
  margin: 0;
}
.claims-page .cp-contractor .cp-desc p{
  font-family: var(--cp-font-body);
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--cp-muted);
  margin: 0;
}
.claims-page .cp-contractor .cp-desc strong{ color: var(--cp-body); font-weight: 600; }
.claims-page .cp-contractor .cp-phone-display .elementor-heading-title{
  font-family: var(--cp-font-heading) !important;
  text-align: right;
  font-weight: 700 !important;
  color: var(--cp-navy) !important;
  font-size: 18px !important;
  letter-spacing: -.005em;
  white-space: nowrap;
  line-height: 1.2;
}
.claims-page .cp-contractor .cp-phone-display .elementor-heading-title a{ color: inherit; }
.claims-page .cp-contractor .cp-phone-display .elementor-heading-title a:hover{ color: var(--cp-red); }

/* Multi-contractor (e.g. C&M Build) — header + nested phone lines.
   IMPORTANT: flex-wrap:nowrap stops the second child wrapping into a
   new column (Elementor's container default is flex-wrap:wrap, which
   combined with flex-direction:column would push children sideways). */
.claims-page .cp-contractor.cp-multi{
  flex-direction: column !important;
  flex-wrap: nowrap !important;
  align-items: stretch;
  gap: 14px;
}
.claims-page .cp-contractor.cp-multi .cp-multi-lines{
  flex-wrap: nowrap !important;
}
.claims-page .cp-contractor.cp-multi .cp-multi-lines{
  display: flex;
  flex-direction: column;
}
.claims-page .cp-contractor.cp-multi .cp-multi-lines .cp-ln{
  display: flex !important;
  flex-direction: row !important;
  justify-content: space-between;
  align-items: baseline;
  gap: 18px;
  padding: 12px 0 !important;
  border-top: 1px dashed var(--cp-hairline);
}
.claims-page .cp-contractor.cp-multi .cp-multi-lines .cp-ln:first-child{ border-top: 0; padding-top: 4px !important; }
.claims-page .cp-contractor.cp-multi .cp-ln .cp-who-wrap,
.claims-page .cp-contractor.cp-multi .cp-ln .cp-who-wrap .elementor-widget-container,
.claims-page .cp-contractor.cp-multi .cp-ln .cp-who-wrap p{
  font-size: .96em;
  color: var(--cp-body);
  margin: 0;
  flex: 1 1 auto;
}
.claims-page .cp-contractor.cp-multi .cp-ln .cp-who-wrap strong{ color: var(--cp-ink); font-weight: 700; }
.claims-page .cp-contractor.cp-multi .cp-ln .cp-num .elementor-heading-title{
  font-family: var(--cp-font-heading) !important;
  font-weight: 700 !important;
  color: var(--cp-navy) !important;
  font-size: 17px !important;
  letter-spacing: -.005em;
  white-space: nowrap;
  line-height: 1.2;
}
.claims-page .cp-contractor.cp-multi .cp-ln .cp-num .elementor-heading-title a{ color: inherit; }
.cp-contractor.cp-multi .cp-multi-lines .cp-num{ font-weight: 800; color: var(--cp-navy); font-size: 1.25em; letter-spacing: -.005em; }
.cp-contractor.cp-multi .cp-multi-lines .cp-num a{ color: inherit; }

/* ----------- Team grid ----------- */
.cp-team-grid{
  display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 2.5vw, 36px);
  margin-top: 20px;
}
@media (max-width: 880px){ .cp-team-grid{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px){ .cp-team-grid{ grid-template-columns: 1fr; } }
.cp-person{ background: #fff; display: flex; flex-direction: column; }
.cp-person .cp-photo{
  /* Near-square frame matching adroit.com.au/locations/claims-team/ (400x390) */
  aspect-ratio: 400 / 390;
  position: relative; overflow: hidden;
}
.cp-person .cp-body{ padding: 22px 22px 26px; border-top: 3px solid var(--cp-red); }
.cp-person .cp-name{ font-weight: 700; color: var(--cp-ink); font-size: 1.18em; letter-spacing: -.005em; }
.cp-person .cp-role{ font-size: .78em; text-transform: uppercase; letter-spacing: .18em; color: var(--cp-red); font-weight: 700; margin-top: 8px; }
.cp-person .cp-meta{ margin-top: 16px; display: flex; flex-direction: column; gap: 6px; font-size: .94em; }
.cp-person .cp-meta a{ display: flex; gap: 10px; align-items: center; color: var(--cp-body); font-weight: 600; }
.cp-person .cp-meta a:hover{ color: var(--cp-red); }
.cp-person .cp-meta svg{ width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; color: var(--cp-red); flex: none; }

/* ----------- Testimonials ----------- */
.cp-testimonials{ position: relative; }
.cp-feature-quote{
  position: relative; max-width: 880px; margin: 0 auto;
  text-align: center; padding: 40px 20px 20px;
}
.cp-feature-quote .cp-mark{
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(160px, 24vw, 320px); line-height: 1;
  color: var(--cp-red); opacity: .13;
  position: absolute; top: -40px; left: 50%; transform: translateX(-50%);
  pointer-events: none; user-select: none;
}
.cp-feature-quote blockquote{
  position: relative; margin: 0;
  font-size: clamp(1.4em, 2.6vw, 2em);
  font-weight: 300; color: var(--cp-ink);
  line-height: 1.35; letter-spacing: -.01em;
}
.cp-feature-quote blockquote em{ font-style: normal; color: var(--cp-red); font-weight: 600; }
.cp-feature-quote cite{
  display: block; margin-top: 32px; font-style: normal;
  font-size: .78em; letter-spacing: .32em; text-transform: uppercase; color: var(--cp-muted); font-weight: 700;
}
.cp-feature-quote cite strong{ color: var(--cp-ink); font-weight: 800; letter-spacing: .32em; }

.cp-secondary-quotes{
  display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 2.5vw, 36px);
  margin-top: 64px; padding-top: 64px; border-top: 1px solid var(--cp-hairline);
}
@media (max-width: 820px){ .cp-secondary-quotes{ grid-template-columns: 1fr; } }
.cp-sq{ padding: 4px 8px; }
.cp-sq .cp-stars{ color: var(--cp-red); letter-spacing: .16em; font-size: .92em; margin-bottom: 14px; }
.cp-sq p{ color: var(--cp-ink); font-size: 1em; line-height: 1.5; margin-bottom: 18px; }
.cp-sq .cp-att{ font-size: .78em; letter-spacing: .18em; text-transform: uppercase; color: var(--cp-muted); font-weight: 700; }
.cp-sq .cp-att strong{ color: var(--cp-ink); display: block; letter-spacing: .18em; }

/* ----------- Contact block ----------- */
.cp-contact{ position: relative; overflow: hidden; background: var(--cp-paper-off); }
.cp-contact__wrap{
  position: relative; max-width: 1240px; margin: 0 auto;
  padding: var(--cp-section-y) var(--cp-pad-x);
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(30px, 5vw, 80px);
  align-items: start;
}
@media (max-width: 880px){ .cp-contact__wrap{ grid-template-columns: 1fr; } }
.cp-contact__left h2{ margin-bottom: 18px; }
.cp-contact__left .cp-lede{ font-size: 1.06em; color: var(--cp-body); max-width: 50ch; margin-bottom: 34px; }
.cp-contact-phone{
  background: #fff;
  padding: clamp(24px, 3vw, 40px);
  border-left: 4px solid var(--cp-red);
}
.cp-contact-phone .cp-label{ font-size: .74em; letter-spacing: .32em; text-transform: uppercase; color: var(--cp-muted); font-weight: 700; margin-bottom: 10px; }
.cp-contact-phone .cp-number{
  font-weight: 800; color: var(--cp-navy); letter-spacing: -.015em; line-height: 1;
}
.cp-contact-phone .cp-number a{ color: inherit; }
.cp-contact-phone .cp-number a:hover{ color: var(--cp-red); }
.cp-contact-phone .cp-hours{ margin-top: 18px; font-size: .94em; color: var(--cp-body); }
.cp-contact-phone .cp-hours .cp-dot{
  display: inline-block; width: 6px; height: 6px; border-radius: 50%;
  background: #46d18a; margin-right: 8px;
  box-shadow: 0 0 0 4px rgba(70,209,138,.18); vertical-align: middle;
}
.cp-contact-phone .cp-extras{ margin-top: 22px; padding-top: 22px; border-top: 1px solid var(--cp-hairline); display: grid; gap: 8px; font-size: .94em; }
.cp-contact-phone .cp-extras .cp-row{ display: flex; gap: 14px; align-items: baseline; }
.cp-contact-phone .cp-extras .cp-row .cp-k{ font-size: .74em; letter-spacing: .18em; text-transform: uppercase; color: var(--cp-muted); font-weight: 700; min-width: 90px; }
.cp-contact-phone .cp-extras .cp-row .cp-v{ color: var(--cp-ink); font-weight: 700; }

.cp-contact__right{
  background: var(--cp-navy); color: #fff; padding: clamp(28px, 4vw, 48px);
  position: relative; overflow: hidden;
}
/* Subtle red glow in the top-right corner of the navy contact panel.
   Elementor's `.e-con:before { left: 0; top: 0; bottom: 0 }` rule fills
   the whole container, so we have to override all four insets explicitly
   — otherwise `left: 0` wins and the box anchors to the top-LEFT instead
   of the top-RIGHT (LTR left-over-right precedence). */
.claims-page .cp-contact__right::before{
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
  bottom: auto !important;
  left: auto !important;
  width: 240px !important;
  height: 240px !important;
  background: radial-gradient(circle at 80% 20%, rgba(253,55,67,.22), transparent 70%) !important;
  pointer-events: none;
}
.cp-contact__right h3,
.cp-contact__right h3.elementor-heading-title{ color: #fff !important; font-size: 1.6em !important; margin-bottom: 14px; }
.cp-contact__right p,
.cp-contact__right .elementor-widget-text-editor{ color: #cfd5e7; margin-bottom: 24px; }

/* ----------- Nav recommendation card ----------- */
.cp-nav-rec{
  background: #fff;
  box-shadow: 0 20px 60px -24px rgba(13,31,61,.18);
  margin-top: clamp(40px, 6vw, 70px);
  position: relative;
}
.cp-nav-rec .cp-ribbon{
  position: absolute; top: -12px; left: 24px;
  background: var(--cp-red); color: #fff;
  font-size: .7em; letter-spacing: .24em; text-transform: uppercase; font-weight: 800;
  padding: 6px 12px;
}
.cp-nav-rec__inner{ padding: clamp(28px, 4vw, 48px); }
.cp-nav-rec h3{ font-size: 1.4em; margin-bottom: 10px; text-align: center; }
.cp-nav-rec p{ max-width: 60ch; margin: 0 auto 28px; text-align: center; color: var(--cp-body); font-size: .96em; }
.cp-nav-rec .cp-icons-row{
  display: grid; grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--cp-hairline);
}
@media (max-width: 680px){ .cp-nav-rec .cp-icons-row{ grid-template-columns: 1fr; } }
.cp-nav-rec .cp-icons-row > a{
  padding: 32px 16px; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  position: relative; color: var(--cp-ink);
  transition: background .15s var(--cp-ease);
  text-decoration: none;
}
.cp-nav-rec .cp-icons-row > a + a::before{
  content: ""; position: absolute; left: 0; top: 24px; bottom: 24px; width: 1px; background: var(--cp-hairline);
}
.cp-nav-rec .cp-icons-row > a:hover{ color: var(--cp-red); background: #fbfbfc; }
.cp-nav-rec .cp-icons-row .cp-ico{ width: 56px; height: 56px; color: var(--cp-red); }
.cp-nav-rec .cp-icons-row .cp-ico svg{ width: 100%; height: 100%; stroke: currentColor; fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.cp-nav-rec .cp-icons-row .cp-ttl{ font-weight: 800; font-size: 1.06em; }
.cp-nav-rec .cp-icons-row .cp-sub{ font-size: .84em; color: var(--cp-muted); }
@media (max-width: 680px){
  .cp-nav-rec .cp-icons-row > a + a::before{ display: none; }
  .cp-nav-rec .cp-icons-row > a + a{ border-top: 1px solid var(--cp-hairline); }
}

/* ----------- Reduce motion ----------- */
@media (prefers-reduced-motion: reduce){
  .claims-page *{
    animation-duration: .001s !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001s !important;
  }
}

/* ============================================================
   Elementor-aware overrides
   Each .cp-* class lands on an Elementor container (.e-con). Elementor
   resolves padding/min-height/max-width via CSS custom properties on
   that element (e.g. --padding-block-start). To win the cascade we set
   THOSE variables — not the physical properties — so our layout
   computes through Elementor's own pipeline.
   ============================================================ */

/* Widget reset — Elementor adds bottom margin / line-height defaults */
.claims-page .elementor-widget:not(:last-child){ margin-bottom: 0; }
.claims-page .elementor-widget-text-editor p{ margin: 0; }

/* Headings — reset Elementor's margin only; let our .cp-* rules set size/color.
   IMPORTANT: do NOT use `font: inherit` here — that shorthand resets font-size
   to the inherited body size and undoes our clamp() sizing on h1/h2. */
.claims-page .elementor-heading-title{ margin: 0; color: inherit; }
/* Team card name: rendered as <div> heading widget — restyle the inner */
.claims-page .cp-person .cp-name .elementor-heading-title{
  font-family: var(--cp-font-heading);
  font-size: 1.1em !important;
  font-weight: 600;
  color: var(--cp-ink);
  line-height: 1.22;
  letter-spacing: -.01em;
}
/* The Elementor heading wrapper sometimes inherits a global colour from the
   theme; force inherit from the hero context so red <em> still works. */
.claims-page .cp-hero h1.elementor-heading-title{ color: #fff; font-weight: 500 !important; }
.claims-page .cp-hero h1 em{ color: var(--cp-red); font-style: normal; font-weight: 600; }

/* Hero — needs min-height + position context for the wedge pseudo-elements */
.claims-page .cp-hero{
  --min-height: clamp(560px, 78vh, 760px);
  --max-width: 100%;
  --width: 100%;
  --content-width: 100%;
}

/* Hero inner content container — boxed and centered */
.claims-page .cp-hero__content{
  --max-width: 1240px;
  --width: 100%;
  --content-width: 1240px;
  --padding-block-start: clamp(70px, 10vw, 130px);
  --padding-block-end: clamp(140px, 14vw, 200px);
  --padding-inline-start: var(--cp-pad-x);
  --padding-inline-end: var(--cp-pad-x);
  --gap: 0;
  max-width: 1240px;
  margin-inline: auto;
}

/* Section padding via Elementor vars */
.claims-page .cp-section{
  --padding-block-start: var(--cp-section-y);
  --padding-block-end: var(--cp-section-y);
}

/* wrap (centered max-width container) */
.claims-page .cp-wrap{
  --max-width: 1240px;
  --width: 100%;
  --content-width: 1240px;
  --padding-inline-start: var(--cp-pad-x);
  --padding-inline-end: var(--cp-pad-x);
  max-width: 1240px;
  margin-inline: auto;
}

/* Section-head — centered, max-width, bottom margin.
   Use align-items: center on the flex column so each child (kicker, H2,
   subhead) shrinks to content width and centres horizontally. That way
   the Elementor edit handle hugs the actual content in the editor instead
   of sitting at the far left of an invisible 780px-wide wrapper. */
.claims-page .cp-section-head{
  --max-width: 780px;
  --width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-inline: auto;
  margin-bottom: 56px;
  text-align: center;
}
/* The subhead text-editor still needs room for the paragraph to flow.
   Give it width: 100% so it spans 780px and the inner <p> wraps naturally
   while centering via text-align. Elementor's Text Editor widget defaults
   the text alignment to left — force it back to centre here. */
.claims-page .cp-section-head > .elementor-widget-text-editor{
  width: 100%; max-width: 100%;
  text-align: center !important;
}
.claims-page .cp-section-head > .elementor-widget-text-editor p,
.claims-page .cp-section-head > .elementor-widget-text-editor .elementor-widget-container{
  text-align: center !important;
}
/* The subhead <p> has max-width: 62ch from the .cp-section-head p rule,
   but Elementor's own .elementor-widget-text-editor p sets margin: 0,
   which leaves the narrowed paragraph stuck to the left of the 780px
   wrapper. Restore the auto margins so it centres horizontally. */
.claims-page .cp-section-head .elementor-widget-text-editor p{
  margin-left: auto !important;
  margin-right: auto !important;
  max-width: 62ch;
}

/* Grid layouts — force display:grid because Elementor containers default to flex */
.claims-page .cp-props{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(30px, 4vw, 56px);
  margin-top: 20px;
}
@media (max-width: 880px){ .claims-page .cp-props{ grid-template-columns: repeat(2, 1fr); gap: 48px 32px; } }
@media (max-width: 520px){ .claims-page .cp-props{ grid-template-columns: 1fr; } }

.claims-page .cp-qa-card{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  --gap: 0;
}
@media (max-width: 880px){ .claims-page .cp-qa-card{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px){ .claims-page .cp-qa-card{ grid-template-columns: 1fr; } }

/* Team grid — edge-to-edge 3-column grid with hover overlay, matching the
   adroit.com.au/locations/claims-team/ Key Personnel pattern.
   Photo fills the card; name/role/contact slide in as a navy translucent
   overlay on hover. */
/* Claims team — horizontal scroll carousel: 3 cards visible at a time, scroll
   across to reveal the rest (client request). Cards are flex items sized to
   fit exactly 3 across the wrap; the row overflows horizontally with
   scroll-snap so each swipe lands a card flush to the left edge. */
.claims-page .cp-team-grid{
  --cp-team-gap: clamp(16px, 2vw, 28px);
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  gap: var(--cp-team-gap);
  --gap: var(--cp-team-gap);
  margin-top: 24px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 14px;            /* room for the scrollbar track */
  -webkit-overflow-scrolling: touch;
  scrollbar-color: var(--cp-red) var(--cp-hairline);
  scrollbar-width: thin;
}
.claims-page .cp-team-grid > .cp-person{
  flex: 0 0 calc((100% - 2 * var(--cp-team-gap)) / 3);
  scroll-snap-align: start;
}
/* Slim styled scrollbar signals the row scrolls (WebKit) */
.claims-page .cp-team-grid::-webkit-scrollbar{ height: 8px; }
.claims-page .cp-team-grid::-webkit-scrollbar-track{ background: var(--cp-hairline); border-radius: 999px; }
.claims-page .cp-team-grid::-webkit-scrollbar-thumb{ background: var(--cp-red); border-radius: 999px; }
/* Tablet: 2 cards across */
@media (max-width: 880px){
  .claims-page .cp-team-grid > .cp-person{ flex-basis: calc((100% - var(--cp-team-gap)) / 2); }
}
/* Mobile: ~1.2 cards so the scroll affordance is obvious */
@media (max-width: 520px){
  .claims-page .cp-team-grid > .cp-person{ flex-basis: 82%; }
}

/* Overlay matches adroit.com.au/locations/claims-team/ exactly:
   - rgba(13,31,61,0.8) navy
   - 30px padding
   - flex column, content anchored bottom-left
   - name in NB International 23/700 inherits the muted body grey
   - role + contact + "Find Out More" in Roboto 15/400 white */
.claims-page .cp-person{
  position: relative !important;
  display: block !important;
  overflow: hidden;
  background: #fff;
  cursor: pointer;
}
.claims-page .cp-person .cp-body{
  position: absolute !important;
  inset: 0;
  z-index: 2;
  display: flex !important;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
  padding: 30px !important;
  background: rgba(13, 31, 61, 0.8);
  color: #fff;
  opacity: 0;
  transition: opacity .25s var(--cp-ease);
  border-top: 0 !important;
  text-align: left;
}
.claims-page .cp-person:hover .cp-body,
.claims-page .cp-person:focus-within .cp-body{ opacity: 1; }
/* Name — match reference: NB International 23.04 / 700, muted body grey */
.claims-page .cp-person .cp-body .cp-name,
.claims-page .cp-person .cp-body .cp-name .elementor-heading-title{
  font-family: "NB International", Helvetica, Arial, sans-serif !important;
  font-size: 23.04px !important;
  font-weight: 700;
  color: rgb(255,255,255) !important;
  letter-spacing: normal;
  text-transform: none;
  line-height: 1.1;
  margin: 0 0 4px !important;
}
/* Role — match reference: Roboto 15.36 / 400, white */
.claims-page .cp-person .cp-body .cp-role,
.claims-page .cp-person .cp-body .cp-role .elementor-heading-title{
  font-family: Roboto, "NB International", Arial, sans-serif !important;
  font-size: 15.36px !important;
  font-weight: 400;
  color: #fff !important;
  text-transform: none;
  letter-spacing: 0;
  margin: 0 0 10px !important;
  line-height: 1.4;
}
/* Contact rows — phone + email — also white, Roboto 15.36 */
.claims-page .cp-person .cp-contact-list{ margin: 0 0 10px; }
.claims-page .cp-person .cp-contact-list .elementor-icon-list-items{
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.claims-page .cp-person .cp-contact-list .elementor-icon-list-item a,
.claims-page .cp-person .cp-contact-list .elementor-icon-list-text{
  font-family: Roboto, "NB International", Arial, sans-serif !important;
  font-size: 15.36px !important;
  font-weight: 400;
  color: #fff !important;
  line-height: 1.4;
}
.claims-page .cp-person .cp-contact-list .elementor-icon-list-item a:hover,
.claims-page .cp-person .cp-contact-list .elementor-icon-list-item:hover .elementor-icon-list-text{
  color: var(--cp-red) !important;
}
.claims-page .cp-person .cp-contact-list .elementor-icon-list-icon i,
.claims-page .cp-person .cp-meta svg{ color: #fff !important; }

/* "Find Out More" CTA — plain Roboto white, same size as role; bold to
   match the reference page's visual weight. No arrow, no uppercase. */
.claims-page .cp-person .cp-link{ margin-top: 0; }
.claims-page .cp-person .cp-link .elementor-button{
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  color: #fff !important;
  font-family: Roboto, "NB International", Arial, sans-serif !important;
  font-size: 15.36px !important;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
  text-decoration: none;
  line-height: 1.4;
}
.claims-page .cp-person .cp-link .elementor-button:hover{
  color: var(--cp-red) !important;
}
/* Whole-tile click-through: stretch the "Find out more" link across the
   entire person tile via an ::after overlay, so clicking anywhere on the card
   follows that link. We force the .cp-link widget chain to position:static so
   the ::after's containing block resolves to .cp-body (inset:0 over the full
   tile) rather than the widget itself. The phone/email links are lifted above
   the overlay so they stay individually clickable. */
.claims-page .cp-person .cp-link,
.claims-page .cp-person .cp-link > .elementor-widget-container{
  position: static !important;
}
.claims-page .cp-person .cp-link .elementor-button::after{
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}
.claims-page .cp-person .cp-contact-list .elementor-icon-list-item,
.claims-page .cp-person .cp-contact-list .elementor-icon-list-item a{
  position: relative;
  z-index: 2;
}

.claims-page .cp-secondary-quotes{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(20px, 2.5vw, 36px);
  margin-top: 64px;
  padding-top: 64px;
  border-top: 1px solid var(--cp-hairline);
}
@media (max-width: 820px){ .claims-page .cp-secondary-quotes{ grid-template-columns: 1fr; } }

/* Urgent band sits flush, no Elementor padding */
.claims-page .cp-urgent{ --padding-block-start: 0; --padding-block-end: 0; }
.claims-page .cp-urgent .cp-wrap{ padding-block: 28px; }

/* Contact two-column wrap */
.claims-page .cp-contact__wrap{
  --max-width: 1240px;
  --width: 100%;
  --content-width: 1240px;
  --padding-block-start: var(--cp-section-y);
  --padding-block-end: var(--cp-section-y);
  --padding-inline-start: var(--cp-pad-x);
  --padding-inline-end: var(--cp-pad-x);
  --gap: clamp(30px, 5vw, 80px);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(30px, 5vw, 80px);
  align-items: start;
  max-width: 1240px;
  margin-inline: auto;
}
@media (max-width: 880px){ .claims-page .cp-contact__wrap{ grid-template-columns: 1fr; } }

/* Tabs interactivity — display:none/block must beat Elementor's flex display */
.claims-page .cp-tab-panel{ display: none; }
.claims-page .cp-tab-panel.is-active{ display: block; }

/* ============================================================
   Native Elementor widget styling — give each widget type the
   right visual treatment in each context. Editors get real
   fields (text, link, icon, image) and the design holds.
   ============================================================ */

/* --- Button widget (Lodge a claim / 1300 MY ADROIT / Open form) --- */
.claims-page .cp-btn .elementor-button,
.claims-page .cp-btn .elementor-button-link{
  display: inline-flex !important;
  align-items: center;
  gap: 12px;
  padding: 18px 32px !important;
  border-radius: 999px !important;
  font-weight: 700;
  font-size: .98em;
  letter-spacing: .01em;
  text-decoration: none;
  border: 0;
  cursor: pointer;
  font-family: inherit;
  transition: background .2s var(--cp-ease), color .2s var(--cp-ease), transform .2s var(--cp-ease), box-shadow .2s var(--cp-ease);
}
.claims-page .cp-btn--red .elementor-button{ background: var(--cp-red) !important; color: #fff !important; }
.claims-page .cp-btn--red .elementor-button:hover{ background: var(--cp-red-deep) !important; color: #fff !important; transform: translateY(-1px); }
.claims-page .cp-btn--ghost-light .elementor-button{ background: transparent !important; color: #fff !important; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.4); }
.claims-page .cp-btn--ghost-light .elementor-button:hover{ box-shadow: inset 0 0 0 1.5px #fff; background: rgba(255,255,255,.06) !important; color: #fff !important; }
.claims-page .cp-btn--ghost-navy .elementor-button{ background: transparent !important; color: var(--cp-navy) !important; box-shadow: inset 0 0 0 1.5px rgba(13,31,61,.18); }
.claims-page .cp-btn .elementor-button-content-wrapper{ display: inline-flex; align-items: center; gap: 12px; }
.claims-page .cp-btn .elementor-button-text{ font-weight: 700; }
.claims-page .cp-btn .elementor-button-icon{ display: inline-flex; align-items: center; }
.claims-page .cp-btn .elementor-button-icon svg,
.claims-page .cp-btn .elementor-button-icon i{
  width: 16px !important; height: 16px !important;
  font-size: 16px !important;
  fill: currentColor;
}
.claims-page .cp-btn .e-font-icon-svg{ width: 16px; height: 16px; fill: currentColor; }

/* --- Quick action cell + prop cell (Image + Heading + Text inside container) --- */
.claims-page .cp-qa-cell,
.claims-page .cp-prop{
  --align-items: center;
  --justify-content: flex-start;
  align-items: center;
  text-align: center;
}
.claims-page .cp-qa-cell > a,
.claims-page .cp-qa-cell.e-con > a{ text-decoration: none; }

/* Icon image — quick action */
.claims-page .cp-qa-cell .cp-cell-icon img{
  width: 48px; height: 48px;
  object-fit: contain;
  display: block;
  margin: 0 auto 6px;
}
/* Icon image — prop */
.claims-page .cp-prop .cp-prop-icon img{
  width: 64px; height: 64px;
  object-fit: contain;
  display: block;
  margin: 0 auto 18px;
}
/* Image widget wrappers reset */
.claims-page .cp-cell-icon,
.claims-page .cp-prop-icon{ display: flex; justify-content: center; }
.claims-page .cp-cell-icon .elementor-widget-container,
.claims-page .cp-prop-icon .elementor-widget-container{ text-align: center; }
/* Team contact list icons */
.claims-page .cp-contact-list .elementor-icon-list-icon svg,
.claims-page .cp-contact-list .elementor-icon-list-icon i,
.claims-page .cp-contact-extras .elementor-icon-list-icon svg,
.claims-page .cp-contact-extras .elementor-icon-list-icon i{
  color: var(--cp-red) !important;
  fill: var(--cp-red) !important;
}
/* Button icon (white on red, white on transparent) */
.claims-page .cp-btn .elementor-button-icon svg,
.claims-page .cp-btn .elementor-button-icon i{
  fill: currentColor !important;
}
/* Urgent band triangle — white on red */
.claims-page .cp-urgent .cp-urgent-icon .elementor-icon svg,
.claims-page .cp-urgent .cp-urgent-icon .elementor-icon i{
  color: #fff !important;
  fill: #fff !important;
}

/* Quick Action cell — clickable, hover bg, dividing border */
.claims-page .cp-qa-cell{
  --padding-block-start: 38px;
  --padding-block-end: 34px;
  --padding-inline-start: 24px;
  --padding-inline-end: 24px;
  background: #fff;
  transition: background .2s var(--cp-ease);
  position: relative;
}
.claims-page .cp-qa-cell .cp-ttl .elementor-heading-title{ font-size: 1.04em !important; font-weight: 800; letter-spacing: -.005em; margin: 0; color: var(--cp-ink); }
.claims-page .cp-qa-cell .cp-sub{ font-size: .82em; color: var(--cp-muted); margin-top: 4px; }
.claims-page .cp-qa-cell .cp-sub p{ font-size: .82em; color: var(--cp-muted); margin: 0; }
.claims-page .cp-qa-cell:hover{ background: #fbfbfc; }
.claims-page .cp-qa-cell:hover .cp-ttl .elementor-heading-title,
.claims-page .cp-qa-cell:hover .cp-sub p{ color: var(--cp-red) !important; }
/* Whole-cell click-through: the title link is stretched across the entire
   quick-action cell (the container-level link does not render as an anchor in
   this Elementor setup). Force the title widget chain static so the ::after
   anchors to .cp-qa-cell (position:relative), covering icon + title + sub. */
.claims-page .cp-qa-cell{ cursor: pointer; }
.claims-page .cp-qa-cell .cp-ttl,
.claims-page .cp-qa-cell .cp-ttl > .elementor-widget-container{ position: static !important; }
.claims-page .cp-qa-cell .cp-ttl .elementor-heading-title a{ color: inherit; }
.claims-page .cp-qa-cell .cp-ttl .elementor-heading-title a::after{
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
}
/* Vertical dividers between cells (4-col on desktop) */
.claims-page .cp-qa-card > .cp-qa-cell + .cp-qa-cell::before{
  content: ""; position: absolute; left: 0; top: 24px; bottom: 24px; width: 1px; background: var(--cp-hairline);
}
/* White card wrap with shadow */
.claims-page .cp-qa-card{
  background: #fff;
  box-shadow: 0 30px 80px -20px rgba(13,31,61,.22), 0 2px 8px rgba(13,31,61,.06);
}

/* Prop cell heading + body */
.claims-page .cp-prop h3.elementor-heading-title{
  font-size: 1.18em !important; font-weight: 700;
  margin-bottom: 10px; color: var(--cp-ink);
  text-align: center;
}
/* Force the text-editor widget wrapper to full column width so the inner
   <p>'s `margin: 0 auto` has room to centre it. Otherwise the wrapper
   shrinks to content size and the paragraph sits left-aligned. */
.claims-page .cp-prop > .elementor-widget,
.claims-page .cp-qa-cell > .elementor-widget{ width: 100%; }
.claims-page .cp-prop .elementor-widget-text-editor p{
  font-size: .96em;
  color: var(--cp-body);
  max-width: 30ch;
  margin: 0 auto;
  text-align: center;
}
.claims-page .cp-qa-cell .cp-sub p{ margin: 0 auto; max-width: 24ch; text-align: center; }

/* --- Image widget (team photos) --- */
.claims-page .cp-person .cp-photo{ width: 100%; }
.claims-page .cp-person .cp-photo .elementor-widget-container{ width: 100%; height: 100%; }
.claims-page .cp-person .cp-photo img{
  width: 100%;
  /* Match the live claims-team page exactly: near-square frame, cover, centred.
     The staff photos use the same purpose-cropped ~990x1414 headshots the live
     team page serves, so a centred crop frames them consistently. */
  aspect-ratio: 400 / 390;
  object-fit: cover;
  object-position: 50% 50%;
  display: block;
}
/* Placeholder visual when no real photo has been uploaded yet — match
   Elementor's own placeholder asset path so editor-uploaded files (which
   may contain "placeholder" in their filename) aren't accidentally
   styled like the default. */
.claims-page .cp-person .cp-photo img[src*="/elementor/assets/images/placeholder"]{
  background: linear-gradient(135deg, #e8ebf3 0%, #d3d7e3 50%, #c5cad9 100%);
  object-fit: contain;
  padding: 30%;
  opacity: .6;
}

/* --- Icon List widget (team contact rows) --- */
.claims-page .cp-contact-list .elementor-icon-list-items{
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 6px;
}
.claims-page .cp-contact-list .elementor-icon-list-item{
  margin: 0;
}
.claims-page .cp-contact-list .elementor-icon-list-item a{
  display: flex; align-items: center; gap: 10px;
  color: var(--cp-body); font-weight: 600;
  font-size: .94em;
  text-decoration: none;
}
.claims-page .cp-contact-list .elementor-icon-list-item:hover a{ color: var(--cp-red); }
.claims-page .cp-contact-list .elementor-icon-list-icon i{ color: var(--cp-red); font-size: 15px; }

/* Contact extras inside contact-phone block */
.claims-page .cp-contact-extras{ margin-top: 22px; padding-top: 22px; border-top: 1px solid var(--cp-hairline); }
.claims-page .cp-contact-extras .elementor-icon-list-icon i{ color: var(--cp-red); }
.claims-page .cp-contact-extras .elementor-icon-list-text{ color: var(--cp-ink); font-weight: 700; font-size: .94em; }

/* --- Decorative big quote mark (Image widget) --- */
.claims-page .cp-mark{
  position: absolute !important;
  top: -20px; left: 50% !important;
  transform: translateX(-50%);
  pointer-events: none; user-select: none;
  width: auto !important;
  opacity: .13;
}
.claims-page .cp-mark img{
  width: clamp(160px, 22vw, 280px) !important;
  height: auto !important;
  display: block;
}
.claims-page .cp-feature-quote{ position: relative; }
.claims-page .cp-feature-quote .elementor-widget-text-editor{
  position: relative; z-index: 1;
  font-size: clamp(1.4em, 2.6vw, 2em);
  font-weight: 300;
  color: var(--cp-ink);
  line-height: 1.35;
  letter-spacing: -.01em;
  text-align: center;
}
.claims-page .cp-feature-quote blockquote{ margin: 0; }
.claims-page .cp-feature-quote blockquote em{ font-style: normal; color: var(--cp-red); font-weight: 600; }
.claims-page .cp-cite .elementor-heading-title{
  display: block;
  margin-top: 32px;
  font-style: normal;
  font-size: .78em !important;
  letter-spacing: .32em;
  text-transform: uppercase;
  color: var(--cp-muted) !important;
  font-weight: 700;
  text-align: center;
}
.claims-page .cp-cite .elementor-heading-title strong{ color: var(--cp-ink); font-weight: 800; }

/* Urgent band — Image widget for triangle, sit inside a circular badge */
.claims-page .cp-urgent .cp-urgent-icon{
  width: 48px; height: 48px;
  background: rgba(255,255,255,.14); border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  flex: none;
}
.claims-page .cp-urgent .cp-urgent-icon .elementor-widget-container{ display: flex; align-items: center; justify-content: center; }
.claims-page .cp-urgent .cp-urgent-icon img{ width: 24px; height: 24px; display: block; }

/* Urgent phone heading — type styling only. The dividing border + padding
   live on the WRAPPER (.cp-phone). Putting border-left here too made two
   stacked dividers ─ one from the wrapper, one from the inner heading. */
.claims-page .cp-urgent .cp-phone .elementor-heading-title{
  font-size: clamp(20px, 2.2vw, 28px) !important;
  font-weight: 800; letter-spacing: -.01em;
  color: #fff !important;
  line-height: 1;
}
.claims-page .cp-urgent .cp-phone .elementor-heading-title a{ color: inherit; }
.claims-page .cp-urgent .cp-wrap{ align-items: center; }

/* Contact phone block — heading widget for the big number. Sized to sit
   between H1 and H2 so it reads as a strong call-to-action without
   overflowing its card. */
.claims-page .cp-contact-phone .cp-number .elementor-heading-title{
  font-family: var(--cp-font-heading) !important;
  font-size: clamp(28px, 2.6vw, 36px) !important;
  font-weight: 700;
  color: var(--cp-navy) !important;
  letter-spacing: -.01em;
  line-height: 1.1;
}
.claims-page .cp-contact-phone .cp-number .elementor-heading-title a{ color: inherit; }

/* Star ratings — Elementor Star Rating widget. Force the Unicode ★ glyph
   via CSS so the stars render regardless of which `star_style` Elementor
   picks (the FontAwesome variant relies on FA being enqueued, which it
   isn't unless another widget on the page triggers it). */
.claims-page .cp-sq .cp-stars{ margin-bottom: 14px; }
.claims-page .cp-sq .cp-stars .elementor-star-rating{ justify-content: flex-start; gap: 2px; }
.claims-page .cp-sq .cp-stars .elementor-star-rating > i::before{
  color: var(--cp-red);
  font-size: 18px;
}
/* Each `<i>` element contains a private-use-area eicons character (U+E933)
   as its actual text node. Without the eicons font's PUA glyph it renders
   as a tofu box next to our ::before star — make the `i`'s own text
   invisible so only our ::before glyph shows. */
.claims-page .cp-sq .cp-stars .elementor-star-rating > i{
  color: transparent !important;
  font-size: 0 !important;
}
/* The ::before still needs visible size — restore it explicitly because
   font-size: 0 on the parent would otherwise zero it via inheritance. */
.claims-page .cp-sq .cp-stars .elementor-star-rating > i::before{
  font-size: 18px !important;
}
/* Elementor's default `.elementor-star-rating i::before` rule is built for
   FontAwesome glyphs and sets `position: absolute; display: block; overflow:
   hidden; width: <n>%` so it can mask half-stars by clipping width. We swap
   the glyph for the Unicode ★ and reset all of that so the character renders
   inline at its natural width. */
.claims-page .cp-sq .cp-stars .elementor-star-rating i:not(.elementor-star-empty)::before,
.claims-page .cp-sq .cp-stars .elementor-star-rating i.elementor-star-full::before{
  content: "\2605" !important;       /* ★ — Black Star (U+2605) */
  font-family: Helvetica, Arial, "Lucida Sans Unicode", "Segoe UI Symbol", sans-serif !important;
  font-weight: normal;
  display: inline !important;
  position: static !important;
  width: auto !important;
  height: auto !important;
  overflow: visible !important;
  letter-spacing: 0 !important;
}
.claims-page .cp-sq .cp-stars .elementor-star-rating i.elementor-star-empty::before{
  content: "\2606" !important;       /* ☆ — White Star (U+2606) */
  font-family: Helvetica, Arial, "Lucida Sans Unicode", "Segoe UI Symbol", sans-serif !important;
  color: rgba(253, 55, 67, .25);
  display: inline !important;
  position: static !important;
  width: auto !important;
  height: auto !important;
  overflow: visible !important;
  letter-spacing: 0 !important;
}
/* Reset Elementor's `i` sizing so the static ::before drives layout. */
.claims-page .cp-sq .cp-stars .elementor-star-rating i,
.claims-page .cp-sq .cp-stars .elementor-star-rating i.elementor-star-full,
.claims-page .cp-sq .cp-stars .elementor-star-rating i.elementor-star-empty{
  width: auto !important;
  height: auto !important;
  overflow: visible !important;
  letter-spacing: 0 !important;
}

/* Secondary quote text — extra space before the attribution */
.claims-page .cp-sq .elementor-widget-text-editor{ margin-bottom: 20px; }
.claims-page .cp-sq .elementor-widget-text-editor p{ font-size: 15.36px; line-height: 1.5; color: var(--cp-ink); }

/* Attribution: client name on its own line in navy, company below in muted.
   Bumped from .78em / 13px to a readable 14px and given proper line spacing. */
.claims-page .cp-sq .cp-att .elementor-heading-title{
  font-family: var(--cp-font-ui);
  font-size: 14px !important;
  line-height: 1.6;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--cp-muted) !important;
  font-weight: 700;
}
.claims-page .cp-sq .cp-att .elementor-heading-title strong{
  color: var(--cp-ink);
  display: block;
  letter-spacing: .18em;
  margin-bottom: 4px;       /* breathing room between CLIENT NAME and COMPANY */
}

/* Team role heading — absolute px so it doesn't double-em (the .cp-role
   wrapper at line 617 already drops to .78em, which then compounded with
   another .78em on the heading-title down to ~9.3px). */
.claims-page .cp-person .cp-role{ margin-bottom: 20px; font-size: 1em; }
.claims-page .cp-person .cp-role .elementor-heading-title{
  font-family: var(--cp-font-ui);
  font-size: 12px !important;
  text-transform: uppercase;
  letter-spacing: .18em;
  color: var(--cp-red) !important;
  font-weight: 700;
  margin-top: 8px;
}

/* ----------- Hide theme chrome that we don't want on the Claims template ----------- */
/* The default page.php renders a banner + share box even on Elementor pages.
   The Claims template bypasses page.php entirely (no banner / share / sidebar),
   so this block is just a belt-and-braces fallback in case someone applies the
   `.claims-page` markup on a page using the default page.php template. We key
   off the body class WordPress adds automatically for custom templates rather
   than a hard-coded page ID. */
body.page-template-page-claims article > header.page-header,
body.page-template-page-claims .utility-share,
body.page-template-page-claims .utility-share-wrap{ display: none !important; }
body.page-template-page-claims main#page > article > section.page-body > .container{ padding: 0 !important; max-width: none !important; }
body.page-template-page-claims main#page > article > section.page-body .page-content{ width: 100% !important; max-width: none !important; }
body.page-template-page-claims main#page > article > section.page-body .page-aside{ display: none !important; }

/* Hide the global "Client Tools" header CTA on the Claims page (client request).
   The button is the lone red pill in the main nav (a.btn-red inside nav#menu). */
body.page-template-page-claims #utility-bar nav#menu a.btn-red{ display: none !important; }