/*
 * CW2026 Brand Theme Stylesheet
 * All brand, layout, and component styles for the Cyber Wurx site.
 * DO NOT add brand CSS to style.css — that file carries the WP theme header comment.
 *
 * Load order: bootstrap → cw2026-style (style.css) → cw2026-theme (this file)
 */

/* ══════════════════════════════════════════════════════════════════
   § 1  CSS Custom Properties (Brand Tokens)
   ══════════════════════════════════════════════════════════════════ */

:root {
  /* Blues */
  --cw-blue-dark:   #345e8c;
  --cw-blue:        #4a77b4;
  --cw-blue-light:  #6f9bd4;
  --cw-blue-paler:  #90b5dc;
  --cw-blue-pale:   #eef3fa;

  /* Slates (dedicated server plan headers) */
  --cw-slate-light: #83909c;
  --cw-slate:       #5b6470;
  --cw-slate-dark:  #3f4750;

  /* Greens */
  --cw-green:       #5cb85c;
  --cw-green-dark:  #449d44;

  /* Grays */
  --cw-gray-bg:     #f4f5f6;
  --cw-gray-border: #e2e4e7;
  --cw-text-muted:  #7a8088;

  /* Footer */
  --cw-footer-dark: #1c1c1e;
  --cw-footer-bar:  #eceef0;
}


/* ══════════════════════════════════════════════════════════════════
   § 2  Base
   ══════════════════════════════════════════════════════════════════ */

body {
  color: #3c4147;
  font-family: "Segoe UI", Helvetica, Arial, sans-serif;
  /* Underscores' .post/.page rule adds margin-bottom to body.page via body_class() */
  margin: 0;
}

a {
  color: var(--cw-blue);
  text-decoration: none;
}

a:visited {
  color: var(--cw-blue);
}

a:hover {
  color: var(--cw-blue-dark);
  text-decoration: underline;
}

a:focus,
a:active {
  color: var(--cw-blue-dark);
}


/* ══════════════════════════════════════════════════════════════════
   § 3  Navbar
   ══════════════════════════════════════════════════════════════════ */

.navbar-cw { background-color: var(--cw-blue); }
.navbar-cw .navbar-brand { display: flex; align-items: center; }

/* White SVG logo on blue navbar */
.navbar-brand-logo {
  height: 38px;
  width: auto;
  filter: brightness(0) invert(1);
  display: block;
}

.navbar-cw .nav-link          { color: rgba(255, 255, 255, .92); font-size: .92rem; }
/* :focus (and [aria-expanded="true"], set while its dropdown is open) must be
   covered explicitly — Bootstrap's own navbar CSS styles :hover and :focus
   together via --bs-navbar-hover-color, which defaults to a dark color since
   this navbar doesn't opt into .navbar-dark/data-bs-theme="dark". Without an
   explicit override here, opening the "About Cyber Wurx" dropdown (which
   focuses its toggle) turned that item's text black. */
