/* ba-li ported */
/* ═══════════════════════════════════════════════════════════
   Blue Arctic · Homepage (the Home V2 design, promoted to / on
   2026-09-23). Namespaced .hv-*, loaded only by index.php AFTER tokens →
   base → components → hero. Everything shared comes from those
   sheets: .container, .section, .section-head, .eyebrow, .lead,
   .btn*, .plans-* and .plan-* (components.css), .trust-row
   (hero.css). This file holds only what is unique to the page.
   Order mirrors the page: hero → proof → products → what you get →
   the company → reviews → final CTA →
   responsive → reduced motion.
   ═══════════════════════════════════════════════════════════ */

/* ── 0 · Page theme hooks ───────────────────────────────── */
/* Metric-matched fallbacks, page-scoped. Until Manrope and Inter arrive the
   hero sets in a local face scaled to the same advance widths, so the web
   font swap changes nothing about where lines break. Measured: Manrope 800
   is 1.4% wider than Arial Bold, Inter 400 is 6.6% wider than Arial. */
@font-face {
  font-family: "Manrope Fallback";
  src: local("Arial"), local("Helvetica Neue"), local("Helvetica");
  size-adjust: 101.4%;
}
@font-face {
  font-family: "Inter Fallback";
  src: local("Arial"), local("Helvetica Neue"), local("Helvetica");
  size-adjust: 106.6%;
}
body.theme-hv {
  --font-display: "Manrope", "Manrope Fallback", sans-serif;
  --font-body:    "Inter", "Inter Fallback", sans-serif;
  --hv-canvas:      #081420;          /* hero and dark canvases: navy-950 */
  --hv-canvas-2:    #0C1D2E;          /* navy-900 */
  --hv-canvas-deep: #050B14;          /* the floor of the hero */
  --hv-line-dark:   rgba(255, 255, 255, .09);
  --hv-text-dark:   #C6D3DF;          /* body copy on the canvas */
  --hv-text-dark-2: #8FA9C0;          /* meta on the canvas */
  --header-dark-bg: var(--hv-canvas);
  --announce-bg:    var(--hv-canvas);
  overflow-x: clip;
}
body.theme-hv .announce { color: #B8CBDD; }
body.theme-hv .header-dark.is-scrolled { border-bottom-color: var(--hv-line-dark); }

/* Homepage display scale: hero headline two lines at 56px/800, section
   headlines at 48px/800, both responsive. */
.page-home .hv-hero h1 {
  font-size: clamp(2.5rem, 2.6vw + 1.1rem, 3.75rem);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -.028em;
}
.page-home .section-head h2 {
  font-size: clamp(1.9rem, 1.5vw + 1.65rem, 3rem);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -.025em;
}

/* Dark surfaces re-point the focus ring: blue-500 vanishes on navy. */
.hv-hero :focus-visible,
.hv-included :focus-visible,
.hv-why :focus-visible,
.hv-final :focus-visible { outline-color: var(--sky-400); }

/* Scroll reveal. Armed ONLY once home-v2.js has confirmed IntersectionObserver
   fires (html.hv-io): a browser that never runs the script, or a hidden
   document where the observer stays silent, keeps everything visible. */
html.hv-io .hv-r {
  opacity: 0;
  transform: translate3d(0, 14px, 0);
  transition: opacity 560ms var(--ease-out), transform 560ms var(--ease-out);
  transition-delay: var(--d, 0ms);
}
html.hv-io .hv-r.in { opacity: 1; transform: none; }

/* ── 1 · Hero ───────────────────────────────────────────────
   One continuous canvas. Layers, back to front: navy base → the Tampa
   datacenter photograph on the right, masked so it dissolves into the navy
   toward the centre → the veil (overcast, floor fade, vignette) → blue
   ambient light → the pointer light → copy. The photograph is pre-graded
   (darkened, cooled) in the asset itself; the CSS only fades and lights it.
   Moving layers animate transform or opacity only. */
.hv-hero {
  position: relative;
  isolation: isolate;
  overflow: clip;
  color: #A8BFD3;
  background: linear-gradient(180deg, var(--hv-canvas) 0%, #07111C 58%, var(--hv-canvas-deep) 100%);
}
.hv-hero-bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.hv-hero-bg > * { position: absolute; display: block; }
/* A faint blue floor under the headline so the left half is not flat. */
.hv-hero-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(42rem 24rem at 12% 88%, rgba(21, 96, 232, .16) 0%, rgba(21, 96, 232, .05) 45%, transparent 100%);
}
/* The photograph: the right 62% of the canvas, cropped by object-fit so the
   right rack row and the ceiling light strip stay at the viewport edge, and
   masked from transparent at its left edge to solid at 62% of its width. */
.hv-hero-photo {
  --hv-px: 0;
  --hv-py: 0;
  top: 0;
  right: 0;
  bottom: 0;
  width: 62%;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, .28) 26%, rgba(0, 0, 0, .78) 50%, #000 66%);
  mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, .28) 26%, rgba(0, 0, 0, .78) 50%, #000 66%);
}
.hv-hero-photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 100% 42%;
  /* 3% headroom so the few pixels of parallax never expose an edge. */
  transform: translate3d(calc(var(--hv-px) * 6px), calc(var(--hv-py) * 4px), 0) scale(1.03);
  will-change: transform;
}
/* The veil: a navy overcast across the top (so the header seam stays dark),
   the floor dissolving into the deep navy, the far right edge held back,
   and a soft vignette over the whole photograph. */
