/* Sharper editorial treatment layered over the readable base design. */
:root {
  --premium-navy: #103a55;
  --premium-blue: #087ab8;
  --premium-cyan: #23a9d5;
  --premium-gold: #f0b72f;
  --premium-ice: #eff7fb;
  --premium-line: #ccdde7;
}

body {
  background: #fff;
}

.site-header {
  border-top: 4px solid var(--premium-gold);
  border-bottom-color: #cbdde7;
  box-shadow: 0 10px 30px rgba(16, 58, 85, 0.1);
}

.header-inner {
  min-height: 70px;
}

.global-nav a {
  color: #24465b;
  font-size: 0.86rem;
}

.hero {
  box-shadow: inset 0 -8px 0 var(--premium-blue);
}

.hero-copy {
  background: var(--premium-navy);
  box-shadow: 0 14px 28px rgba(16, 58, 85, 0.16);
}

.hero-copy::before {
  background: var(--premium-gold);
}

.hero-checks li {
  border-top: 4px solid #d9edf5;
  box-shadow: 0 10px 26px rgba(16, 58, 85, 0.08);
}

.button.primary {
  background: var(--premium-blue);
}

.button.primary:hover {
  background: var(--premium-navy);
}

.hero-stats {
  border-bottom: 5px solid var(--premium-gold);
  box-shadow: 0 12px 28px rgba(16, 58, 85, 0.08);
}

.best-summary {
  position: relative;
}

.best-summary::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 7px;
  background: linear-gradient(90deg, var(--premium-navy) 0 64%, var(--premium-cyan) 64% 82%, var(--premium-gold) 82% 100%);
}

.summary-heading h2 {
  border-left-color: var(--premium-gold);
  background: var(--premium-navy);
  box-shadow: 10px 10px 0 #dcedf5;
}

.summary-heading p:last-child {
  border-left-color: #8bbbd1;
}

.best-tab {
  border: 1px solid #a9cddd;
  color: #1b5878;
  background: #edf6fa;
}

.best-tab.is-active,
.best-tab:hover,
.best-tab:focus-visible {
  border-color: var(--premium-navy);
  background: var(--premium-navy);
  box-shadow: inset 0 -4px 0 var(--premium-gold);
}

.best-grid article {
  border: 1px solid #c6d9e3;
  border-bottom: 6px solid var(--premium-navy);
  box-shadow: 0 18px 42px rgba(16, 58, 85, 0.13);
}

.best-grid article > div {
  border-left-color: var(--premium-gold);
}

.best-rank {
  border-radius: 2px;
  background: #d99c16;
}

.best-grid a {
  color: var(--premium-blue);
}

.quick-search {
  border-top: 0;
  border-bottom: 5px solid #eed17d;
}

.filter-button {
  border-radius: 3px;
}

.filter-button.is-active {
  border-color: var(--premium-navy);
  background: var(--premium-navy);
  box-shadow: inset 0 -3px 0 var(--premium-gold);
}

.section-heading {
  border-left-color: var(--premium-cyan);
}

.section-heading h2,
.advice-copy h2 {
  color: var(--premium-navy);
}

.section-heading h2::before,
.advice-copy h2::before {
  background: linear-gradient(90deg, var(--premium-navy) 0 74px, var(--premium-gold) 74px 112px, #d4e4ec 112px 100%);
}

.section-heading .section-kicker,
.advice-copy .section-kicker {
  color: #0a5f8d;
  background: #dff1f8;
}

.advice-row {
  border-left-color: var(--premium-cyan);
  border-bottom: 5px solid var(--premium-navy);
}

.advice-copy p {
  border-left: 5px solid #b8d8e6;
}

.photo-grid figure {
  border: 0;
  border-bottom: 5px solid var(--premium-navy);
  box-shadow: 0 16px 34px rgba(16, 58, 85, 0.12);
}

.photo-grid figcaption {
  border-top-color: var(--premium-cyan);
  color: var(--premium-navy);
}

.criteria-section {
  background: #eaf4f9;
}

.criteria-section .section-heading .section-kicker,
.ranking-heading .section-kicker {
  color: #fff;
  background: var(--premium-navy);
}

.criteria-grid article {
  border: 0;
  border-top: 6px solid var(--premium-blue);
  box-shadow: 0 12px 28px rgba(16, 58, 85, 0.1);
}

.criteria-grid article:nth-child(even) {
  border-top-color: var(--premium-cyan);
}

.criteria-grid span {
  color: #fff;
  background: var(--premium-navy);
}

.ranking-section {
  border-top: 1px solid #d0e1e9;
  background: #eef6fa;
}

.ranking-heading::after {
  height: 5px;
  background: linear-gradient(90deg, var(--premium-navy) 0 72%, var(--premium-cyan) 72% 84%, var(--premium-gold) 84% 100%);
}

.ranking-heading h2.image-heading img {
  border: 0;
  background: #fff;
  box-shadow: 12px 12px 0 #d9eaf2;
}

.ranking-heading p:last-child {
  border-left-color: var(--premium-gold);
  background: var(--premium-navy);
}

.rank-card {
  border: 0;
  border-bottom: 6px solid #b8d2df;
  box-shadow: 0 18px 40px rgba(16, 58, 85, 0.13);
}

.ranking-list > .rank-card:nth-child(1) {
  border-bottom-color: #e1a716;
}

.ranking-list > .rank-card:nth-child(2) {
  border-bottom-color: #8fa7b5;
}

.ranking-list > .rank-card:nth-child(3) {
  border-bottom-color: #bd7b4f;
}

.rank-heading {
  position: relative;
  border-bottom: 0;
  color: #fff;
  background: var(--premium-navy);
  padding: 16px 24px;
}

.rank-heading::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--premium-cyan) 0 78%, var(--premium-gold) 78% 100%);
}