.navbar-cw .nav-link:hover,
.navbar-cw .nav-link:focus,
.navbar-cw .nav-link[aria-expanded="true"] { color: #fff; text-decoration: none; }
.navbar-cw .nav-link.active   { color: #fff; font-weight: 600; }

.navbar-cw .nav-phone { color: #fff; font-size: .92rem; white-space: nowrap; }
.nav-phone-link       { color: #fff !important; }
.nav-phone-link:hover { color: rgba(255, 255, 255, .8) !important; text-decoration: none; }

/* Dropdown submenu ("About Cyber Wurx") — themed to match the navbar instead of
   Bootstrap's default white/gray dropdown */
.navbar-cw .dropdown-menu {
  background-color: var(--cw-blue-dark);
  border: none;
  border-radius: 4px;
  padding: .5rem 0;
  margin-top: .5rem;
  box-shadow: 0 .5rem 1.25rem rgba(0, 0, 0, .2);
}
.navbar-cw .dropdown-item {
  color: rgba(255, 255, 255, .85) !important;
  font-size: .92rem;
  padding: .5rem 1.25rem;
}
.navbar-cw .dropdown-item:hover,
.navbar-cw .dropdown-item:focus {
  background-color: rgba(255, 255, 255, .1);
  color: #fff !important;
}
.navbar-cw .dropdown-item.active,
.navbar-cw .dropdown-item:active {
  background-color: var(--cw-blue);
  color: #fff !important;
  font-weight: 600;
}

/* White hamburger icon on blue background */
.navbar-cw .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255%2C 255%2C 255%2C 0.85%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}
.navbar-cw .navbar-toggler { border-color: rgba(255, 255, 255, .3); }


/* ══════════════════════════════════════════════════════════════════
   § 4  Buttons
   ══════════════════════════════════════════════════════════════════ */

/* color: !important guards these button classes the same way CF7's submit
   override does below (§18) — a single-class selector on an `<a>` ties in
   specificity with WordPress's global-styles link-element CSS, and can lose
   the tie depending on source order. */
.btn-cw-green       { background-color: var(--cw-green);      border-color: var(--cw-green-dark); color: #fff !important; font-weight: 500; }
.btn-cw-green:hover { background-color: var(--cw-green-dark); border-color: var(--cw-green-dark); color: #fff !important; }

.btn-cw-outline       { border-color: var(--cw-blue); color: var(--cw-blue) !important; font-weight: 500; }
.btn-cw-outline:hover { background-color: var(--cw-blue); color: #fff !important; }


/* ══════════════════════════════════════════════════════════════════
   § 5  Connect Bar + Footer
   ══════════════════════════════════════════════════════════════════ */

.connect-bar { background-color: var(--cw-footer-bar); padding: 1.5rem 0; }

footer.site-footer                   { background-color: var(--cw-footer-dark); color: #9aa0a6; padding: 2.5rem 0 1.5rem; }
footer.site-footer h6                { color: #fff; font-weight: 600; font-size: .85rem; letter-spacing: .5px; margin-bottom: .85rem; }
footer.site-footer a                 { color: #9aa0a6; font-size: .88rem; display: block; margin-bottom: .4rem; }
footer.site-footer a:hover           { color: #fff; text-decoration: none; }
footer.site-footer li                { list-style: none; padding: 0; margin: 0; }
footer.site-footer .current-menu-item > a { color: #fff; }

.footer-bottom        { background-color: #141415; color: #7a7f85; font-size: .8rem; padding: .9rem 0; }
.footer-bottom a      { color: #7a7f85; }
.footer-bottom a:hover { color: #d0d3d7; text-decoration: none; }


/* ══════════════════════════════════════════════════════════════════
   § 6  Hero Variants
   ══════════════════════════════════════════════════════════════════ */

/* — Large hero (homepage only) — */
.hero-landing {
  background: linear-gradient(135deg, #1e3a5f, var(--cw-blue-dark) 50%, var(--cw-blue));
  position: relative;
  padding: 5rem 0;
  overflow: hidden;
}
.hero-landing::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255, 255, 255, .06) 1px, transparent 1px);
  background-size: 24px 24px;
  pointer-events: none;
}
.hero-landing h1 { font-size: 2.75rem; font-weight: 700; color: #fff; line-height: 1.2; }
.hero-sub        { font-size: 1.05rem; color: rgba(255, 255, 255, .85); }
/* White + underlined, not --cw-blue: on the dark hero gradient the muted brand
   blue reads as a plain/default hyperlink rather than an on-brand accent —
   matches the link treatment already used elsewhere on dark backgrounds
   (.cta-contact-link, .nav-phone-link). */
.hero-sub a       { color: #fff; text-decoration: underline; }
.hero-sub a:hover { color: rgba(255, 255, 255, .75); }

/* — Banner hero (inner pages) — */
.hero-banner {
  background: linear-gradient(135deg, #1e3a5f, var(--cw-blue-dark) 50%, var(--cw-blue));
  position: relative;
  padding: 3.5rem 0;
  overflow: hidden;
}
.hero-banner::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255, 255, 255, .06) 1px, transparent 1px);
  background-size: 24px 24px;
  pointer-events: none;
}
.hero-heading                  { color: #4a4f55; font-weight: 300; font-size: 1.5rem; }
.hero-banner .hero-heading     { color: #fff; font-size: 2.2rem; margin-top: .5rem; }
.hero-banner p                 { color: rgba(255, 255, 255, .82); }
.hero-banner a                 { color: #fff; }

/* — Logo-only hero (about page) — */
.logo-hero { padding: 3rem 0; border-bottom: 1px solid var(--cw-gray-border); }


/* ══════════════════════════════════════════════════════════════════
   § 7  Diamond Hero
   ══════════════════════════════════════════════════════════════════ */

/* Default: 260px (inner pages) */
.diamond-hero {
  position: relative;
  width: 260px;
  height: 260px;
  max-width: 100%;
  flex-shrink: 0;
}

/* Large variant: 400px (homepage — add .diamond-hero--lg to the element) */
.diamond-hero--lg { width: 400px; height: 400px; }

.diamond-hero__fill {
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, .08);
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}
.diamond-hero__border {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}
.diamond-hero__content {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  text-align: center;
  color: #fff;
  padding: 0 100px;
}
.diamond-hero__icon {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 5rem;
  color: rgba(255, 255, 255, .88);
}

/* Homepage diamond content */
.uptime-number     { font-size: 3rem; font-weight: 700; letter-spacing: -1px; line-height: 1; }
.uptime-label      { font-size: .78rem; text-transform: uppercase; letter-spacing: .1em; opacity: .8; margin-top: .35rem; }
.uptime-certs      { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; margin-top: 1.25rem; }
.uptime-cert-logo  { display: block; width: 100%; height: auto; opacity: .88; }

@media (max-width: 991.98px) {
  .diamond-hero { display: none; }
}

/* Inline uptime/certs (sub-lg alternative to the diamond hero) */
.hero-uptime-inline__stat {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: .6rem;
  margin-bottom: .9rem;
}
.hero-uptime-inline__number { font-size: 2.1rem; font-weight: 700; color: #fff; line-height: 1; }
.hero-uptime-inline__label  { font-size: .75rem; text-transform: uppercase; letter-spacing: .1em; color: rgba(255, 255, 255, .75); }
.hero-uptime-inline__certs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 1.1rem;
}
.hero-uptime-inline__cert-logo { height: 26px; width: auto; opacity: .85; }


/* ══════════════════════════════════════════════════════════════════
   § 8  Section Titles
   ══════════════════════════════════════════════════════════════════ */

.section-title         { color: #9aa0a6; font-weight: 300; }
.section-title-primary { color: #4a4f55; font-weight: 500; font-size: 1.6rem; }


/* ══════════════════════════════════════════════════════════════════
   § 9  Page-Specific Components
   ══════════════════════════════════════════════════════════════════ */

/* ── Homepage: Stat strip ── */
.stat-strip                   { border-bottom: 1px solid var(--cw-gray-border); }
.stat-cell                    { text-align: center; padding: 2rem 1rem; border-right: 1px solid var(--cw-gray-border); }
.stat-cell:last-child         { border-right: none; }
.stat-icon                    { font-size: 1.5rem; color: var(--cw-blue-paler); display: block; margin-bottom: .5rem; }
.stat-number                  { font-size: 2.6rem; font-weight: 700; color: var(--cw-blue-dark); line-height: 1; }
.stat-label                   { font-size: .75rem; text-transform: uppercase; letter-spacing: .08em; color: var(--cw-text-muted); margin-top: .3rem; }

/* ── Homepage: Product cards ── */
.product-card {
  border: 1px solid var(--cw-gray-border);
  border-radius: 6px;
  padding: 2rem 1.5rem;
  background: #fff;
  height: 100%;
  display: flex;
  flex-direction: column;
  transition: transform .25s ease, box-shadow .25s ease;
}
.product-card:hover          { transform: translateY(-4px); box-shadow: 0 8px 24px rgba(52, 94, 140, .12); }
.product-card--featured      { border-top: 3px solid var(--cw-blue-dark); }
.product-card .card-icon     { font-size: 2.4rem; color: var(--cw-blue); margin-bottom: 1rem; display: block; }
.product-card h5             { font-weight: 700; margin-bottom: .5rem; }
.product-card p              { font-size: .88rem; color: var(--cw-text-muted); flex: 1; margin-bottom: 1rem; }
.product-card .price-from    { font-size: .8rem; font-weight: 600; color: var(--cw-blue-dark); margin-bottom: 1rem; }

/* ── Homepage: Differentiators ── */
.differentiator           { text-align: center; padding: 1.5rem 1rem; }
.differentiator .diff-icon { font-size: 2rem; color: var(--cw-blue); margin-bottom: .75rem; display: block; }
.differentiator h6        { font-weight: 700; color: #3c4147; margin-bottom: .4rem; }
.differentiator p         { font-size: .85rem; color: var(--cw-text-muted); margin-bottom: 0; }

/* ── Compliance cert badges (inline) ── */
.cert-badge {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  border: 1.5px solid var(--cw-blue-dark);
  border-radius: 4px;
  padding: .35rem .75rem;
  font-size: .78rem;
  font-weight: 600;
  color: var(--cw-blue-dark);
  white-space: nowrap;
}

/* ── Compliance cert cards ── */
.cert-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .6rem;
  border: 1.5px solid #e2e6ea;
  border-radius: 8px;
  padding: 1rem 1.25rem;
  background: #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .06);
  min-width: 140px;
}
.cert-card img       { display: block; }
.cert-card-label     { font-size: .78rem; font-weight: 600; color: var(--cw-blue-dark); text-align: center; white-space: nowrap; }

/* ── Homepage: Testimonials ── */
.testimonial          { border-left: 3px solid var(--cw-blue-paler); padding-left: 1rem; margin-bottom: 1.5rem; }
.testimonial p        { font-size: .92rem; color: #5b6168; margin-bottom: .3rem; font-style: italic; }
.testimonial cite     { font-size: .8rem; color: var(--cw-text-muted); font-style: normal; }

/* ── CTA band (homepage + services) ── */
.cta-band       { background: var(--cw-blue-dark); padding: 4rem 0; }
.cta-band h2    { color: #fff; font-weight: 700; }
.cta-band p     { color: rgba(255, 255, 255, .82); font-size: 1rem; margin-bottom: 0; }
.cta-sub        { color: rgba(255, 255, 255, .82); font-size: 1.05rem; }
.cta-alt-contact { color: rgba(255, 255, 255, .75); font-size: .92rem; }
.cta-alt-contact i { margin-right: .25rem; }

/* Applied directly to the mailto:/tel: links in the CTA band (same direct-class
   pattern as .nav-phone-link) rather than a `.cta-alt-contact a` descendant
   selector, so the color reliably wins regardless of WordPress's global-styles
   link-element CSS. */
.cta-contact-link       { color: #fff !important; text-decoration: underline !important; }
.cta-contact-link:hover { color: rgba(255, 255, 255, .85) !important; }

/* ── Homepage: Dark contact form (inside CTA band) — renders the CF7 shortcode ── */
.contact-form-dark {
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: 6px;
  padding: 1.75rem 2rem;
  margin-top: 2rem;
}
.contact-form-dark h5 { color: #fff; }
.contact-form-dark label,
.contact-form-dark .wpcf7 label {
  color: #fff;
  font-size: .9rem;
  font-weight: 600;
  display: block;
  margin-bottom: .35rem;
}
.contact-form-dark input[type="text"],
.contact-form-dark input[type="email"],
.contact-form-dark input[type="tel"],
.contact-form-dark textarea,
.contact-form-dark select {
  background: rgba(255, 255, 255, .16);
  border: 1px solid rgba(255, 255, 255, .4);
  color: #fff;
  border-radius: 4px;
  padding: .5rem .75rem;
  width: 100%;
  margin-bottom: .75rem;
  display: block;
}
.contact-form-dark input::placeholder,
.contact-form-dark textarea::placeholder { color: rgba(255, 255, 255, .6); }
.contact-form-dark input:focus,
.contact-form-dark textarea:focus {
  background: rgba(255, 255, 255, .24);
  border-color: #fff;
  outline: none;
  color: #fff;
}
.contact-form-dark .wpcf7-submit,
.contact-form-dark input[type="submit"] {
  background-color: var(--cw-green);
  border: 1px solid var(--cw-green-dark);
  color: #fff;
  font-weight: 500;
  padding: .5rem 1rem;
  width: 100%;
  border-radius: 4px;
  cursor: pointer;
  margin-top: .5rem;
}
.contact-form-dark .wpcf7-submit:hover,
.contact-form-dark input[type="submit"]:hover { background-color: var(--cw-green-dark); }
.contact-form-dark .wpcf7-not-valid-tip { color: rgba(255, 180, 180, .9); font-size: .8rem; }
.contact-form-dark .wpcf7-response-output { border-color: rgba(255, 255, 255, .3); color: rgba(255, 255, 255, .9); margin-top: 1rem; }
.contact-form-dark span.wpcf7-form-control-wrap { display: block; }
/* ── Colocation + Dedicated: Plan cards ── */
.plan-card               { border: 1px solid var(--cw-gray-border); border-radius: 4px; overflow: hidden; height: 100%; position: relative; max-width: 700px; margin-left: auto; margin-right: auto; }
.plan-card.plan-card-wide { max-width: none; }
.plan-header             { display: block; width: 100%; color: #fff; padding: 1rem 1.1rem; text-align: left; }
.plan-header .plan-name  { font-size: 1.3rem; font-weight: 700; letter-spacing: .5px; line-height: 1.15; }
.plan-header .plan-type  { font-size: 1.05rem; font-weight: 500; opacity: .95; line-height: 1.2; margin-top: .1rem; }
.plan-header .plan-u     { font-size: .72rem; opacity: .85; text-transform: uppercase; letter-spacing: .5px; margin-top: .15rem; }

/* Plan header color tiers */
.plan-header-core        { background-color: var(--cw-blue-light); }
.plan-header-edge        { background-color: var(--cw-blue); }
.plan-header-apex        { background-color: var(--cw-blue-dark); }
.plan-header-paler       { background-color: var(--cw-blue-paler); }
.plan-header-slate-light { background-color: var(--cw-slate-light); }
.plan-header-slate       { background-color: var(--cw-slate); }
.plan-header-slate-dark  { background-color: var(--cw-slate-dark); }

.plan-price              { font-size: 1.9rem; font-weight: 600; color: #3c4147; }
.plan-price sup          { font-size: 1rem; font-weight: 400; top: -.8em; }
.plan-price .per         { font-size: .9rem; color: var(--cw-text-muted); font-weight: 400; }
.plan-price .old-price   { font-size: 1.1rem; font-weight: 400; color: var(--cw-text-muted); text-decoration: line-through; margin-right: .45rem; }

.plan-card ul,
.plan-card ol                      { margin-left: 0; margin-top: 0; }
.plan-card ul.plan-features       { list-style: none; padding-left: 0; margin-bottom: 1rem; }
.plan-card ul.plan-features li    { padding: .3rem 0; font-size: .88rem; }
.plan-card ul.plan-features li i  { color: var(--cw-green-dark); margin-right: .5rem; }

/* Plan badges */
.badge-popular,
.badge-bestdeal,
.badge-limited {
  position: absolute;
  top: 0;
  right: 0;
  color: #fff;
  z-index: 2;
  font-size: .68rem;
  padding: .3rem .55rem;
  border-radius: 0 0 0 4px;
  letter-spacing: .5px;
  font-weight: 600;
}
.badge-popular  { background: var(--cw-green); }
.badge-bestdeal { background: #e0992f; }
.badge-limited  { background: #c0392b; }

.table-compact th,
.table-compact td   { padding: .35rem .4rem; }
.table-compact      { font-size: .78rem; }

.cabinet-badge {
  display: inline-block;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .5px;
  background: var(--cw-gray-bg);
  border: 1px solid var(--cw-gray-border);
  color: #5b6168;
  padding: .2rem .55rem;
  border-radius: 3px;
  text-transform: uppercase;
}

/* ── Colocation/Dedicated: Comparison cards ── */
.compare-card {
  border: 1px solid var(--cw-gray-border);
  border-radius: 6px;
  background: #fff;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .05);
}
.compare-card-header {
  display: flex;
  align-items: center;
  gap: .6rem;
  color: #fff;
  padding: 1.1rem 1.25rem;
  font-size: 1.2rem;
  font-weight: 700;
}
.compare-card-header i { font-size: 1.5rem; }
.compare-list { list-style: none; padding: 1.25rem; margin: 0; flex: 1; }
.compare-list li {
  padding: .65rem 0;
  border-bottom: 1px solid var(--cw-gray-border);
  display: flex;
  flex-direction: column;
  gap: .15rem;
}
.compare-list li:last-child { border-bottom: none; }
.compare-list li strong { font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--cw-text-muted); }
.compare-list li span   { font-size: .94rem; color: #3c4147; }
.compare-card .btn { margin: 0 1.25rem 1.25rem; }
.compare-vs {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: #fff;
  color: var(--cw-blue-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: .85rem;
  letter-spacing: .05em;
  border: 2px solid var(--cw-blue-paler);
  box-shadow: 0 1px 4px rgba(0, 0, 0, .08);
}

/* ── Plan cards: Accordion tweaks ── */
.plan-card .accordion-button               { font-size: .85rem; background-color: var(--cw-gray-bg); color: #4a4f55; }
.plan-card .accordion-button:not(.collapsed) { background-color: var(--cw-blue-pale); color: var(--cw-blue-dark); box-shadow: none; }
.plan-card .accordion-button:focus         { box-shadow: none; }
.plan-card .accordion-body                 { font-size: .85rem; }

/* ── FAQ: Accordion ── */
.faq-section-title {
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--cw-blue-dark);
  border-bottom: 2px solid var(--cw-blue-pale);
  padding-bottom: .5rem;
  margin-bottom: 1rem;
  margin-top: 2.5rem;
}
.faq-section-title:first-of-type          { margin-top: 0; }
.accordion-button                         { font-size: .95rem; color: #3c4147; font-weight: 500; }
.accordion-button:not(.collapsed)         { color: var(--cw-blue-dark); background: var(--cw-blue-pale); box-shadow: none; }
.accordion-button:focus                   { box-shadow: none; }
.accordion-body                           { font-size: .9rem; color: #5b6168; line-height: 1.7; }
.accordion-body p                         { margin-bottom: .75rem; }
.accordion-body p:last-child              { margin-bottom: 0; }
.accordion-body ul                        { padding-left: 1.25rem; margin-bottom: 0; }
.accordion-body ul li                     { margin-bottom: .35rem; }
.accordion-button::after                  { width: 1rem; height: 1rem; background-size: 1rem; }

/* ── FAQ: How It Works steps ── */
.step-num {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--cw-blue);
  color: #fff;
  font-size: 1.1rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.how-steps-v            { max-width: 560px; margin: 0 auto; display: flex; flex-direction: column; }
.how-step-v             { display: flex; align-items: flex-start; gap: 1.25rem; }
.how-step-v h6          { font-weight: 700; color: #3c4147; margin-bottom: .35rem; margin-top: .25rem; }
.how-step-v p           { font-size: .88rem; color: var(--cw-text-muted); margin: 0; }
.how-conn-v             { width: 48px; text-align: center; color: var(--cw-blue-paler); font-size: 1.25rem; line-height: 1; padding: .35rem 0; }

/* ── Colocation/Services: Feature boxes ── */
.feature-box   { background: var(--cw-gray-bg); border: 1px solid var(--cw-gray-border); border-left: 3px solid var(--cw-blue-light); padding: 1.1rem 1.25rem; color: #6c7278; display: flex; align-items: center; gap: .75rem; height: 100%; }
.feature-box i { font-size: 1.2rem; color: var(--cw-blue); }

/* ── Data Center: Spec cards ── */
.spec-card      { padding: 1.5rem 0; }
.spec-card h3   { font-weight: 600; color: #3c4147; margin-bottom: .75rem; font-size: 1.25rem; }
.spec-card h3 i { color: var(--cw-blue); margin-right: .4rem; }
.dc-spec-img {
  display: block;
  width: 100%;
  aspect-ratio: 32/9;
  object-fit: cover;
  border-radius: 4px;
  margin-bottom: 1rem;
}
.spec-card ul    { padding-left: 1.2rem; margin-bottom: 0; }
.spec-card ul li { font-size: .88rem; color: var(--cw-text-muted); padding: .2rem 0; }

/* ── Data Center: Photo grid ── */
/* Cells sized to match the pre-cropped 200x200 tiles in /images/datacenter-grid/
   so they display at native resolution instead of being stretched to fill a
   fluid full-bleed row. To go back to a fluid full-bleed grid instead:
   display:grid; grid-template-columns:repeat(6, 1fr); gap:4px;
   .dc-photo-grid div{ aspect-ratio:1/1; } */
.dc-photo-grid     { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.dc-photo-grid div {
  flex: 0 0 auto;
  width: 200px;
  height: 200px;
  border-radius: 2px;
  overflow: hidden;
}
.dc-photo-grid img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ── Services: Service cards ── */
.service-card {
  border: 1px solid var(--cw-gray-border);
  border-radius: 6px;
  padding: 2rem 1.75rem;
  background: #fff;
  height: 100%;
}
.service-card .service-icon { font-size: 2rem; color: var(--cw-blue); margin-bottom: 1rem; display: block; }
.service-card h3            { font-weight: 700; color: #3c4147; margin-bottom: .5rem; font-size: 1.5rem; }
.service-card .service-rate {
  display: inline-block;
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .4px;
  background: var(--cw-blue-pale);
  border: 1px solid #c8d9ec;
  color: var(--cw-blue-dark);
  padding: .25rem .6rem;
  border-radius: 3px;
  margin-bottom: 1rem;
}
.service-card ul    { padding-left: 1.2rem; margin-bottom: 0; }
.service-card ul li { font-size: .88rem; color: var(--cw-text-muted); padding: .2rem 0; }

/* ── About: Building placeholder + owner quote ── */
.building-placeholder {
  width: 100%;
  aspect-ratio: 3/4;
  border: 1px solid var(--cw-gray-border);
  border-radius: 4px;
  overflow: hidden;
}
.owner-quote            { border-left: 3px solid var(--cw-blue); padding: .75rem 1.25rem; margin: 1.75rem 0 1.25rem; }
.owner-quote blockquote { font-size: 1.05rem; line-height: 1.85; font-style: italic; color: #4a4f55; margin: 0 0 .5rem; }
.owner-quote cite       { font-size: .88rem; color: var(--cw-text-muted); font-style: normal; }

/* ── Contact: Info cards ── */
.contact-info-card {
  border: 1px solid var(--cw-gray-border);
  border-radius: 6px;
  padding: 1.75rem 1.5rem;
  background: #fff;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .6rem;
}
.contact-info-card .card-icon { font-size: 1.75rem; color: var(--cw-blue); margin-bottom: .25rem; }
.contact-info-card h5         { font-weight: 700; margin-bottom: .25rem; color: var(--cw-blue-dark); }
.contact-info-card p          { font-size: .9rem; color: #3c4147; margin: 0; line-height: 1.6; }
.contact-info-card a          { font-size: .9rem; }

/* ── Contact: Shipping panel ── */
.shipping-panel {
  background: var(--cw-blue-pale);
  border: 1px solid #c8d9ec;
  border-left: 4px solid var(--cw-blue-dark);
  border-radius: 6px;
  padding: 1.75rem 2rem;
}
.shipping-panel h5       { color: var(--cw-blue-dark); font-weight: 700; margin-bottom: 1rem; }
.shipping-panel ul       { margin: 0; padding-left: 1.25rem; }
.shipping-panel ul li    { font-size: .9rem; color: #3c4147; margin-bottom: .5rem; line-height: 1.6; }

/* ── Contact: Contact card ── */
.contact-card    { border: 1px solid var(--cw-gray-border); border-radius: 6px; padding: 2rem; background: #fff; }
.contact-card h5 { font-weight: 700; color: var(--cw-blue-dark); margin-bottom: 1.5rem; }

/* ── Legal pages: "doc" section dividers, TOC card, callouts ──
   Opt-in via explicit classNames set on Gutenberg core blocks (Heading/
   List/Quote) in Legal Pages/live/*.blocks.html — section dividers, a boxed
   Table of Contents, and callout boxes. Scoped entirely to these classes so
   it never affects any other page's headings/quotes. */
h2.doc-heading {
  font-size: 1.3rem; font-weight: 700; color: var(--cw-blue-dark);
  margin-top: 2.5rem; padding-top: 2rem; border-top: 1px solid var(--cw-gray-border);
}
h3.doc-heading { font-size: 1.05rem; font-weight: 700; color: var(--cw-blue-dark); margin-top: 1.5rem; }

.doc-toc-heading {
  background: var(--cw-gray-bg); border: 1px solid var(--cw-gray-border); border-bottom: none;
  border-radius: 8px 8px 0 0; padding: 1rem 1.5rem .5rem; margin-bottom: 0 !important;
}
/* Styled by DOM position (immediately after .doc-toc-heading), not by the
   .doc-toc-list className alone — when the TOC list has a nested sub-list
   inside a list item (Privacy Policy 1a/1b/1c, AUP Don'ts), WordPress's
   list block can fail validation on save and drop the custom className
   from the outer <ul> during recovery, even though the list content itself
   is untouched. The adjacent-sibling selector doesn't depend on that
   className surviving, so the box renders either way. */
.doc-toc-heading + ul,
.doc-toc-list {
  /* style.css's base "ul, ol { margin: 0 0 1.5em 3em; }" rule otherwise
     shifts this box 3em off the left edge, out of alignment with
     .doc-toc-heading above it — reset all sides explicitly. */
  margin: 0 0 2rem;
  background: var(--cw-gray-bg); border: 1px solid var(--cw-gray-border); border-top: none;
  border-radius: 0 0 8px 8px; padding: .75rem 1.5rem 1.25rem 2.75rem;
}
.doc-toc-heading + ul ul,
.doc-toc-list ul { margin: .5rem 0 0 1.25rem; }

.doc-callout {
  background: var(--cw-blue-pale); border-left: 4px solid var(--cw-blue-dark);
  border-radius: 6px; padding: 1rem 1.25rem; margin: 1.5rem 0;
}
.doc-callout p { color: #4a4f55; font-size: .92rem; margin-bottom: 0; }

/* ══════════════════════════════════════════════════════════════════
   § 18  Contact Form 7 Overrides
   ══════════════════════════════════════════════════════════════════ */

/* Position CF7's inline success/error message below the form */
.wpcf7-response-output { margin: 1rem 0 0 !important; }

/* CF7's own stylesheet targets input[type="submit"] and wins over .btn-cw-green.
   Re-assert our green button styles with equal specificity on the combined selector. */
input.wpcf7-submit.btn-cw-green       { background-color: var(--cw-green); border-color: var(--cw-green-dark); color: #fff; font-weight: 500; }
input.wpcf7-submit.btn-cw-green:hover { background-color: var(--cw-green-dark); border-color: var(--cw-green-dark); color: #fff; }