.hv-hero-veil {
  inset: 0;
  background:
    linear-gradient(180deg, rgba(8, 20, 32, .62) 0%, rgba(8, 20, 32, .1) 26%, rgba(8, 20, 32, 0) 50%, rgba(5, 11, 20, .5) 82%, var(--hv-canvas-deep) 100%),
    linear-gradient(90deg, rgba(8, 20, 32, 0) 78%, rgba(8, 20, 32, .38) 100%),
    radial-gradient(56% 78% at 74% 48%, rgba(5, 11, 20, 0) 46%, rgba(5, 11, 20, .26) 100%);
}
/* Blue Arctic ambient light resting on the racks. Screen blend, so it lifts
   the highlights toward blue rather than painting a flat tint. */
.hv-hero-ambient {
  inset: 0;
  mix-blend-mode: screen;
  background:
    radial-gradient(46rem 30rem at 72% 56%, rgba(21, 96, 232, .26) 0%, rgba(21, 96, 232, .07) 50%, transparent 100%),
    radial-gradient(30rem 18rem at 94% 8%, rgba(95, 185, 238, .16) 0%, transparent 100%);
}
/* Pointer light: a small cool key light the script moves with the mouse. */
.hv-hero-light {
  left: 0; top: 0;
  width: 44rem;
  height: 44rem;
  margin: -22rem 0 0 -22rem;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(233, 240, 247, .05) 0%, rgba(95, 185, 238, .045) 34%, transparent 64%);
  opacity: 0;
  transition: opacity 900ms var(--ease-out);
  will-change: transform;
}
.hv-hero.hv-lit .hv-hero-light { opacity: 1; }

/* Provenance, pinned to the floor of the photograph. Small, not a badge. */
.hv-hero-caption {
  position: absolute;
  right: 0;
  bottom: 0;
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-size: var(--fs-tiny);
  color: #9DB4C9;
  white-space: nowrap;
}
.hv-hero-caption .ico { color: var(--sky-400); flex: none; }
.hv-hero-caption-band { display: none; }