.rank-heading img {
  width: 58px;
  height: 58px;
  padding: 3px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.16);
}

.rank-heading h3 {
  color: #fff;
}

.rank-visual {
  border-bottom: 1px solid #cbdde7;
}

.company-area {
  border-left-color: var(--premium-cyan);
  color: #123f58;
}

.point-list {
  border-left-color: #4aa879;
}

.score-list::before,
.point-list::before {
  color: var(--premium-navy);
}

.review-box {
  border-top: 5px solid var(--premium-cyan);
  background: #eaf4f9;
}

.review-box h4 {
  border-left: 0;
  color: #fff;
  background: var(--premium-navy);
  padding: 13px 16px;
}

.review-note {
  border-bottom-color: #bfd5e0;
}

.review-item p {
  border: 0;
  border-left: 4px solid #b7d6e4;
  box-shadow: 0 8px 20px rgba(16, 58, 85, 0.06);
}

.review-item p::before {
  border: 0;
  background: #fff;
}

.company-facts {
  border: 0;
  border-bottom: 5px solid #2f7f5c;
}

.company-facts h4 {
  background: #2f7f5c;
}

.company-map {
  border: 1px solid #cbdde7;
  border-bottom: 5px solid var(--premium-navy);
}

.company-map h4 {
  color: #fff;
  background: var(--premium-navy);
}

.card-button {
  background: var(--premium-navy);
  box-shadow: inset 0 -4px 0 var(--premium-cyan);
}

.card-button:hover {
  background: var(--premium-blue);
}

.table-wrap {
  border: 0;
  border-bottom: 5px solid var(--premium-gold);
  box-shadow: 0 16px 36px rgba(16, 58, 85, 0.12);
}

th {
  background: var(--premium-navy);
}

.guide-list article {
  border-left-color: var(--premium-cyan);
  border-bottom: 3px solid #d3e4ec;
}

.guide-list span {
  color: #d89e19;
}

.contact-panel {
  border: 0;
  border-top: 5px solid var(--premium-blue);
  box-shadow: 0 14px 32px rgba(16, 58, 85, 0.1);
}

.trivia-grid article {
  border: 0;
  border-top: 5px solid var(--premium-gold);
}

details {
  border: 0;
  border-left: 5px solid #bad5e2;
  box-shadow: 0 8px 20px rgba(16, 58, 85, 0.06);
}

details[open] {
  border-left-color: var(--premium-gold);
}

summary {
  color: var(--premium-navy);
}

summary::after {
  background: var(--premium-navy);
}

.site-footer {
  border-top: 7px solid var(--premium-gold);
  background: #0e3045;
}

@media (max-width: 980px) {
  .best-grid article > div {
    border-top-color: var(--premium-gold);
  }

  .rank-heading {
    padding-inline: 18px;
  }
}

@media (max-width: 680px) {
  .site-header {
    border-top-width: 3px;
  }

  .header-inner {
    min-height: 62px;
  }

  .hero {
    box-shadow: inset 0 -5px 0 var(--premium-blue);
  }

  .summary-heading h2 {
    box-shadow: 6px 6px 0 #dcedf5;
  }

  .rank-heading {
    padding: 13px 14px;
  }

  .rank-heading img {
    width: 48px;
    height: 48px;
  }

  .rank-heading h3 {
    font-size: 1.34rem;
  }

  .ranking-heading h2.image-heading img {
    box-shadow: 7px 7px 0 #d9eaf2;
  }

  .review-box {
    border-top-width: 4px;
  }

  .review-box h4 {
    font-size: 1.16rem;
  }
}