/* Crosson Insurance — hero and top-of-page section family.
   Patterns: 10-hero-home, 11-hero-service, 12-hero-page, 12-hero-title, 13-hero-dark,
   20-process-band, 21-coverage-tiles, 22-why-choose-us, 23-reviews-carousel, 24-stats-band.
   Reproduces the inline styles of design-canvas/site-full at ae701e0 as classes. Tokens only. */

/* ---- token candidates (values the target uses with no token yet) ---- */
:root{
  --cr-why-img-h:634px; /* CANDIDATE: the target's height attribute wins over aspect-ratio (parity) */
  --cr-gap-4:4px;                 /* CANDIDATE: tick margin-left, .cdots margin (reviews) */
  --cr-gap-6:6px;                 /* CANDIDATE: tile link padding-top (coverage-tiles) */
  --cr-gap-8:8px;                 /* CANDIDATE: link label gap, review name column gap (coverage-tiles, reviews) */
  --cr-gap-10:10px;               /* CANDIDATE: button icon gap, hero trust row gap (hero-home, process-band, why-choose-us) */
  --cr-gap-12:12px;               /* CANDIDATE: hero CTA gap, card stack gap, check-list gap (hero-*, process-band, coverage-tiles, why-choose-us) */
  --cr-gap-14:14px;               /* CANDIDATE: section-head gap, avatar row gap (coverage-tiles, reviews) */
  --cr-gap-16:16px;               /* CANDIDATE: review card stack gap (reviews) */
  --cr-gap-20:20px;               /* CANDIDATE: why-choose-us text column gap (why-choose-us) */
  --cr-badge-pad:7px 16px;        /* CANDIDATE: hero badge pill padding (hero-home, hero-service, hero-page) */
  --cr-check-nudge:5px;           /* CANDIDATE: check icon margin-top optical nudge (hero-home, why-choose-us) */
  --cr-icon-arrow:16px;           /* CANDIDATE: arrow icon in buttons and links (process-band, coverage-tiles, why-choose-us) */
  --cr-icon-check:18px;           /* CANDIDATE: hero trust check icon (hero-home) */
  --cr-icon-check-lg:20px;        /* CANDIDATE: why-choose-us check icon (why-choose-us) */
  --cr-icon-cnav:18px;            /* CANDIDATE: carousel prev/next chevron (reviews) */
  --cr-track-badge:0.08em;        /* CANDIDATE: hero badge letter-spacing (hero-*) */
  --cr-track-h1:-0.03em;          /* CANDIDATE: h1 letter-spacing (hero-*, hero-title) */
  --cr-track-h3:-0.01em;          /* CANDIDATE: card h3 letter-spacing (process-band, coverage-tiles) */
  --cr-glass-55:rgba(255,255,255,0.55); /* CANDIDATE: ghost button border on photo hero (hero-home, hero-service) */
  --cr-glass-85:rgba(255,255,255,0.85); /* CANDIDATE: process band eyebrow (process-band) */
  --cr-glass-86:rgba(255,255,255,0.86); /* CANDIDATE: hero lede + trust text on dark (hero-home, hero-service, hero-dark) */
  --cr-glass-88:rgba(255,255,255,0.88); /* CANDIDATE: process band lede (process-band) */
  --cr-portrait-pos:50% 32%;      /* CANDIDATE: family photo object-position (why-choose-us) */
  --cr-arrow-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='currentColor' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8h9'/%3E%3Cpath d='M8.5 4.5 12 8l-3.5 3.5'/%3E%3C/svg%3E"); /* CANDIDATE: the target's 16px arrow path as a mask; colour comes from currentColor of the button (process-band, why-choose-us) */
}

/* =====================================================================
   Shared pieces used by more than one pattern in this family
   ===================================================================== */

/* Section shell: full bleed, content capped by .wrap (style.css). */
.cr-hero-home, .cr-hero-service { position:relative; overflow:hidden; background:var(--ink); min-height:var(--hero-min);
  display:flex; align-items:center; padding:var(--pad-hero) var(--pad-h); }
.cr-hero-page { padding:var(--pad-hero) var(--pad-h); }
.cr-hero-dark { background:var(--ink); color:var(--on-dark); padding:var(--pad-hero) var(--pad-h); --link-hover:var(--on-dark); }
.cr-hero-title { background:var(--page); padding:var(--pad-std) var(--pad-h); }
.cr-process { background:var(--accent); padding:var(--pad-std) var(--pad-h); }
.cr-tiles, .cr-reviews { background:var(--page); padding:var(--pad-std) var(--pad-h); }
.cr-why, .cr-stats { background:var(--surface); padding:var(--pad-std) var(--pad-h); }
.cr-reviews { scroll-margin-top:var(--scroll-mt); }