/* ── Copy ── */
.hv-hero .container { position: relative; z-index: 2; }
.hv-hero-inner {
  display: grid;
  grid-template-columns: minmax(0, 57fr) minmax(0, 43fr);
  align-items: stretch;
  gap: clamp(2rem, 4vw, 4rem);
  padding-block: clamp(2.5rem, 4.4vw, 3.6rem) clamp(2.25rem, 3.6vw, 2.75rem);
}
.hv-hero-copy { align-self: center; }
.hv-hero-stage { position: relative; min-height: 100%; }
.hv-hero-copy .eyebrow { margin-bottom: 1.15rem; }
.hv-hero-copy h1 {
  margin-bottom: 1.15rem;
  color: #F6FAFD;
  text-shadow: 0 2px 40px rgba(5, 11, 20, .5);
}
/* "That Just Works." takes its own line on desktop: two lines, always. */
.hv-hero-copy h1 em {
  display: block;
  font-style: normal;
  color: var(--sky-400);
  background: linear-gradient(92deg, #9EDBF8 0%, var(--sky-400) 45%, var(--blue-500) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: none;
}
.hv-hero-copy .lead { max-width: 33rem; margin-bottom: 1.5rem; color: #B4C7D9; }
.hv-hero-ctas { display: flex; flex-wrap: wrap; gap: .7rem; margin-bottom: 1.15rem; }
.hv-hero .btn-primary { box-shadow: 0 1px 2px rgba(0, 0, 0, .5), 0 14px 34px -14px rgba(21, 96, 232, .8); }
.hv-hero .btn-primary:hover { background: var(--blue-500); }
.hv-hero .btn-on-dark { background: rgba(8, 20, 32, .38); border-color: rgba(175, 205, 230, .32); }
.hv-hero .btn-on-dark:hover { background: rgba(8, 20, 32, .6); border-color: rgba(142, 210, 246, .6); }

/* ── The offer ──
   A native <details>: the whole line is the summary, so the toggle needs
   no script and reads in order. "Offer details" is the visible affordance;
   the terms sentence (includes/free-trial.php) sits one click away. */
.hv-offer { margin: 0 0 1.2rem; }
.hv-offer summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .3rem 1rem;
  width: max-content;
  max-width: 100%;
  list-style: none;
  cursor: pointer;
  border-radius: 4px;
}
.hv-offer summary::-webkit-details-marker { display: none; }
.hv-offer-line {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  font-size: 1.0625rem;
  color: #D3DEE8;
}
.hv-offer-line .ico { flex: none; color: var(--sky-400); }
.hv-offer-line strong { color: #F6FAFD; font-weight: 700; }
.hv-offer-more {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font-size: var(--fs-tiny);
  font-weight: 600;
  color: #9DB4C9;
  text-decoration: underline;
  text-underline-offset: .2em;
  text-decoration-color: rgba(157, 180, 201, .45);
  transition: color var(--dur-fast);
}
.hv-offer-more::after {
  content: "";
  width: .42em;
  height: .42em;
  margin-top: -.25em;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
  transition: transform var(--dur-fast) var(--ease-out);
}
.hv-offer[open] .hv-offer-more::after { transform: rotate(-135deg); margin-top: .2em; }
.hv-offer summary:hover .hv-offer-more { color: #F6FAFD; text-decoration-color: currentColor; }
.hv-offer-terms {
  margin: .6rem 0 0 1.7rem;
  max-width: 32rem;
  font-size: var(--fs-tiny);
  line-height: 1.55;
  color: #9DB4C9;
}
.hv-offer-terms a { color: var(--sky-400); }

/* Four benefits, two per row, plain text with a tick. No cards, no pills. */
.hv-hero-proof {
  display: grid;
  grid-template-columns: repeat(2, max-content);
  gap: .5rem 2rem;
  margin: 0 0 1.4rem;
  padding: 0;
  list-style: none;
  font-size: var(--fs-small);
  color: #C0D1E0;
}
.hv-hero-proof li { display: inline-flex; align-items: center; gap: .45rem; white-space: nowrap; }
.hv-hero-proof .ico { color: #2FC48E; flex: none; }

/* Review platforms: visible, secondary to the CTAs. */
.hv-hero .trust-row {
  padding-top: 1.1rem;
  border-top: 1px solid rgba(255, 255, 255, .09);
  --trust-name-color: #EAF2F9;
  --trust-meta-color: #9DB4C9;
  --trust-rule-color: rgba(234, 242, 249, .45);
  --trust-star-empty: rgba(255, 255, 255, .15);
  --trust-star-glyph: #fff;
}

/* ── Motion (additive; the reduced-motion state is the finished design) ── */
@media (prefers-reduced-motion: no-preference) {
  html.hv-js .hv-hero-copy > * { animation: hvRise 620ms var(--ease-out) both; }
  html.hv-js .hv-hero-copy > :nth-child(1) { animation-delay: 40ms; }
  html.hv-js .hv-hero-copy > :nth-child(2) { animation-delay: 110ms; }
  html.hv-js .hv-hero-copy > :nth-child(3) { animation-delay: 180ms; }
  html.hv-js .hv-hero-copy > :nth-child(4) { animation-delay: 250ms; }
  html.hv-js .hv-hero-copy > :nth-child(5) { animation-delay: 310ms; }
  html.hv-js .hv-hero-copy > :nth-child(n+6) { animation-delay: 370ms; }
  html.hv-js .hv-hero-photo { animation: hvPhotoIn 1200ms var(--ease-out) both; }
}
@keyframes hvRise {
  from { opacity: 0; transform: translate3d(0, 10px, 0); }
  to   { opacity: 1; transform: none; }
}
@keyframes hvPhotoIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ── 2 · Proof: the light transition (logos, then the proof bar) ─────
   Band spacing, not section spacing: it belongs to the hero above and
   the plans below. */
.hv-proof { padding-block: clamp(2.5rem, 4vw, 3.25rem) 0; background: var(--paper); }
/* The proof bar: one rounded container, four segments, each an icon tile,
   an oversized figure and a short label. Hairlines between segments are
   short, so the bar reads as one unit rather than four boxes. */
.hv-figures {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: clamp(2rem, 3.5vw, 2.75rem) 0 0;
  padding: .4rem;
  list-style: none;
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  background: linear-gradient(180deg, #F9FBFE 0%, #F1F6FB 100%);
  box-shadow: var(--shadow-soft), inset 0 1px 0 #fff;
}
.hv-figure {
  position: relative;
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.2rem 1.35rem;
  border-radius: calc(var(--r-lg) - .4rem);
  transition: background-color var(--dur-med) var(--ease-out), box-shadow var(--dur-med) var(--ease-out);
}
.hv-figure + .hv-figure::before {
  content: "";
  position: absolute;
  left: 0;
  top: 24%;
  height: 52%;
  width: 1px;
  background: var(--line-2);
  opacity: .7;
}
@media (hover: hover) {
  .hv-figure:hover { background: #fff; box-shadow: 0 2px 4px rgba(8, 25, 45, .04), 0 14px 32px -20px rgba(8, 25, 45, .22); }
  .hv-figure:hover + .hv-figure::before { opacity: 0; }
}
.hv-figure-ico {
  flex: none;
  display: grid;
  place-items: center;
  width: 2.6rem;
  height: 2.6rem;
  border-radius: .85rem;
  color: var(--blue-600);
  background: linear-gradient(135deg, var(--ice-100), var(--blue-100));
  border: 1px solid var(--ice-200);
}
.hv-figure-copy { min-width: 0; }
.hv-figure-copy strong {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 2.4vw, 2.45rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.035em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.hv-figure-copy strong small {
  font-size: .5em;
  font-weight: 700;
  letter-spacing: 0;
  color: var(--blue-600);
  margin-left: .12em;
}
.hv-figure-copy span {
  display: block;
  margin-top: .35rem;
  font-size: var(--fs-tiny);
  font-weight: 500;
  line-height: 1.3;
  color: var(--ink-2);
}

/* ── 3 · Hosting plans, then the secondary row ─────────────
   The two hosting families that most visitors buy get the room: Shared Web
   Hosting (with the billing switch) and Managed WordPress, each a
   bluearctic/plan-summary row. Website Care and servers follow as two
   balanced cards (.hv-managed-card material) with text links, a step down
   in weight from the plan buttons. Every price is a Core data token. */
.hv-plans { background: linear-gradient(180deg, var(--paper) 0%, #F6F9FD 100%); }
.hv-plans .section-head { margin-bottom: clamp(2rem, 3.5vw, 2.75rem); }
.hv-plans .section-head .lead a { color: var(--blue-600); font-weight: 600; }
.hv-plans .plans-offer { margin-top: clamp(1.75rem, 3vw, 2.25rem); }

.hv-more { background: #F6F9FD; }
.hv-more .section-head { margin-bottom: clamp(1.5rem, 2.8vw, 2rem); }
.hv-more-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-card-gap);
}
.hv-more-grid .hv-managed-card h3 { font-size: clamp(1.3rem, 1.7vw, 1.55rem); }
.hv-more-grid .hv-managed-card > p { font-size: var(--fs-small); margin-bottom: 1.25rem; }
.hv-more-tiers {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .75rem;
  margin: 0 0 1.5rem;
}
.hv-more-tier {
  padding: 1rem 1.1rem 1.05rem;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--mist);
}
.hv-more-tier-name { margin: 0; font-size: var(--fs-small); font-weight: 700; color: var(--ink); }
.hv-more-tier-price { margin: .3rem 0 .4rem; font-family: var(--font-display); font-size: 1.45rem; font-weight: 800; letter-spacing: -.02em; line-height: 1.1; color: var(--ink); }
.hv-more-tier-price span { margin-left: .15rem; font-family: var(--font-body); font-size: var(--fs-tiny); font-weight: 600; letter-spacing: 0; color: var(--ink-3); }
.hv-more-tier-price small { margin-right: .25rem; font-family: var(--font-body); font-size: var(--fs-tiny); font-weight: 600; letter-spacing: 0; color: var(--ink-3); }
.hv-more-tier-for { margin: 0; font-size: .8125rem; line-height: 1.5; color: var(--ink-2); }
.hv-more-links {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  gap: .6rem 1.75rem;
  margin-top: auto;
}
.hv-more-links p { margin: 0; font-size: var(--fs-small); }
.hv-more-note {
  margin: clamp(1.25rem, 2.4vw, 1.75rem) 0 0;
  font-size: var(--fs-small);
  color: var(--ink-2);
  text-align: center;
}
.hv-more-note a { color: var(--blue-600); font-weight: 600; }
.hv-new {
  display: inline-block;
  margin-left: .35rem;
  padding: .1rem .45rem;
  border-radius: var(--r-pill);
  background: rgba(95, 185, 238, .2);
  color: #BFE4F8;
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  vertical-align: .15em;
}

/* ── 4 · What you get (expanding canvas) ──────────────────
   The dark panel is full width in layout; home-v2.js drives --p 0→1 as it
   scrolls in and clip-path reveals it from content width (half the space
   outside --container, rounded) to the viewport edges. Nothing moves, so it
   costs no layout shift. Without the script, or under reduced motion, it
   stays a rounded, inset card. The inset never exceeds the space outside the
   container: a 2rem floor put the clip on the content edge between 901 and
   1279px, cutting the card borders. Below --container it runs edge to edge. */
.hv-showcase { --p: 0; --hv-inset: max(0px, (100vw - var(--container)) / 2); }
.hv-showcase-canvas {
  clip-path: inset(0 calc((1 - var(--p)) * var(--hv-inset)) round calc((1 - var(--p)) * var(--r-xl)));
}
.hv-included {
  position: relative;
  padding-block: clamp(3rem, 5vw, 4.25rem);
  color: #D9E6F2;
  background:
    radial-gradient(60rem 26rem at 110% 0%, rgba(95, 185, 238, .14), transparent 55%),
    radial-gradient(40rem 22rem at -10% 100%, rgba(21, 96, 232, .12), transparent 55%),
    var(--hv-canvas);
}
.hv-included::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cg fill='none' stroke='%23AFCDE6' stroke-width='1'%3E%3Cpath d='M-10 70 78 44l82 46 110-38M78 44 64-12M160 90l8 180M160 90l106 62M-20 190l96 34 84-20'/%3E%3C/g%3E%3Cg fill='%23AFCDE6'%3E%3Ccircle cx='78' cy='44' r='2.2'/%3E%3Ccircle cx='160' cy='90' r='2.2'/%3E%3Ccircle cx='76' cy='224' r='2.2'/%3E%3C/g%3E%3C/svg%3E") 0 0 / 260px 260px;
  opacity: .05;
  -webkit-mask-image: linear-gradient(90deg, #000, transparent 55%);
  mask-image: linear-gradient(90deg, #000, transparent 55%);
}
.hv-included .container { position: relative; }
.hv-included-grid {
  display: grid;
  grid-template-columns: minmax(0, .84fr) minmax(0, 1.16fr);
  gap: clamp(2.5rem, 5vw, 4.5rem);
  align-items: center;
}
.hv-included .section-head { margin-bottom: 1.5rem; }
.hv-included .section-head h2 { color: #F4F9FD; }
.hv-included .section-head .lead { color: #A8BFD3; }
.hv-included .link-arrow { color: var(--sky-400); }
.hv-included-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .9rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.hv-included-item {
  display: grid;
  grid-template-columns: 2.6rem minmax(0, 1fr);
  column-gap: .9rem;
  align-items: start;
  padding: 1.05rem 1.1rem;
  border-radius: var(--r-lg);
  border: 1px solid var(--hv-line-dark);
  background: linear-gradient(180deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .025));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05);
  transition: border-color var(--dur-med), background-color var(--dur-med), transform var(--dur-med) var(--ease-out);
}
.hv-included-item:hover { border-color: rgba(95, 185, 238, .32); transform: translateY(-2px); }
.hv-included-ico {
  display: grid;
  place-items: center;
  width: 2.6rem;
  height: 2.6rem;
  border-radius: var(--r-md);
  background: linear-gradient(135deg, rgba(95, 185, 238, .22), rgba(21, 96, 232, .18));
  border: 1px solid rgba(95, 185, 238, .28);
  color: #9EDBF8;
}
.hv-included-item h3 { font-size: 1.05rem; letter-spacing: -.012em; color: #F4F9FD; margin: .2rem 0 .2rem; }
.hv-included-item p { margin: 0; font-size: var(--fs-tiny); color: #A8BFD3; line-height: 1.5; }

/* ── 5 · Product card component (used by section 3) ──────── */
.hv-managed .section-head { margin-bottom: clamp(1.75rem, 3vw, 2.5rem); }
.hv-managed-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-card-gap);
}
.hv-managed-card {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: clamp(1.75rem, 2.6vw, 2.35rem);
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  background: var(--paper);
  box-shadow: var(--shadow-soft);
  transition: transform var(--dur-med) var(--ease-out), box-shadow var(--dur-med) var(--ease-out), border-color var(--dur-med);
}
.hv-managed-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); border-color: var(--ice-200); }
/* A quiet arctic wash in the far corner: the card's own light. */
.hv-managed-card::before {
  content: "";
  position: absolute;
  inset: -40% -30% auto auto;
  width: 22rem;
  height: 22rem;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(95, 185, 238, .16), transparent);
  pointer-events: none;
}
.hv-managed-top { position: relative; display: flex; align-items: center; gap: .9rem; margin-bottom: 1.35rem; }
.hv-managed-ico {
  display: grid;
  place-items: center;
  flex: none;
  width: 3.1rem;
  height: 3.1rem;
  border-radius: var(--r-md);
  background: linear-gradient(135deg, var(--ice-100), var(--blue-100));
  border: 1px solid var(--ice-200);
  color: var(--blue-600);
}
.hv-managed-kicker {
  margin: 0;
  font-family: var(--font-display);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--blue-600);
}
.hv-managed-card h3 { font-size: clamp(1.4rem, 1.9vw, 1.75rem); line-height: 1.12; letter-spacing: -.022em; margin-bottom: .65rem; max-width: 22ch; }
.hv-managed-card > p { font-size: var(--fs-body); color: var(--ink-2); line-height: 1.6; max-width: 32rem; margin-bottom: 1.5rem; }
.hv-managed-foot {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .85rem;
  margin-top: auto;
}
.hv-managed-price { margin: 0; font-size: var(--fs-small); font-weight: 600; color: var(--ink); }
.hv-managed-price span { margin: 0 .45rem; color: var(--ink-3); font-weight: 400; }

/* ── 6 · Real infrastructure. Real people. ──────────────────
   Sticky copy on the left; on the right an editorial photo, an inset photo
   and three short statements. Photos are lazy, sized to their slot, and
   carry no attribution beyond the building. */
.hv-why {
  position: relative;
  color: var(--steel-200);
  background:
    linear-gradient(90deg, transparent 0%, rgba(95, 185, 238, .34) 16%, rgba(95, 185, 238, .10) 62%, transparent 94%) bottom left / 100% 1px no-repeat,
    linear-gradient(178deg, var(--carbon-950) 0%, var(--carbon-900) 44%, var(--carbon-850) 100%);
}
.hv-why-grid {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  gap: clamp(2.5rem, 6vw, 6rem);
  align-items: start;
}
.hv-why-side { position: sticky; top: calc(var(--header-h) + 2.5rem); }
.hv-why-side .section-head { margin-bottom: 1.75rem; }
.hv-why-side .section-head h2 { color: var(--silver-100); }
.hv-why-side .section-head .lead { color: var(--steel-200); }
.hv-why-side .eyebrow { color: var(--steel-400); }
.hv-why-side .link-arrow { margin-top: 1.5rem; color: var(--sky-400); }
/* Two links side by side (our story, Tampa); they wrap on narrow screens. */
.hv-why-links { flex-wrap: wrap; gap: .6rem 1.75rem; }
.hv-why-media {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 1rem;
  align-items: start;
}
.hv-photo {
  position: relative;
  margin: 0;
  overflow: hidden;
  border-radius: var(--r-lg);
  border: 1px solid var(--carbon-hair);
  background: var(--carbon-900);
  box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .8);
}
.hv-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.hv-photo figcaption {
  position: absolute;
  left: .85rem;
  top: .85rem;
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  max-width: calc(100% - 1.7rem);
  padding: .45rem .8rem .45rem .65rem;
  border-radius: var(--r-pill);
  border: 1px solid rgba(175, 205, 230, .18);
  background: rgba(8, 20, 32, .72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  font-size: var(--fs-tiny);
  font-weight: 500;
  color: #DCE8F3;
}
.hv-photo figcaption .ico { color: var(--sky-400); flex: none; }
.hv-photo-cap-short { display: none; }
.hv-photo-wide { grid-column: 1 / 13; aspect-ratio: 3 / 2; }
.hv-photo-inset {
  grid-column: 1 / 7;
  aspect-ratio: 3 / 2;
  margin-top: -4.5rem;
  margin-left: 1.5rem;
  z-index: 1;
  border-color: rgba(175, 205, 230, .22);
}
/* Three statements in one row under the photographs. */
.hv-why-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0 clamp(1.5rem, 3vw, 3rem);
  margin: clamp(1.75rem, 3vw, 2.5rem) 0 0;
  padding: 0;
  list-style: none;
  counter-reset: why;
  border-top: 1px solid var(--carbon-hair);
}
.hv-why-item {
  display: grid;
  grid-template-columns: 2.4rem minmax(0, 1fr);
  column-gap: .75rem;
  padding: 1.35rem 0 0;
}
.hv-why-item::before {
  counter-increment: why;
  content: "0" counter(why);
  grid-row: 1 / 3;
  font-family: var(--font-display);
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .1em;
  color: var(--sky-400);
  padding-top: .3rem;
}
.hv-why-item h3 { font-size: 1.05rem; letter-spacing: -.015em; color: var(--silver-100); margin-bottom: .25rem; }
.hv-why-item p { font-size: var(--fs-tiny); color: var(--steel-200); line-height: 1.55; }

/* ── 7 · Reviews (one featured quote at a time) ──────────── */
.hv-reviews { background: var(--paper); }
.hv-reviews .section-head { margin-bottom: clamp(1.5rem, 2.6vw, 2rem); }
.hv-rv { max-width: 54rem; margin-inline: auto; }
/* All three quotes share one cell, so the stage is as tall as the longest
   and never changes height (no shift when it rotates); shorter quotes sit
   centred in it rather than leaving a gap above the tabs. */
.hv-rv-stage { display: grid; align-items: center; }
.hv-rv-item { grid-area: 1 / 1; margin: 0; text-align: center; }
/* Stage mode only once the script has taken over; without it the three
   reviews simply stack, all visible. */
html.hv-js .hv-rv-item {
  opacity: 0;
  visibility: hidden;
  transform: translate3d(0, 12px, 0);
  transition: opacity 520ms var(--ease-out), transform 520ms var(--ease-out), visibility 0s linear 520ms;
}
html.hv-js .hv-rv-item.is-active { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
html:not(.hv-js) .hv-rv-item + .hv-rv-item { margin-top: 3rem; }
.hv-rv-stars { display: inline-flex; gap: .15rem; color: var(--star); margin-bottom: 1.1rem; }
.hv-rv-quote {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 2.1vw, 1.75rem);
  font-weight: 600;
  line-height: 1.36;
  letter-spacing: -.018em;
  color: var(--ink);
  text-wrap: pretty;
}
.hv-rv-quote::before {
  content: "\201C";
  display: block;
  font-size: clamp(3.5rem, 6vw, 5rem);
  line-height: .55;
  font-weight: 800;
  color: var(--ice-200);
  margin-bottom: .4rem;
}
.hv-rv-meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: .35rem .75rem;
  margin-top: 1.35rem;
  font-size: var(--fs-small);
  color: var(--ink-2);
}
.hv-rv-meta cite { font-style: normal; font-weight: 700; color: var(--ink); }
.hv-rv-meta .hv-rv-src { font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.hv-rv-tabs { display: flex; justify-content: center; flex-wrap: wrap; gap: .5rem; margin-top: 1.5rem; }
html:not(.hv-js) .hv-rv-tabs { display: none; }
.hv-rv-tab {
  position: relative;
  overflow: hidden;
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .1rem;
  min-width: 11rem;
  padding: .7rem .95rem .8rem;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--paper);
  color: var(--ink-2);
  font: inherit;
  font-size: var(--fs-tiny);
  text-align: left;
  cursor: pointer;
  transition: border-color var(--dur-fast), color var(--dur-fast), background-color var(--dur-fast);
}
.hv-rv-tab strong { font-weight: 700; color: var(--ink); font-size: var(--fs-small); }
.hv-rv-tab:hover { border-color: var(--line-2); background: var(--mist); }
.hv-rv-tab[aria-selected="true"] { border-color: var(--blue-500); box-shadow: 0 0 0 1px var(--blue-500); }
.hv-reviews .trust-row {
  justify-content: center;
  gap: .5rem clamp(1.5rem, 3.5vw, 2.5rem);
  margin-top: 1.5rem;
  --trust-name-color: var(--ink);
  --trust-meta-color: var(--ink-2);
  --trust-rule-color: var(--line-2);
  --trust-star-empty: #DCDCE6;
  --trust-star-glyph: #fff;
}

/* ── 8 · Final CTA ─────────────────────────────────────── */
.hv-final { padding-top: 0; background: var(--paper); }
.hv-final-card {
  --mx: 50%;
  --my: 40%;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding: clamp(2.5rem, 4.5vw, 3.75rem) clamp(1.5rem, 5vw, 4rem);
  border-radius: var(--r-xl);
  text-align: center;
  color: var(--hv-text-dark);
  background:
    radial-gradient(52rem 30rem at var(--mx) var(--my), rgba(95, 185, 238, .18), transparent 62%),
    radial-gradient(40rem 20rem at 0% 100%, rgba(21, 96, 232, .22), transparent 60%),
    linear-gradient(170deg, var(--hv-canvas-2), var(--hv-canvas) 70%);
  box-shadow: var(--shadow-panel);
}
.hv-final-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cg fill='none' stroke='%23AFCDE6' stroke-width='1'%3E%3Cpath d='M-10 70 78 44l82 46 110-38M78 44 64-12M160 90l8 180M160 90l106 62M-20 190l96 34 84-20'/%3E%3C/g%3E%3Cg fill='%23AFCDE6'%3E%3Ccircle cx='78' cy='44' r='2.2'/%3E%3Ccircle cx='160' cy='90' r='2.2'/%3E%3Ccircle cx='76' cy='224' r='2.2'/%3E%3C/g%3E%3C/svg%3E") 0 0 / 260px 260px;
  opacity: .07;
  -webkit-mask-image: radial-gradient(60% 80% at 50% 50%, #000, transparent);
  mask-image: radial-gradient(60% 80% at 50% 50%, #000, transparent);
}
.hv-final-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), inset 0 0 0 1px rgba(95, 185, 238, .12);
}
.hv-final-card h2 {
  font-size: clamp(1.9rem, 1.5vw + 1.65rem, 3rem);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -.025em;
  color: #F6FAFD;
  max-width: 18ch;
  margin: 0 auto .8rem;
}
.hv-final-card .lead { color: var(--hv-text-dark); max-width: 34rem; margin: 0 auto 1.75rem; }
.hv-final-ctas { display: flex; flex-wrap: wrap; justify-content: center; gap: .8rem; }
.hv-final-note { margin-top: 1.1rem; font-size: var(--fs-tiny); color: var(--hv-text-dark-2); }
.hv-final-note a { color: var(--hv-text-dark-2); text-decoration: underline; text-underline-offset: .2em; }
.hv-final-note a:hover { color: var(--sky-400); }
.hv-final .btn-primary { box-shadow: 0 1px 2px rgba(0, 0, 0, .5), 0 14px 34px -14px rgba(21, 96, 232, .7); }
.hv-final .btn-primary:hover { background: var(--blue-500); }

/* ── 9 · Responsive ────────────────────────────────────── */
/* Short desktop viewports: the whole hero, reviews included, stays on the
   first screen and the proof band starts below it. */
@media (min-width: 901px) and (max-height: 820px) {
  .page-home .hv-hero h1 { font-size: clamp(2.3rem, 2.2vw + 1rem, 3.2rem); }
  .hv-hero-inner { padding-block: 1.9rem 1.75rem; }
  .hv-hero-copy .lead { margin-bottom: 1.2rem; }
  .hv-hero-proof { margin-bottom: 1.1rem; }
}

/* Narrow desktops: the copy column needs more of the width, and the
   photograph reaches further under it, so the fade starts later. */
@media (min-width: 901px) and (max-width: 1199px) {
  .page-home .hv-hero h1 { font-size: clamp(2.3rem, 3.4vw + .5rem, 3.1rem); }
  .hv-hero-inner { grid-template-columns: minmax(0, 60fr) minmax(0, 40fr); }
  .hv-hero-photo {
    width: 58%;
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, .2) 30%, rgba(0, 0, 0, .75) 56%, #000 72%);
    mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, .2) 30%, rgba(0, 0, 0, .75) 56%, #000 72%);
  }
}

