/* Colocation Scout: colour treatment for the market guides and the pricing
   pages. Loaded after styles.css on those twenty six pages and scoped to
   body.colorway, so nothing else on the site can be reached by it.

   The market pages carry three data layers and a lot of prose, and in one flat
   colour a reader cannot tell a sourced permit count from an editorial aside.
   Colour is doing structural work here rather than decoration:

     navy   the page speaking in its own voice: hero, power, the closing ask
     teal   an explanation, the "here is how to read this" aside
     green  our own collected data, and anything counted rather than claimed
     amber  a caution, a figure that misleads if quoted without its basis

   The two page families use the same vocabulary, so one file serves both.
   Where they differ, the pricing pages carry provenance labels rather than
   collection counts, and those labels are exactly what the green and amber
   split was built for: a sourced rate and an unverified planning band should
   not look alike.

   Nothing below changes a single word or number. Any page can opt out by
   dropping the class. */

body.colorway {
  --m-navy: #003b5c;
  --m-navy-deep: #00263c;
  --m-navy-deeper: #002031;
  --m-teal: #0e7490;
  --m-teal-soft: #e4f2f5;
  --m-green: #2f9e52;
  --m-green-soft: #e9f7ed;
  --m-amber: #b26a00;
  --m-amber-soft: #fdf2e0;
  --m-sky: #7fd4f0;
  --m-tint: #eef4f8;
  --m-ink-inv: #cfe1ec;
  --m-ink-inv-2: #9fbccd;
  --m-rule-inv: rgba(255, 255, 255, .14);
}

/* ---- Nav on navy ---- */
/* The compass is navy artwork, so on a navy bar it disappears. The white mark
   ships alongside it and the two swap here rather than in the markup, which
   keeps one nav model for all forty one pages. */
