/* ==========================================================================
   category.css - /service-category/<division>/ pages
   Loaded after site.css and service.css. Reuses the existing hero, CTA band,
   why-us and section shells; adds only the two treatments unique to a
   category page: the service register and the cross-division ribbon.
   Deliberately NOT a card grid, so it does not repeat the service pages.
   ========================================================================== */

/* ---------- hero add-ons (rest of the hero comes from service.css) ---------- */
.cat-count{display:inline-flex;align-items:center;gap:10px;margin:22px auto 0;font-size:12px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--text-dark-muted);}
.cat-count b{font-family:var(--font-serif);font-size:26px;font-weight:700;letter-spacing:0;color:var(--teal-soft);line-height:1;}

/* ---------- the service register: divided rows, one per service ---------- */
.cat-reg{max-width:1080px;margin:0 auto;border-top:1px solid var(--card-dark-border);}
.cat-reg-row{display:grid;grid-template-columns:58px minmax(220px,300px) 1fr 40px;gap:0 26px;align-items:center;
  padding:22px 18px 22px 6px;border-bottom:1px solid var(--card-dark-border);text-decoration:none;position:relative;
  transition:background var(--transition-fast),padding var(--transition-fast);}
/* the teal bar that grows on hover */
.cat-reg-row::before{content:'';position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--teal-soft);
  transform:scaleY(0);transform-origin:top;transition:transform var(--transition-normal);}
.cat-reg-row:hover,.cat-reg-row:focus-visible{background:rgba(38,169,154,.04);padding-left:18px;outline:none;}
.cat-reg-row:hover::before,.cat-reg-row:focus-visible::before{transform:scaleY(1);}
.cat-reg-n{font-family:var(--font-serif);font-size:13px;font-weight:700;letter-spacing:.08em;color:var(--text-dark-muted);
  transition:color var(--transition-fast);}
.cat-reg-row:hover .cat-reg-n{color:var(--teal-soft);}
.cat-reg-name{font-family:var(--font-serif);font-size:17px;font-weight:700;line-height:1.3;color:var(--text-dark-main);
  transition:color var(--transition-fast);}
.cat-reg-row:hover .cat-reg-name{color:#FFF;}
.cat-reg-desc{font-size:13.5px;line-height:1.6;color:var(--text-dark-muted);}
.cat-reg-go{justify-self:end;width:30px;height:30px;border-radius:50%;border:1px solid var(--card-dark-border);
  display:grid;place-items:center;transition:all var(--transition-fast);}
.cat-reg-go svg{width:14px;height:14px;fill:var(--text-dark-muted);transition:fill var(--transition-fast);}
.cat-reg-row:hover .cat-reg-go{border-color:var(--teal-soft);background:var(--teal-soft);transform:translateX(3px);}
.cat-reg-row:hover .cat-reg-go svg{fill:#05080E;}
.cat-reg-new{display:inline-block;margin-left:9px;padding:2px 7px;border-radius:4px;background:var(--teal-glow);
  border:1px solid rgba(38,169,154,.35);color:var(--teal-soft);font-family:var(--font-sans);
  font-size:9.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;vertical-align:middle;}

/* ---------- cross-division ribbon: horizontal, not cards ---------- */
.cat-divs{max-width:1080px;margin:0 auto;display:grid;gap:0;border-top:1px solid var(--card-dark-border);}
.cat-div-row{display:grid;grid-template-columns:78px 1fr 40px;gap:0 22px;align-items:center;padding:20px 14px 20px 4px;
  border-bottom:1px solid var(--card-dark-border);text-decoration:none;transition:background var(--transition-fast),padding var(--transition-fast);}
.cat-div-row:hover,.cat-div-row:focus-visible{background:rgba(255,255,255,.025);padding-left:16px;outline:none;}
.cat-div-mark{font-family:var(--font-serif);font-size:12px;font-weight:800;letter-spacing:.2em;text-transform:uppercase;
  color:var(--teal-soft);transition:color var(--transition-fast);}
.cat-div-row:hover .cat-div-mark{color:var(--teal-soft);}
.cat-div-copy h3{font-family:var(--font-serif);font-size:16px;font-weight:700;color:var(--text-dark-main);margin:0 0 3px;
  transition:color var(--transition-fast);}
.cat-div-row:hover .cat-div-copy h3{color:#FFF;}
.cat-div-copy p{font-size:13px;line-height:1.55;color:var(--text-dark-muted);margin:0;}
.cat-div-n{justify-self:end;font-size:11.5px;font-weight:700;letter-spacing:.1em;color:var(--text-dark-muted);}

/* ---------- overview lead ---------- */
.cat-lead{max-width:820px;margin:0 auto;text-align:center;}
.cat-lead p{font-size:16px;line-height:1.85;color:var(--text-dark-muted);margin:0;}

@media(max-width:992px){
  .cat-reg-row{grid-template-columns:44px 1fr 44px;gap:0 16px;row-gap:7px;}
  .cat-reg-desc{grid-column:2 / span 2;}
  .cat-reg-go{grid-row:1;grid-column:3;}
}
@media(max-width:640px){
  .cat-reg-row{padding:18px 10px 18px 6px;}
  .cat-reg-name{font-size:15.5px;}
  .cat-div-row{grid-template-columns:1fr 34px;row-gap:6px;}
  .cat-div-mark{grid-column:1;}
  .cat-div-copy{grid-column:1 / span 2;}
}


/* ==========================================================================
   RESPONSIVE REFINEMENTS (tablet + mobile) — appended, cascades last
   ========================================================================== */

/* Larger tap target for the register row go-arrow on touch screens.
   44px meets the standard minimum comfortable touch-target size
   (previously 40px, 4px short of that guidance). */
@media (max-width: 992px){
  .cat-reg-go{ width: 44px; height: 44px; }
}

/* Comfortable spacing / readable copy on small phones */
@media (max-width: 480px){
  .cat-reg-row{ padding: 16px 8px 16px 6px; gap: 0 12px; }
  .cat-reg-name{ font-size: 15px; }
  .cat-reg-desc{ font-size: 13px; }
  .cat-lead p{ font-size: 15px; }
}


span.cat-reg-new {
    display: none !important;
}