@media (max-width: 1100px) {
  .hv-included-grid { grid-template-columns: minmax(0, 1fr); }
  .hv-included .section-head { max-width: 40rem; }
}

@media (max-width: 900px) {
  /* Hero re-composed for touch: the copy centred on plain navy, then the
     photograph as a band beneath it, emerging from the navy with a strong
     fade so nothing is read over it. */
  .hv-hero { display: flex; flex-direction: column; }
  .hv-hero .container { order: 1; }
  .hv-hero-bg {
    position: relative;
    order: 2;
    inset: auto;
    height: clamp(14rem, 46vw, 20rem);
    margin-top: -2.5rem;
  }
  .hv-hero-bg::before { display: none; }
  .hv-hero-photo {
    inset: 0;
    width: 100%;
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, .55) 40%, #000 70%);
    mask-image: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, .55) 40%, #000 70%);
  }
  .hv-hero-photo img { object-position: 50% 45%; transform: none !important; }
  .hv-hero-veil {
    background:
      linear-gradient(180deg, rgba(8, 20, 32, .25) 0%, rgba(8, 20, 32, 0) 45%, rgba(5, 11, 20, .5) 100%),
      linear-gradient(90deg, rgba(8, 20, 32, .55) 0%, transparent 28%, transparent 72%, rgba(8, 20, 32, .55) 100%);
  }
  .hv-hero-ambient {
    background: radial-gradient(30rem 16rem at 50% 60%, rgba(21, 96, 232, .2) 0%, transparent 100%);
  }
  .hv-hero-light { display: none; }
  .hv-hero-caption-band { display: inline-flex; right: var(--container-pad); bottom: .9rem; }
  .hv-hero-inner { grid-template-columns: minmax(0, 1fr); gap: 0; padding-block: clamp(1.75rem, 6vw, 2.5rem) 2.5rem; }
  .hv-hero-stage { display: none; }
  .hv-hero-copy { text-align: center; }
  .hv-hero-copy .eyebrow { justify-content: center; }
  .hv-hero-copy h1 { max-width: 14ch; margin-inline: auto; }
  .hv-hero-copy h1 em { display: inline; }
  .hv-hero-copy .lead { max-width: 30rem; margin-inline: auto; }
  .hv-hero-ctas { justify-content: center; }
  .hv-offer summary { margin-inline: auto; justify-content: center; }
  .hv-offer-terms { margin-inline: auto; text-align: center; }
  .hv-hero-proof { justify-content: center; margin-inline: auto; }
  .hv-hero .trust-row { justify-content: center; }

  .hv-figures { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hv-figure:nth-child(3)::before { display: none; }
  .hv-figure:nth-child(n+3) { border-top: 1px solid var(--line); border-radius: 0; }

  .hv-managed-grid, .hv-more-grid { grid-template-columns: minmax(0, 1fr); max-width: 34rem; margin-inline: auto; }
  .hv-why-grid { grid-template-columns: minmax(0, 1fr); }
  .hv-why-side { position: static; }
  .hv-why-media { max-width: 40rem; }
}

