/**
 * @file
 * Contractor-accountants directory tier — the ContractorUK "ck2" house kit.
 *
 * Lifted from the live directory hub (/directory/contractor_accountants.html),
 * which carries the canonical kit inline, so these seven stage pages are
 * self-sufficient and land in the same visual language: navy #1f2c3d + leaf
 * green #82b02b, bold sans with tabular figures, white cards on #f4f6f9,
 * hairline #dde4ec borders, 10–16px radii. Only the primitives these pages
 * actually use were kept (no inputs, sliders, readouts, segmented controls,
 * no legacy ck- or thp- compatibility layers, no toast). Nothing new was
 * invented; the two additions are documented where they appear (.acc-note
 * small print, .acc-rank rank chip).
 *
 * SCOPING: every rule is scoped under .ck2 deliberately. Module CSS loads
 * BEFORE theme CSS in Drupal's cascade, so a bare `.ck2-btn` would lose a
 * specificity tie to any theme `.btn`-style rule. Two classes always win.
 *
 * HORIZONTAL SCROLL IS A DEFECT. The guards, all of them deliberate:
 *   - no fixed pixel width on any container (max-width only);
 *   - no 100vw anywhere (it includes the scrollbar);
 *   - box-sizing:border-box on everything inside .ck2;
 *   - min-width:0 on every grid/flex child that holds text;
 *   - overflow-wrap:anywhere on every cell/line that can hold a long
 *     unbroken string (URLs, emails, postcodes, fee notes);
 *   - images max-width:100%;
 *   - .ck2-table-wrap is the ONLY element allowed to scroll sideways.
 * html/body overflow-x is NOT used: that masks an overflow instead of
 * removing it.
 */

/* ============================================================
   1. TOKENS + BASE
   ============================================================ */
.ck2 {
  --navy: #1f2c3d;
  --navy2: #2b3d52;
  --navy3: #38506b;
  --slate: #5b6b7c;
  --slate-l: #8795a5;
  --line: #dde4ec;
  --line2: #eaeef3;
  --bg: #f4f6f9;
  --green: #82b02b;
  --green-d: #3e661a;
  --green-l: #9bcb3c;
  --green-wash: #eef7dc;
  --blue: #064771;
  --paper: #fff;
  --ink: #1f2c3d;
  --sans: system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --shadow: 0 1px 2px rgba(31, 44, 61, .05), 0 18px 40px -20px rgba(31, 44, 61, .28);

  font-family: var(--sans);
  color: var(--ink);
  font-size: 16px;
  line-height: 1.6;
  margin: 0;
  padding: 0 16px 48px;
  -webkit-text-size-adjust: 100%;
  font-variant-numeric: tabular-nums;
}
.ck2 * { box-sizing: border-box; }
.ck2 img { display: block; max-width: 100%; height: auto; }
.ck2 :focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  .ck2 * { transition: none !important; }
}

/* The one page container. max-width, never width. */
.ck2 .dir-wrap { max-width: 1100px; margin: 0 auto; }

/* ============================================================
   2. MASTHEAD — crumbs, kicker, H1, sub, chips
   ============================================================ */
.ck2 .ck2-crumbs {
  font-size: 12.5px;
  color: var(--slate);
  padding-top: 18px;
  margin: 0 0 20px;
  overflow-wrap: anywhere;
}
.ck2 .ck2-crumbs a { color: var(--blue); text-decoration: none; font-weight: 600; }
.ck2 .ck2-crumbs a:hover { text-decoration: underline; }

.ck2 .ck2-kicker {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font: 800 11px/1 var(--sans);
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--green-d);
  margin: 0 0 14px;
}
.ck2 .ck2-kicker::before {
  content: "";
  width: 24px;
  height: 3px;
  background: var(--green);
  border-radius: 2px;
  flex: none;
}

.ck2 .ck2-hero h1 {
  font: 800 clamp(29px, 4.6vw, 44px)/1.05 var(--sans);
  letter-spacing: -.022em;
  color: var(--navy);
  margin: 0 0 12px;
  overflow-wrap: anywhere;
}
.ck2 .ck2-sub {
  font-size: 17px;
  color: var(--slate);
  max-width: 62ch;
  margin: 0 0 18px;
  line-height: 1.55;
}