/* Photo hero layers: still (z0) -> videos (z0, z1 when .on) -> gradient (z1) -> .wrap (z2). */
.cr-hero-home > .wrap, .cr-hero-service > .wrap, .cr-hero-page > .wrap { position:relative; z-index:2; }
.cr-hero-still { position:absolute; inset:0; margin:0; z-index:0; }
.wp-block-image.cr-hero-still img { display:block; width:100%; height:100%; object-fit:cover; }
.cr-hero-home::after, .cr-hero-service::after { content:""; position:absolute; inset:0; background:var(--hero-grad); z-index:1; pointer-events:none; }

/* Hero content column (the target's data-left column). */
.cr-hero-body { display:flex; flex-direction:column; gap:var(--gap-hero); width:100%; }
.cr-hero-badge { border-radius:var(--r-btn); padding:var(--cr-badge-pad); font-size:var(--fs-hero-badge); font-weight:var(--w-semi);
  letter-spacing:var(--cr-track-badge); text-transform:uppercase; align-self:flex-start; }
.cr-hero-home .cr-hero-badge, .cr-hero-service .cr-hero-badge { background:var(--glass-16); color:var(--on-dark); }
.cr-hero-page .cr-hero-badge { background:var(--tint); color:var(--accent-ink); }
.cr-hero-h1 { --mw:17ch; font-family:var(--display); font-size:var(--fs-h1); font-weight:var(--w-black); line-height:var(--lh-h1);
  letter-spacing:var(--cr-track-h1); overflow-wrap:break-word; text-wrap:balance; }
.cr-hero-home .cr-hero-h1, .cr-hero-service .cr-hero-h1, .cr-hero-dark .cr-hero-h1 { color:var(--on-dark); }
.cr-hero-page .cr-hero-h1, .cr-hero-title .cr-hero-h1 { color:var(--text); }
.cr-hero-lede { --mw:52ch; font-size:var(--fs-hero); line-height:var(--lh-lead); text-wrap:pretty; }
.cr-hero-home .cr-hero-lede, .cr-hero-service .cr-hero-lede { color:var(--cr-glass-86); }
.cr-hero-page .cr-hero-lede { color:var(--muted); }

/* Hero CTAs: core/buttons wrapper is the flex row; each core/button wrapper div carries the pill. */
.wp-block-buttons.cr-hero-cta { display:flex; gap:var(--cr-gap-12); flex-wrap:wrap; }
.cr-hero-home .btn-ghost, .cr-hero-service .btn-ghost { --ghost-hover-bg:var(--glass-16); }

/* Hero trust rows (homepage). .hero-trust ordering lives in style.css. */
.cr-hero-trust-row { display:flex; align-items:center; gap:var(--cr-gap-10); font-size:var(--fs-hero); font-weight:var(--w-semi); color:var(--cr-glass-86); }
.cr-hero-trust-row p { font-size:inherit; font-weight:inherit; color:inherit; line-height:inherit; }
.cr-hero-trust-row > .cr-check, .cr-check-row > .cr-check { flex:none; margin-top:var(--cr-check-nudge); width:var(--cr-icon-check); height:var(--cr-icon-check); display:block; }

/* Two-clip video: .herovid/.herovid.on in style.css; the class only names them for crosson.js. */

/* Centred heroes (Contact/Blogs title band, Answer Engine dark). */
.cr-hero-title-body { display:flex; flex-direction:column; align-items:center; text-align:center; }
.cr-hero-title .cr-hero-h1 { --mw:24ch; }
.cr-hero-dark-body { display:flex; flex-direction:column; gap:var(--gap-hero); align-items:center; text-align:center; }
.cr-hero-dark .cr-hero-h1 { --mw:18ch; }
.cr-hero-dark .cr-hero-lede { --mw:62ch; font-size:var(--fs-lead); color:var(--cr-glass-86); }