@media (max-width: 767.98px) {
  .hv-hero-copy h1 { max-width: 12ch; }
  .hv-hero-ctas { flex-direction: column; align-items: stretch; }
  .hv-hero-ctas .btn { width: 100%; }
  /* A wrapping eyebrow keeps the peak married to its first line. */
  .hv-hero-copy .eyebrow { display: block; text-align: center; }
  .hv-hero-copy .eyebrow::before { display: inline-block; margin-right: .55rem; vertical-align: -.02em; }
  .hv-hero-proof { gap: .5rem 1.4rem; font-size: var(--fs-tiny); }

  /* The product tabs scroll sideways rather than wrap or shrink. */

  .hv-included { padding-block: 2.75rem; }
  .hv-included-list { grid-template-columns: minmax(0, 1fr); gap: .65rem; }
  .hv-included-item { padding: 1rem 1.05rem; }

  .hv-managed-card { padding: 1.75rem 1.4rem; }
  .hv-managed-foot .btn { width: 100%; }

  .hv-photo-inset { grid-column: 2 / 9; margin-top: -3rem; margin-left: 0; }
  .hv-photo-cap-long { display: none; }
  .hv-photo-cap-short { display: inline; }
  .hv-managed-card > p { font-size: var(--fs-small); }
  .hv-why-list { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .hv-why-item { padding: 1rem 0; border-bottom: 1px solid var(--carbon-hair); }
  .hv-why-item:last-child { border-bottom: 0; }

  .hv-rv-tabs { display: grid; grid-template-columns: minmax(0, 1fr); }
  html:not(.hv-js) .hv-rv-tabs { display: none; }
  .hv-rv-tab { min-width: 0; width: 100%; }

  .hv-final-ctas { flex-direction: column; align-items: stretch; }
  .hv-final-ctas .btn { width: 100%; }
}

@media (max-width: 560px) {
  .hv-figures { padding: .3rem; }
  .hv-figure { flex-direction: column; align-items: flex-start; gap: .7rem; padding: 1.1rem 1rem 1.15rem; }
  .hv-figure-copy strong { font-size: 1.75rem; }
  .hv-figure-ico { width: 2.25rem; height: 2.25rem; }
}
@media (max-width: 480px) {
  .hv-more-tiers { grid-template-columns: minmax(0, 1fr); }
  .hv-hero-proof { grid-template-columns: repeat(2, max-content); gap: .45rem 1.1rem; }
  .hv-hero-bg { height: clamp(13rem, 56vw, 16rem); }
}
@media (max-width: 360px) {
  .page-home .hv-hero h1 { font-size: 2.25rem; }
  .hv-hero-copy h1 { max-width: none; }
  .hv-hero-proof { grid-template-columns: max-content; }
}

/* ── 10 · Reduced motion: the finished design, standing still ── */
@media (prefers-reduced-motion: reduce) {
  html.hv-io .hv-r { opacity: 1; transform: none; transition: none; }
  .hv-hero-light { display: none; }
  .hv-hero-photo img { transform: scale(1.03) !important; transition: none !important; }
  .hv-showcase-canvas { clip-path: inset(0 var(--hv-inset) round var(--r-xl)); }
  .hv-included-item,
  .hv-managed-card,
  .hv-rv-item,
  .hv-figure,
  .hv-offer-more::after { transition: none !important; }
}


/* Phones: the inset panel would be wider than the page gutter and clip the
   list (permanently under reduced motion), so the canvas runs edge to edge. */
@media (max-width: 900px) {
  .hv-showcase { --hv-inset: 0px; }
}