body.colorway .nav {
  background: rgba(0, 38, 60, .92);
  border-bottom: 1px solid var(--m-rule-inv);
}
body.colorway .nav .brand-mark { display: none; }
body.colorway .nav .brand-mark-alt { display: block; }
body.colorway .nav .brand-name { color: #fff; }
body.colorway .nav-group-btn { color: var(--m-ink-inv); }
body.colorway .nav-group-btn:hover { color: #fff; background: rgba(127, 212, 240, .16); }
body.colorway .nav-group.is-current > .nav-group-btn { color: #fff; background: rgba(127, 212, 240, .16); }
body.colorway .nav-group-btn:focus-visible { outline-color: var(--m-sky); }
body.colorway .nav-toggle { color: #fff; }
body.colorway .nav-cta .btn-primary { background: var(--m-green); border-color: var(--m-green); }
body.colorway .nav-cta .btn-primary:hover { background: #268043; }

/* ---- Hero on navy ---- */
body.colorway .page-hero {
  background: radial-gradient(120% 140% at 50% 0%, #00587f 0%, var(--m-navy) 46%, var(--m-navy-deep) 100%);
  border-bottom: 0;
  padding: 76px 0 66px;
}
body.colorway .page-hero h1 { color: #fff; }
body.colorway .page-hero .sub { color: var(--m-ink-inv); }
body.colorway .page-hero .eyebrow { color: var(--m-sky); }
body.colorway .page-hero .btn-ghost { color: #fff; border-color: rgba(255, 255, 255, .34); }
body.colorway .page-hero .btn-ghost:hover { background: rgba(255, 255, 255, .1); border-color: #fff; }
body.colorway .page-hero .btn-primary { background: var(--m-green); border-color: var(--m-green); }
body.colorway .page-hero .btn-primary:hover { background: #268043; }

/* ---- Section rhythm ---- */
/* The alternating band was white on warm white, which is a difference you have
   to look for. It is now a cool tint, so a reader can see the page change
   subject without reading a heading. */
body.colorway section.alt { background: var(--m-tint); border-color: #dbe6ee; }
body.colorway .data-tag {
  background: var(--m-green-soft);
  color: #1c6b38;
}

/* ---- Callouts carry the explanation, so they read teal ---- */
body.colorway .callout {
  background: var(--m-teal-soft);
  border: 1px solid #bfdfe8;
  border-left: 4px solid var(--m-teal);
}
body.colorway .callout strong { color: #0b5b71; }

/* ---- Our own collected figures read green ---- */
body.colorway .status-pill {
  background: var(--m-green);
  color: #fff;
}
body.colorway .snapshot-meta { color: #4b5160; }
body.colorway .cmp-table thead th {
  background: var(--m-navy);
  color: #fff;
  border-color: var(--m-navy);
}
body.colorway .cmp-table td.price { color: var(--m-navy); font-weight: 700; }
body.colorway .cmp-table tbody tr:nth-child(even) { background: #fbfcfd; }
/* The base rule scrolls wide tables horizontally on narrow screens, so this
   must not set `overflow: hidden`. A rounded corner is not worth trapping a
   five column table off the right edge of a phone. */
body.colorway .table-wrap {
  border-radius: 12px;
  border: 1px solid #dbe6ee;
}

/* A source note is a caution about what a figure does not prove, which is the
   one thing on these pages most likely to be quoted wrongly on a call. */
body.colorway .source-note {
  background: var(--m-amber-soft);
  border-left: 3px solid var(--m-amber);
  padding: 14px 18px;
  border-radius: 0 8px 8px 0;
  color: #6b5220;
}
body.colorway .source-note a { color: #8a5200; }

/* ---- Decision cards ---- */
body.colorway .decision-card {
  background: #fff;
  border: 1px solid #dbe6ee;
  border-top: 3px solid var(--m-teal);
  border-radius: 10px;
  transition: box-shadow .15s ease, transform .15s ease;
}
body.colorway .decision-card:hover {
  box-shadow: 0 10px 28px -18px rgba(0, 59, 92, .45);
  transform: translateY(-2px);
}
body.colorway .decision-card h3 { color: var(--m-navy); }

/* ---- Closing ask ---- */
body.colorway section.final-cta {
  position: relative;
  background: radial-gradient(120% 140% at 50% 0%, #00587f 0%, var(--m-navy) 46%, var(--m-navy-deep) 100%);
  border: 0;
}
/* The four accents, in the order the page used them, as a single rule across
   the top of the closing section. */
body.colorway section.final-cta::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: linear-gradient(90deg, var(--m-amber) 0%, var(--m-green) 38%, var(--m-teal) 68%, var(--m-sky) 100%);
}
body.colorway section.final-cta h2 { color: #fff; }
body.colorway section.final-cta .sub { color: var(--m-ink-inv); }
body.colorway section.final-cta .eyebrow { color: var(--m-sky); }
body.colorway section.final-cta .btn-primary { background: var(--m-green); border-color: var(--m-green); }
body.colorway section.final-cta .btn-primary:hover { background: #268043; }
body.colorway section.final-cta .btn-ghost { color: #fff; border-color: rgba(255, 255, 255, .34); }
body.colorway section.final-cta .btn-ghost:hover { background: rgba(255, 255, 255, .1); border-color: #fff; }

@media (max-width: 600px) {
  body.colorway .page-hero { padding: 52px 0 46px; }
}

/* ---- Pricing pages ---- */
/* These carry provenance labels instead of collection counts, and the whole
   point of the page is that a published rate and a modelled band are not the
   same class of claim. Green says somebody published this. Amber says we
   derived it, or nobody has confirmed it yet. */
body.colorway .status-pill-soft {
  background: var(--m-amber-soft);
  color: #6b4a00;
  border: 1px solid #e8cf9e;
}

/* A verification note explains how to confirm a figure, which is an
   explanation rather than a caution, so it reads teal like a callout. The one
   inside the navy lead panel keeps its own inverted styling. */
body.colorway .verification-note {
  background: var(--m-teal-soft);
  border-color: #bfdfe8;
  border-left: 3px solid var(--m-teal);
  color: #33505c;
}
body.colorway .verification-note a { color: #0b5b71; }

/* The lead panel is the page in its own voice, so it takes the navy gradient
   and the same four-accent rule as a closing section. */
body.colorway .lead-cta {
  position: relative;
  overflow: hidden;
  background: radial-gradient(120% 160% at 50% 0%, #00587f 0%, var(--m-navy) 46%, var(--m-navy-deep) 100%);
}
body.colorway .lead-cta::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: linear-gradient(90deg, var(--m-amber) 0%, var(--m-green) 38%, var(--m-teal) 68%, var(--m-sky) 100%);
}
body.colorway .lead-cta .verification-note {
  background: rgba(255, 255, 255, .08);
  border-color: rgba(255, 255, 255, .2);
  border-left-color: var(--m-sky);
  color: #c9d9e2;
}
body.colorway .lead-cta .verification-note a { color: #fff; }
body.colorway .lead-cta .btn-primary { background: var(--m-green); border-color: var(--m-green); }
body.colorway .lead-cta .btn-primary:hover { background: #268043; }

/* The jump links sit under the hero and read as navigation, not as content. */
body.colorway .content-nav a {
  border-color: #dbe6ee;
  background: #fff;
}
body.colorway .content-nav a:hover { border-color: var(--m-teal); color: var(--m-teal); }

/* ---- Cost estimator ---- */
/* The estimator is two halves of one argument: the panel on the left is what
   you told us, the panel on the right is what that implies. The left stays
   quiet so the inputs read as inputs, and the right takes the navy and the
   four-accent rule because the answer is the page speaking. */
body.colorway .calc-panel { border-color: #dbe6ee; }
body.colorway .field input,
body.colorway .field select { border-color: #cfdbe4; }
body.colorway .field input:focus,
body.colorway .field select:focus {
  outline: 3px solid rgba(102, 194, 233, .45);
  border-color: var(--m-teal);
}
body.colorway .calc-result {
  position: sticky;
  overflow: hidden;
  background: radial-gradient(120% 150% at 50% 0%, #00587f 0%, var(--m-navy) 46%, var(--m-navy-deep) 100%);
}
body.colorway .calc-result::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: linear-gradient(90deg, var(--m-amber) 0%, var(--m-green) 38%, var(--m-teal) 68%, var(--m-sky) 100%);
}
body.colorway .calc-result .eyebrow { color: var(--m-sky); }
body.colorway .calc-result .btn-primary { background: var(--m-green); border-color: var(--m-green); }
body.colorway .calc-result .btn-primary:hover { background: #268043; }

/* The disclaimer is the same kind of sentence as a source note, so it carries
   the same amber signal. On navy it has to be a rule and a tint rather than a
   panel, because amber fill on navy goes muddy. */
body.colorway .calc-disclaimer {
  border-left: 3px solid var(--m-amber);
  padding-left: 12px;
  color: #e2d3b4;
}