/* Eyebrow, section head, h2, h3, body: the target's h()/p()/eyebrow()/sechead() helpers. */
.cr-eyebrow { font-size:var(--fs-small); font-weight:var(--w-semi); line-height:var(--lh-small); letter-spacing:var(--track-eyebrow); text-transform:uppercase; color:var(--accent-ink); }
.cr-hero-dark .cr-eyebrow { color:var(--accent-hi); }
.wp-block-group.cr-sechead { display:flex; flex-direction:column; gap:var(--cr-gap-14); margin-bottom:var(--sechead-mb); }
.cr-h2 { --mw:22ch; font-family:var(--display); font-size:var(--fs-h2); font-weight:var(--w-black); line-height:var(--lh-h2); letter-spacing:var(--track-tight); color:var(--text); overflow-wrap:break-word; text-wrap:balance; }
.cr-lede { --mw:58ch; font-size:var(--fs-lead); line-height:var(--lh-lead); color:var(--muted); text-wrap:pretty; }
.cr-card-h { font-family:var(--display); font-size:var(--fs-card-h); font-weight:var(--w-bold); line-height:var(--lh-h3); letter-spacing:var(--cr-track-h3); color:var(--text); overflow-wrap:break-word; text-wrap:balance; }
.cr-body { font-size:var(--fs-body); line-height:var(--lh-body); color:var(--muted); text-wrap:pretty; }

/* Buttons. The pill is painted on the block wrapper (where className lands) so style.css's
   .btn-primary:hover / .btn-ghost:hover apply; the inner link is transparent and only lays out. */
.wp-block-button.btn { border-radius:var(--r-btn); }
.wp-block-button.btn > .wp-block-button__link { background:transparent; border:0; border-radius:var(--r-btn); color:inherit; font-family:var(--sans);
  font-weight:var(--w-semi); line-height:1; display:inline-flex; align-items:center; gap:var(--cr-gap-10); white-space:nowrap; text-decoration:none; }
.wp-block-button.btn-primary { background:var(--accent); color:var(--on-dark); }
.wp-block-button.btn-ghost { background:transparent; color:var(--on-dark); border:1px solid var(--cr-glass-55); }
.cr-btn-hero > .wp-block-button__link { padding:var(--btn-pad); font-size:var(--fs-hero); }
.cr-btn-hero.btn-ghost > .wp-block-button__link { padding:var(--btn-pad-ghost); }
.wp-block-button.cr-btn-ondark { background:var(--on-dark); color:var(--ink); border:0; }
.cr-btn-ondark > .wp-block-button__link { padding:var(--btn-pad-md); font-size:var(--fs-ui); }
.cr-btn-sm > .wp-block-button__link { padding:var(--btn-pad-sm); font-size:var(--fs-ui); box-sizing:border-box; }
.cr-btn-arrow > .wp-block-button__link::after { content:""; flex:none; width:var(--cr-icon-arrow); height:var(--cr-icon-arrow); background:currentColor;
  -webkit-mask:var(--cr-arrow-mask) center / contain no-repeat; mask:var(--cr-arrow-mask) center / contain no-repeat; }

/* Arrow-only SVG inside .link rows (coverage tiles). */
.cr-arrow { flex:none; width:var(--cr-icon-arrow); height:var(--cr-icon-arrow); }

/* =====================================================================
   20 Process band
   ===================================================================== */
.cr-process .proc-head { display:flex; flex-direction:column; gap:var(--cr-gap-12); margin-bottom:var(--sechead-mb); }
.cr-process .cr-eyebrow { color:var(--cr-glass-85); }
.cr-process .cr-h2 { color:var(--on-dark); }
.cr-process .cr-lede { --mw:56ch; color:var(--cr-glass-88); }
.cr-step { background:var(--page); border-radius:var(--r-card); padding:var(--pad-step); box-shadow:var(--shadow); display:flex; flex-direction:column; gap:var(--cr-gap-12); }
.cr-step-num { font-family:var(--display); font-size:var(--fs-num); font-weight:var(--w-black); line-height:1; color:var(--accent-ink); }
.cr-step .cr-body { --mw:38ch; }
.wp-block-buttons.proc-cta { display:flex; padding-top:var(--proc-pt); }

/* =====================================================================
   21 Coverage tiles
   ===================================================================== */
.cr-tile { background:var(--page); border:1px solid var(--border); border-radius:var(--r-card); padding:var(--pad-card); box-shadow:var(--shadow);
  display:flex; flex-direction:column; gap:var(--cr-gap-12); color:var(--text); }
.cr-tile-ico { width:var(--icon-w); height:auto; display:block; }
.cr-tile .cr-body { --mw:36ch; }
.cr-tile > .cr-tile-link { color:var(--accent-ink); font-size:var(--fs-ui); font-weight:var(--w-semi); display:inline-flex; align-items:center; gap:var(--cr-gap-8); margin-top:auto; padding-top:var(--cr-gap-6); }
.cr-tile-link p { font-size:inherit; font-weight:inherit; color:inherit; }
.cr-tile-link a { color:inherit; }
/* Stretched link: the label anchor covers the whole tile, so the card is clickable like the target's <a class="card card-link">. */
.cr-tile-link a::after { content:""; position:absolute; inset:0; z-index:1; }