.ck2 .ck2-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 26px; }
.ck2 .ck2-chip {
  font: 600 12.5px/1 var(--sans);
  color: var(--navy);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 8px 13px;
  min-width: 0;
  overflow-wrap: anywhere;
}
.ck2 .ck2-chip b { color: var(--green-d); font-weight: 800; }

/* ============================================================
   3. SECTION FURNITURE — labels, prose, callouts, notes
   ============================================================ */
.ck2 .ck2-label {
  font: 800 12px/1 var(--sans);
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--navy);
  margin: 38px 0 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.ck2 .ck2-label::before {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 3px;
  background: var(--green);
  flex: none;
}
.ck2 .ck2-label::after { content: ""; flex: 1; height: 1px; background: var(--line); }

.ck2 .ck2-h2 {
  font: 800 24px/1.2 var(--sans);
  letter-spacing: -.015em;
  color: var(--navy);
  margin: 38px 0 10px;
}
.ck2 .ck2-h3 { font: 800 16.5px/1.3 var(--sans); color: var(--navy); margin: 22px 0 8px; }

.ck2 .ck2-prose p { color: #3d4a59; line-height: 1.7; margin: 0 0 13px; max-width: 70ch; }
.ck2 .ck2-prose ul,
.ck2 .ck2-prose ol { margin: 0 0 15px; padding-left: 20px; color: #3d4a59; max-width: 70ch; }
.ck2 .ck2-prose li { margin: 6px 0; line-height: 1.65; }
.ck2 .ck2-prose a {
  color: var(--blue);
  font-weight: 700;
  text-decoration: none;
  border-bottom: 1.5px solid rgba(6, 71, 113, .25);
  overflow-wrap: anywhere;
}
.ck2 .ck2-prose a:hover { border-bottom-color: var(--blue); }
.ck2 .ck2-prose strong { color: var(--navy); }

.ck2 .ck2-callout {
  border-left: 4px solid var(--green);
  background: var(--green-wash);
  border-radius: 0 10px 10px 0;
  padding: 14px 16px;
  margin: 16px 0;
  font-size: 14px;
  line-height: 1.6;
  color: #39424d;
  overflow-wrap: anywhere;
}
.ck2 .ck2-callout strong { color: var(--navy); }
.ck2 .ck2-callout--warn { border-left-color: #d8a13a; background: #fdf6e7; }

.ck2 .ck2-note {
  border-left: 3px solid var(--green);
  padding: 2px 0 2px 14px;
  margin: 16px 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--slate);
  max-width: 78ch;
}
.ck2 .ck2-note strong { color: var(--navy); font-weight: 700; }

/* ============================================================
   4. BUTTONS
   ============================================================ */
.ck2 .ck2-btn {
  cursor: pointer;
  font: 700 13.5px/1 var(--sans);
  border-radius: 10px;
  padding: 13px 18px;
  border: 1.5px solid var(--navy);
  background: var(--navy);
  color: #fff;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: .15s;
  text-decoration: none;
  min-height: 44px;
  min-width: 0;
}
.ck2 .ck2-btn:hover { background: var(--navy2); border-color: var(--navy2); color: #fff; }
.ck2 .ck2-btn--green { background: var(--green); border-color: var(--green); }
.ck2 .ck2-btn--green:hover { background: var(--green-d); border-color: var(--green-d); }
.ck2 .ck2-btn--ghost { background: none; color: var(--navy); border-color: var(--line); }
.ck2 .ck2-btn--ghost:hover { background: var(--bg); border-color: var(--slate-l); color: var(--navy); }

/* ============================================================
   5. TABLES — the ONLY element allowed to scroll horizontally
   ============================================================ */
.ck2 .ck2-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
  border: 1px solid var(--line);
  border-radius: 12px;
}
.ck2 .ck2-table { width: 100%; min-width: 760px; border-collapse: collapse; font-size: 14px; }
.ck2 .ck2-table thead th {
  background: var(--bg);
  color: var(--navy);
  font: 800 11px/1.3 var(--sans);
  letter-spacing: .06em;
  text-transform: uppercase;
  text-align: left;
  padding: 12px 15px;
  border-bottom: 2px solid var(--line);
  vertical-align: bottom;
}
.ck2 .ck2-table th.r,
.ck2 .ck2-table td.r { text-align: right; }
.ck2 .ck2-table td,
.ck2 .ck2-table tbody th {
  padding: 12px 15px;
  border-bottom: 1px solid var(--line2);
  color: var(--navy);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  text-align: left;
  vertical-align: top;
  /* break-word, NOT anywhere: `anywhere` also shrinks a column's
     min-content width to one character, which lets the auto table layout
     collapse the firm column into a letter-per-line ladder. break-word
     still breaks a genuinely unbreakable token, which is all the overflow
     guard needs. */
  overflow-wrap: break-word;
}
/* The identity column keeps enough room for a firm name. */
.ck2 .ck2-table tbody th { min-width: 132px; }
.ck2 .ck2-table tbody tr:last-child td,
.ck2 .ck2-table tbody tr:last-child th { border-bottom: 0; }
.ck2 .ck2-table tbody tr.is-total td { background: var(--bg); font-weight: 800; }
.ck2 .ck2-table a { color: var(--blue); font-weight: 700; text-decoration: none; }
.ck2 .ck2-table a:hover { text-decoration: underline; }
.ck2 .ck2-table small {
  display: block;
  margin: 4px 0 0;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.45;
  color: var(--slate-l);
}
/* Prose columns (fee notes) get room inside the scrollport rather than
   shredding into a one-word-per-line column. */
.ck2 .ck2-table td.is-note {
  min-width: 200px;
  font-size: 13px;
  font-weight: 600;
  color: var(--slate);
}
.ck2 .ck2-table .is-muted { color: var(--slate-l); font-style: italic; font-weight: 600; }

/* ============================================================
   6. REGISTER CARDS — the related-pages mesh
   ============================================================ */
.ck2 .ck2-reg {
  display: grid;
  /* The kit's 258px track, floored at the container width. On the hub the
     .ck2 root is a body child, so a bare minmax(258px,1fr) can never exceed
     it; here the same root sits inside the theme's .col-lg-9 (its own gutter
     plus .ck2's 16px), so a fixed 258px minimum is the one track on these
     pages that could out-measure its parent on a narrow phone and push the
     page sideways. min() keeps the look identical and removes the case. */
  grid-template-columns: repeat(auto-fill, minmax(min(258px, 100%), 1fr));
  gap: 12px;
  margin: 0 0 10px;
}
.ck2 .ck2-reg > * { min-width: 0; }
.ck2 .ck2-reg-item {
  display: block;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--paper);
  padding: 16px 17px;
  text-decoration: none;
  transition: border-color .14s, box-shadow .14s, transform .14s;
  min-width: 0;
}
.ck2 .ck2-reg-item:hover {
  border-color: var(--green);
  box-shadow: 0 10px 24px -16px rgba(31, 44, 61, .35);
  transform: translateY(-1px);
}
.ck2 .ck2-reg-title {
  font: 800 15px/1.3 var(--sans);
  color: var(--navy);
  margin: 0;
  display: block;
  overflow-wrap: anywhere;
}
.ck2 .ck2-reg-item:hover .ck2-reg-title { color: var(--green-d); }
.ck2 .ck2-reg-desc { font-size: 13px; line-height: 1.5; color: var(--slate); margin: 5px 0 0; display: block; }

/* ============================================================
   7. FAQ ACCORDIONS
   ============================================================ */
.ck2 .ck2-faq-item {
  border: 1px solid var(--line);
  border-radius: 11px;
  margin: 0 0 9px;
  overflow: hidden;
  background: var(--paper);
}
.ck2 .ck2-faq-q {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  text-align: left;
  cursor: pointer;
  border: 0;
  background: none;
  padding: 15px 18px;
  font: 700 15px/1.4 var(--sans);
  color: var(--navy);
  min-width: 0;
}
.ck2 .ck2-faq-q svg { width: 16px; height: 16px; color: var(--green); flex-shrink: 0; transition: transform .18s; }
.ck2 .ck2-faq-item.open .ck2-faq-q { background: var(--bg); }
.ck2 .ck2-faq-item.open .ck2-faq-q svg { transform: rotate(180deg); }
.ck2 .ck2-faq-a { max-height: 0; overflow: hidden; transition: max-height .25s ease, padding .25s ease; }
.ck2 .ck2-faq-item.open .ck2-faq-a { max-height: 900px; padding: 2px 18px 16px; }
.ck2 .ck2-faq-a p { font-size: 14.5px; line-height: 1.65; color: #3d4a59; margin: 0 0 10px; max-width: 70ch; }
.ck2 .ck2-faq-a p:last-child { margin: 0; }
.ck2 .ck2-faq-a strong { color: var(--navy); }

/* ============================================================
   8. FOOTER SMALL PRINT
   ============================================================ */
.ck2 .ck2-foot {
  margin: 32px 0 0;
  padding: 16px 18px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 12px;
  font-size: 12.5px;
  color: var(--slate);
  line-height: 1.6;
  overflow-wrap: anywhere;
}
.ck2 .ck2-foot strong { color: var(--navy); }
.ck2 .ck2-foot a { color: var(--blue); font-weight: 600; }

/* ============================================================
   9. PAGE-SPECIFIC — the accountant card grid
   ============================================================ */
.ck2 .cuk-acc-grid {
  display: grid;
  /* minmax(0,1fr), never a bare 1fr: a bare fr track floors at the child's
     min-content width, so one long word in a card could widen the track
     past the container. The min-width:0 below is the second belt. */
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  margin: 0 0 6px;
  align-items: stretch;
}
.ck2 .cuk-acc-grid > * { min-width: 0; }
/* Two-up only on the split (city / specialism) grids, and only once the
   viewport can carry it. The ranked grid stays one column: a ranking reads
   down, not across. */
@media (min-width: 1000px) {
  .ck2 .cuk-acc-grid--split { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.ck2 .acc-card {
  position: relative;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 18px;
  display: flex;
  flex-direction: column;
  min-width: 0;
  transition: border-color .14s, box-shadow .14s, transform .14s;
}
.ck2 .acc-card:hover {
  border-color: var(--green);
  box-shadow: 0 10px 24px -16px rgba(31, 44, 61, .35);
  transform: translateY(-1px);
}

/* Flag row: rank chip and/or the ContractorUK partner disclosure. */
.ck2 .acc-flags { margin: 0 0 13px; }
.ck2 .acc-flag {
  background: var(--navy);
  border-color: var(--navy);
  color: #fff;
  font-weight: 800;
  letter-spacing: .02em;
}
/* Rank chip — the ranking's answer, so it is the thing that goes green. */
.ck2 .acc-rank {
  background: var(--green);
  border-color: var(--green);
  color: #fff;
  font-weight: 800;
  letter-spacing: .02em;
}

.ck2 .acc-head { display: flex; flex-direction: column; align-items: flex-start; gap: 13px; margin: 0; min-width: 0; }
.ck2 .hero-box .acc-head { flex-direction: row; align-items: center; gap: 18px; }
/* The kit's logo box, but min()-clamped: this selector outranks the
   .ck2 img { max-width:100% } guard, so a bare 150px would be the one image
   rule on the page that is not floored at its container. */
.ck2 .acc-logo { width: auto; max-width: min(150px, 100%); max-height: 50px; object-fit: contain; object-position: left; flex: none; }
.ck2 .hero-box .acc-logo { max-width: min(190px, 100%); max-height: 62px; }
.ck2 .acc-title { display: flex; flex-direction: column; gap: 9px; min-width: 0; }
.ck2 .acc-name { font: 800 18px/1.25 var(--sans); letter-spacing: -.012em; color: var(--navy); margin: 0; overflow-wrap: anywhere; }
.ck2 .hero-box .acc-name { font-size: 23px; letter-spacing: -.018em; }
.ck2 .acc-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-width: 0; }
.ck2 .acc-meta .ck2-chip { font-size: 11.5px; padding: 6px 11px; }
.ck2 .price-pill { background: var(--green-wash); border-color: #d5e7b3; color: var(--green-d); font-weight: 800; }
/* A published price is the green fact. "Not stated" is not a price, so it
   never wears the green pill. */
.ck2 .price-pill.is-muted { background: var(--bg); border-color: var(--line); color: var(--slate-l); font-style: italic; font-weight: 700; }

.ck2 .acc-summary { color: #3d4a59; font-size: 14.5px; line-height: 1.65; margin: 13px 0 10px; overflow-wrap: anywhere; }
.ck2 .hero-box .acc-summary { font-size: 15.5px; max-width: 88ch; }
.ck2 .acc-summary strong { color: var(--navy); }

/* Small print inside a card: the stored fee notes and office lines, each
   under the same label the fees table uses for that field. Kit small-print
   type (12.5px slate), no new visual language. */
.ck2 .acc-note { font-size: 12.5px; line-height: 1.55; color: var(--slate); margin: 0 0 8px; overflow-wrap: anywhere; }
.ck2 .acc-note strong { color: var(--navy); font-weight: 700; }
.ck2 .acc-note:last-of-type { margin-bottom: 14px; }

.ck2 .acc-ctas { margin-top: auto; display: flex; flex-wrap: wrap; gap: 9px 12px; align-items: center; min-width: 0; }
.ck2 .trustpilot-link {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 5px;
  min-height: 44px;
  padding: 0 3px;
  font-size: 13px;
  color: var(--slate);
  text-decoration: none;
  min-width: 0;
}
.ck2 .trustpilot-link:hover .tp-score { color: var(--green-d); }
/* Trustpilot's stars stay Trustpilot green — brand asset, not page UI. */
.ck2 .tp-stars { color: #00b67a; font-size: 15px; letter-spacing: .5px; }
.ck2 .tp-score { font-weight: 800; color: var(--navy); }
.ck2 .tp-count { color: var(--slate-l); font-size: 12px; }

@media (max-width: 640px) {
  .ck2 .acc-card { padding: 16px; }
  .ck2 .hero-box .acc-head { flex-direction: column; align-items: flex-start; gap: 13px; }
  .ck2 .hero-box .acc-name { font-size: 20px; }
  .ck2 .hero-box .acc-summary { font-size: 15px; }
  .ck2 .acc-ctas .ck2-btn { flex: 1 1 auto; justify-content: center; }
  .ck2 .trustpilot-link { flex: 1 1 100%; }
}

/* Featured tier (Avery, 19 Aug): the three hero partners render in their
   own premium band above the standard grid — leaf accent frame, tinted
   wash, badge. Same grid discipline as the base grids (min-width:0 comes
   from the .cuk-acc-grid > * rule). */
/* One hero row per featured firm: the tier renders inside col-lg-9, so a
   3-across band would crush each card to ~230px and shatter names and
   pills — the column is narrow no matter how wide the window is. Wide
   stacked rows are also the hub's own hero presentation. */
.ck2 .cuk-acc-grid--featured { grid-template-columns: 1fr; margin-bottom: 18px; }
/* Green premium treatment: the FEATURED TRIO ONLY (Caroola, SG, Dolan —
   the partners on the higher tier). Standard partner cards stay plain. */
.ck2 .acc-card--featured { border: 2px solid #82b02b; background: linear-gradient(180deg, var(--green-wash, #f3f8e8) 0, #fff 96px); box-shadow: 0 12px 28px rgba(31, 44, 61, .12); padding: 22px 24px; }
.ck2 .acc-card--featured:hover { box-shadow: 0 16px 34px rgba(31, 44, 61, .16); }
.ck2 .acc-flag--featured { background: #82b02b; border-color: #82b02b; color: #fff; }
.ck2 .acc-card--featured .acc-name { font-size: 1.28em; }
.ck2 .acc-card--featured .acc-summary { max-width: 68ch; }
.ck2 .acc-card--featured .price-pill { font-size: 1.02em; }