/* =====================================================================
   22 Why choose us
   ===================================================================== */
.cr-why-grid { --cols:minmax(0,1fr) minmax(0,1.3fr); --ai:center; }
.cr-why-img { margin:0; display:flex; flex-direction:column; gap:var(--cr-gap-12); }
.wp-block-image.cr-why-img img { display:block; width:100%; height:var(--cr-why-img-h); aspect-ratio:3/4; object-fit:cover; object-position:var(--cr-portrait-pos); border-radius:var(--r-card); box-shadow:var(--shadow); }
.cr-why-img .wp-element-caption { margin:0; font-size:var(--fs-caption); line-height:var(--lh-small); color:var(--muted); text-align:left; }
.cr-why-text { display:flex; flex-direction:column; gap:var(--cr-gap-20); }
.cr-why-text .cr-h2 { --mw:20ch; }
.cr-why-p { --mw:62ch; font-size:var(--fs-why); line-height:var(--lh-lead); color:var(--muted); text-wrap:pretty; }
.cr-checks { display:flex; flex-direction:column; gap:var(--cr-gap-12); }
.cr-check-row { display:flex; align-items:flex-start; gap:var(--cr-gap-12); font-size:var(--fs-check); line-height:var(--lh-body); color:var(--text); }
.cr-check-row p { font-size:inherit; line-height:inherit; color:inherit; }
.cr-check-row .cr-check { width:var(--cr-icon-check-lg); height:var(--cr-icon-check-lg); }
.wp-block-buttons.cr-why-cta { display:flex; }

/* =====================================================================
   23 Reviews carousel (.carousel/.ctrack/.cslide/.cctl/.cnav/.cdot in style.css)
   ===================================================================== */
.cr-rev-card { background:var(--surface); border-radius:var(--r-card); padding:var(--pad-card-lg); display:flex; flex-direction:column; gap:var(--cr-gap-16); }
.cr-rev-head { display:flex; flex-direction:column; gap:var(--cr-gap-12); }
.cr-rev-who { display:flex; align-items:center; gap:var(--cr-gap-14); }
.cr-avatar { width:var(--avatar); height:var(--avatar); flex:none; border-radius:50%; color:var(--on-dark); display:flex; align-items:center; justify-content:center;
  font-family:var(--display); font-size:var(--fs-lead); font-weight:var(--w-bold); line-height:1; }
.cr-avatar-accent { background:var(--accent-ink); }
.cr-avatar-ink { background:var(--ink); }
.cr-rev-name { display:flex; flex-direction:column; gap:2px; min-width:0; }
.cr-rev-name-p { font-size:var(--fs-body); line-height:var(--lh-ui); font-weight:var(--w-bold); color:var(--text); }
.cr-rev-meta { font-size:var(--fs-small); line-height:var(--lh-small); color:var(--muted); }
.cr-rev-gmark { margin-left:auto; padding-left:var(--cr-gap-12); }
.cr-rev-gmark svg { width:var(--gmark); height:var(--gmark); flex:none; }
.cr-rev-rating { display:flex; align-items:center; gap:var(--gap-star); }
.cr-stars { display:flex; gap:var(--gap-star); }
.cr-star { width:var(--star); height:var(--star); display:block; flex:none; }
.cr-tick { width:var(--tick); height:var(--tick); flex:none; margin-left:var(--cr-gap-4); }
.cr-rev-result { display:flex; align-items:center; }
.cr-rev-fig { display:flex; flex-direction:column; gap:var(--gap-stat-cell); }
.cr-rev-quote { font-size:var(--fs-quote-card); line-height:var(--lh-body); color:var(--text); }
.cr-reviews .cnav svg { width:var(--cr-icon-cnav); height:var(--cr-icon-cnav); }

/* =====================================================================
   24 Stats band
   ===================================================================== */
.cr-statgrid { --cols:repeat(3,minmax(0,1fr)); }
.cr-stat { display:flex; flex-direction:column; gap:var(--gap-stat-cell); }
.cr-stat-value { font-family:var(--display); font-size:var(--fs-stat); font-weight:var(--w-bold); line-height:var(--lh-h2); letter-spacing:var(--track-tight); color:var(--text); overflow-wrap:anywhere; }
.cr-stat-value.cr-countup { font-variant-numeric:tabular-nums; }
.cr-stat-label { font-size:var(--fs-body); line-height:var(--lh-body); color:var(--muted); }

/* =====================================================================
   Mobile (everything else in this family regroups through style.css tokens and classes)
   ===================================================================== */
@media (max-width:767px) {
  .wp-block-image.cr-why-img img { aspect-ratio:4/3; }
}