/* =====================================================================
   Homepage. Tiers: desktop >= 1024 · tablet 768–1023 · phone < 768.
   "m" = below 1024 (tablet + phone).
   ===================================================================== */
.mono-nowrap { font-family: var(--font-mono); font-weight: 500; white-space: nowrap; }
@media (max-width: 1023px) { .btn--block-tab { width: 100%; } }

.home-sec__pad { padding-top: 96px; padding-bottom: 96px; }
.home-sec__stack { display: flex; flex-direction: column; gap: 32px; }
.home-split { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 64px; }
.home-split--center { align-items: center; }
.home-split--hero { grid-template-columns: minmax(0,8fr) minmax(0,4fr); }
.home-split--dc { grid-template-columns: minmax(0,6fr) minmax(0,6fr); align-items: start; }
.home-split--4-8 { grid-template-columns: minmax(0,4fr) minmax(0,8fr); align-items: start; }
.home-col { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.home-col--tight { gap: 16px; }
.home-lead { max-width: 36em; }
.home-actions { display: flex; margin-top: 8px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 24px; align-items: stretch; }
.home-hex { max-width: 300px; justify-self: center; }
@media (max-width: 1023px) {
  .home-sec__pad { padding-top: 56px; padding-bottom: 64px; }
  .home-sec__stack { gap: 24px; }
  .home-split, .home-split--hero, .home-split--dc, .home-split--4-8 { grid-template-columns: minmax(0,1fr); gap: 40px; }
  .home-hex { max-width: 280px; }
}
@media (max-width: 767px) {
  .grid-3 { grid-template-columns: minmax(0,1fr); }
  .home-hex { max-width: 260px; }
}

/* ---------- S1 hero ---------- */
.home-hero { position: relative; overflow: hidden; background: var(--surface-page); }
.home-hero__inner { position: relative; isolation: isolate; padding-top: 96px; padding-bottom: 64px; }
.home-hero__grid { display: grid; grid-template-columns: minmax(0,8fr) minmax(0,4fr); gap: 64px; align-items: center; }
.home-hero__text { display: flex; flex-direction: column; gap: 24px; min-width: 0; }
.home-hero__h1 { display: flex; flex-direction: column; gap: 24px; margin: 0; font-weight: 400; }
.home-hero__h1 .eyebrow { display: block; }
.home-hero__title {
  display: block; font-family: var(--font-display); font-weight: 600; font-size: 64px; line-height: 1.05;
  letter-spacing: var(--tracking-display); color: var(--text-strong); max-width: 13ch; text-wrap: balance;
}
.home-hero__lead { font-size: 18px; line-height: 1.6; color: var(--text-body); max-width: 36em; text-wrap: pretty; }
.home-hero__ctas { display: flex; flex-wrap: wrap; gap: 16px 24px; align-items: center; margin-top: 8px; }
.home-hero__call { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-weight: 600; font-size: 16px; color: var(--text-link); }
.home-hero__call:hover { color: var(--text-link-hover); }
.home-hero__call .icon { color: var(--icon); }

.home-hero__cluster {
  position: relative; aspect-ratio: 1610 / 1797; width: 100%; max-width: 340px; justify-self: end; margin-right: 28px;
  --hex-off: -8%;
}
.home-hero__bgsym {
  position: absolute; left: 50%; top: 50%; width: 760px; aspect-ratio: 41.55 / 46.08; translate: -50% -50%; z-index: -1; pointer-events: none;
}
.home-hero__bgsym img { width: 100%; height: 100%; display: block; opacity: var(--motif-opacity); transform-origin: 50% 50%; }
.home-hero__uptime { top: 14%; right: var(--hex-off); display: flex; align-items: center; gap: 8px; padding: 8px 12px; }
.home-hero__uptime .icon, .home-hero__chip .icon { color: var(--icon); }
.home-hero__uptime span:last-child { font-family: var(--font-display); font-weight: 600; font-size: 16px; color: var(--text-strong); }
.home-hero__chips { position: absolute; right: var(--hex-off); top: 48%; display: flex; flex-direction: column; gap: 10px; align-items: flex-end; }
.home-hero__chip.frag { position: relative; display: flex; align-items: center; gap: 8px; height: 32px; padding: 0 12px; font-weight: 600; font-size: 13px; color: var(--text-strong); }
.home-hero__ticket { left: var(--hex-off); bottom: 4%; width: 220px; display: flex; flex-direction: column; gap: 10px; padding: 16px; }
.home-hero__ticket-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.home-hero__ticket-text { font-size: 14px; line-height: 1.4; color: var(--text-body); }
.home-hero__ticket-done { color: var(--text-strong); font-weight: 600; }

.proof-strip {
  list-style: none; margin: 72px 0 0; padding: 24px 0 0; display: grid; grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 20px 32px; border-top: 1px solid var(--border);
}
.proof-strip li { display: flex; gap: 14px; align-items: center; font-weight: 600; font-size: 15px; line-height: 1.4; color: var(--text-strong); }

@media (max-width: 1023px) {
  .home-hero__inner { padding-top: 48px; padding-bottom: 64px; } /* proof strip runs to the right edge: keep 8px clear of the pause button */
  .home-hero__grid { grid-template-columns: minmax(0,1fr); gap: 48px; }
  .home-hero__title { font-size: 40px; }
  .home-hero__lead { font-size: 17px; }
  .home-hero__cluster { max-width: 320px; justify-self: center; margin-right: 0; }
  .home-hero__bgsym { width: 420px; }
  .home-hero__uptime span:last-child { font-size: 15px; }
  .home-hero__chips { gap: 6px; }
  .home-hero__ticket { width: 190px; padding: 12px; }
  .home-hero__ticket-text { font-size: 13px; }
  .proof-strip { margin-top: 40px; grid-template-columns: repeat(2, minmax(0,1fr)); }
  .proof-strip li { font-size: 14px; }
}
@media (max-width: 767px) {
  .home-hero__cluster { max-width: 280px; --hex-off: -4%; }
}

/* ---------- S2 chooser ---------- */
.home-chooser__head { position: relative; display: flex; flex-direction: column; gap: 12px; padding-top: 20px; border-top: 1px solid var(--border-strong); }
.home-chooser__tick { position: absolute; top: -1px; left: 0; width: 40px; height: 2px; background: var(--graphic); transform-origin: left; }
.seg-scroll { overflow-x: auto; padding: 2px 0 8px; scrollbar-width: none; }
.seg-scroll::-webkit-scrollbar { display: none; }
.seg {
  position: relative; display: inline-flex; flex-wrap: nowrap; gap: 2px; padding: 4px; border-radius: 999px;
  background: var(--surface-inset); border: 1px solid var(--border);
}
.seg__btn {
  position: relative; z-index: 1; display: inline-flex; align-items: center; height: 40px; padding: 0 16px; white-space: nowrap; border: 0;
  border-radius: 999px; background: transparent; box-shadow: none; color: var(--text-body); font-weight: 600; font-size: 15px; cursor: pointer;
  transition: background var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.seg__btn:hover { color: var(--text-strong); }
.seg__btn[aria-checked="true"] { background: var(--surface-card); box-shadow: 0 1px 2px rgba(10,27,53,0.12), 0 0 0 1px var(--border); color: var(--text-strong); }
.seg__btn:focus-visible { box-shadow: var(--focus-ring); border-radius: 999px; }

.pick-grid { display: grid; gap: 24px; align-items: stretch; }
.pick-grid--all { grid-template-columns: repeat(4, minmax(0,1fr)); }
.pick-grid--chip { grid-template-columns: minmax(0,1.5fr) repeat(var(--also), minmax(0,1fr)); }
.pick-grid__group { grid-column: 1 / -1; margin: 0; font-family: var(--font-mono); font-weight: 500; font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-accent); }
.pick-grid__group--gap { margin-top: 16px; }
.pick-grid__half { grid-column: span 2; display: flex; min-width: 0; }
.pick-cell { display: flex; min-width: 0; flex: 1; }
.pick-card {
  position: relative; flex: 1; display: flex; flex-direction: column; gap: 16px; padding: 28px; background: var(--surface-card);
  border: 1px solid var(--border); border-radius: var(--radius-md); transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.pick-card:hover { box-shadow: var(--shadow-1); }
.pick-card--best { border: 2px solid var(--action-bg); }
.pick-card__fit { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.pick-card__why { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.pick-card__why p { font-size: 15px; line-height: 1.5; color: var(--text-strong); text-wrap: pretty; }
.pick-card__why strong { font-weight: 600; }
.pick-card__badge {
  align-self: flex-start; padding: 3px 8px; border-radius: var(--radius-sm); background: var(--action-bg); color: var(--action-fg);
  font-family: var(--font-mono); font-weight: 500; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase;
}
.pick-card__thumb { flex: none; width: 72px; height: 72px; object-fit: contain; }
.pick-card__head { display: flex; flex-direction: column; gap: 6px; }
.pick-card__title { font-family: var(--font-display); font-weight: 600; font-size: 20px; line-height: 1.25; letter-spacing: var(--tracking-heading); color: var(--text-strong); }
.pick-card--best .pick-card__title { font-size: 24px; }
.pick-card__body { font-size: 15px; line-height: 1.55; color: var(--text-body); text-wrap: pretty; }
.pick-card__spacer { flex: 1; }
.pick-card__price { display: flex; flex-direction: column; gap: 4px; }
.pick-card__quote { font-weight: 600; font-size: 18px; line-height: 1.3; color: var(--text-body); }
.pick-card__amount { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.pick-card__num { font-family: var(--font-display); font-weight: 600; font-size: 36px; line-height: 1; letter-spacing: var(--tracking-display); color: var(--text-strong); }
.pick-card--best .pick-card__num { font-size: 44px; }
.pick-card__unit { font-size: 15px; color: var(--text-muted); }
.pick-card__note { font-size: 14px; line-height: 1.5; color: var(--text-muted); }
.home-chooser__notes { display: flex; flex-direction: column; gap: 10px; padding-top: 8px; }
.home-chooser__notes p { font-size: 16px; line-height: 1.5; color: var(--text-body); }
.home-chooser__notes a, .home-faq__more a { font-weight: 600; }
@media (max-width: 1023px) {
  .seg-scroll { margin: 0 calc(-1 * var(--page-x-m)); padding: 2px var(--page-x-m) 8px; }
  .seg__btn { padding: 0 14px; font-size: 14px; }
  .pick-grid--all, .pick-grid--chip { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .pick-grid__half { grid-column: auto; }
  .pick-grid--chip .pick-cell--best { grid-column: 1 / -1; }
  .pick-card { padding: 24px; }
  .pick-card__thumb { width: 56px; height: 56px; }
}
@media (max-width: 767px) {
  .pick-grid--all, .pick-grid--chip { grid-template-columns: minmax(0,1fr); }
}

/* ---------- S3 support ---------- */
.home-support-list { list-style: none; margin: 8px 0 0; display: flex; flex-direction: column; }
.home-support-list li { display: flex; gap: 16px; align-items: flex-start; padding: 18px 0; border-top: 1px solid var(--border-strong); }
.home-support-list li > .icon { margin-top: 2px; color: var(--icon); }
.home-support-list li > div { display: flex; flex-direction: column; gap: 6px; min-width: 0; align-items: flex-start; }
.home-support-list p { font-size: 16px; line-height: 1.5; color: var(--text-body); }
.home-support-list strong { font-weight: 600; color: var(--text-strong); }
.home-s3-hex { margin-bottom: 110px; --hex-off: -8%; }
.home-flow { left: var(--hex-off); top: 62%; width: 220px; display: flex; flex-direction: column; gap: 12px; padding: 16px; }
.home-flow__q, .home-flow__a { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: var(--radius-md); }
.home-flow__q { background: var(--surface-inset); }
.home-flow__a { border: 1px solid var(--border-strong); }
.home-flow__q span:first-child, .home-flow__a span:first-child { font-size: 12px; font-weight: 600; color: var(--text-muted); }
.home-flow__q span:last-child, .home-flow__a span:last-child { font-size: 14px; line-height: 1.4; color: var(--text-strong); }
@media (max-width: 1023px) { .home-flow { width: 200px; } }
@media (max-width: 767px) { .home-s3-hex { margin-bottom: 170px; --hex-off: -4%; } .home-flow { top: 72%; } }

/* ---------- S4 grow ---------- */
.home-grow__head { max-width: 760px; }
.home-grow__head .lead { max-width: none; }
.grow { position: relative; }
.grow__line { position: absolute; background: var(--border-strong); left: 9px; top: 8px; width: calc(80% + 4.8px); height: 2px; transform-origin: left; }
.grow__line--on { background: var(--graphic); }
.grow__steps { position: relative; list-style: none; display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: 24px; }
.grow__step { display: flex; flex-direction: column; gap: 20px; align-items: flex-start; }
.grow__node { position: relative; flex: none; width: 18px; height: 18px; border-radius: 50%; background: var(--surface-page); border: 2px solid var(--border-strong); }
.grow__node span { position: absolute; inset: -2px; border-radius: 50%; background: var(--graphic); border: 4px solid var(--surface-page); box-shadow: 0 0 0 2px var(--graphic); }
.grow__text { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.grow__title { align-self: flex-start; font-family: var(--font-display); font-weight: 600; font-size: 18px; line-height: 1.3; letter-spacing: var(--tracking-heading); color: var(--text-strong); }
.grow__title:hover { color: var(--text-link); }
.grow__text p { font-size: 15px; line-height: 1.55; color: var(--text-body); text-wrap: pretty; }
@media (max-width: 1023px) {
  .grow__line { left: 8px; top: 11px; width: 2px; height: calc(100% - 40px); transform-origin: top; }
  .grow__steps { grid-template-columns: minmax(0,1fr); gap: 28px; }
  .grow__step { flex-direction: row; gap: 16px; }
  .grow__node { margin-top: 2px; }
}

/* ---------- S5 email ---------- */
.home-s5-hex { justify-self: end; margin-right: 64px; }
.home-s5-chips { position: absolute; right: 0; top: 62%; translate: 33% 0; display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; max-width: 190px; }
.home-s5-chip {
  display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 12px 0 9px; font-weight: 600; font-size: 14px; color: var(--text-strong);
  background: var(--surface-raised); border: 1px solid var(--border-strong); border-radius: var(--radius-md); box-shadow: var(--shadow-1);
}
.callout {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 32px; padding: 28px 32px;
  background: var(--surface-page); border-radius: var(--radius-lg);
}
.callout p { font-size: 17px; line-height: 1.55; color: var(--text-body); max-width: 60ch; text-wrap: pretty; }
.callout strong { font-family: var(--font-display); font-weight: 600; color: var(--text-strong); }
@media (max-width: 1023px) { .home-s5-hex { justify-self: center; margin-right: 0; } }
@media (max-width: 767px) {
  .home-s5-chips { right: -10%; translate: none; max-width: 170px; }
  .callout { padding: 24px 20px; }
}

/* ---------- S6 migration ---------- */
.home-mig-links { list-style: none; margin: 8px 0 0; display: flex; flex-direction: column; border-top: 1px solid var(--border-strong); }
.home-mig-links li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; padding: 14px 0; border-bottom: 1px solid var(--border); }
.home-mig-links li > span { font-size: 15px; color: var(--text-muted); }
.home-s6-hex { --hex-off: -8%; }
.home-check { right: var(--hex-off); bottom: 4%; width: 216px; }
@media (max-width: 1023px) { .home-check { width: 180px; } }
@media (max-width: 767px) { .home-s6-hex { --hex-off: -4%; } }

/* ---------- S7 data center ---------- */
.home-dc-offers { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 24px; margin-top: 8px; }
.home-dc-offers > div { display: flex; flex-direction: column; gap: 8px; padding-top: 16px; border-top: 1px solid var(--border-strong); align-items: flex-start; }
.home-dc-offers p { font-size: 16px; line-height: 1.55; color: var(--text-body); }
.home-dc-offers strong { font-family: var(--font-display); font-weight: 600; color: var(--text-strong); }
.home-facility { list-style: none; margin: 8px 0 0; display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 14px 24px; }
.home-facility li { display: flex; align-items: center; gap: 14px; font-size: 15px; line-height: 1.4; color: var(--text-strong); }
.home-dc-address { font-size: 15px; line-height: 1.5; color: var(--text-muted); }
.home-dc-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; margin-top: 4px; }
@media (max-width: 1023px) { .home-dc-offers, .home-facility { grid-template-columns: minmax(0,1fr); } }

/* ---------- S8 since 1998 ---------- */
.home-since__link { margin-top: 4px; }
.home-since__art { position: relative; height: 260px; width: 100%; max-width: 520px; justify-self: center; }
.home-since__back {
  position: absolute; left: 0; top: 0; width: 260px; display: flex; flex-direction: column; gap: 12px; padding: 20px; background: var(--surface-subtle);
  border: 1px dashed var(--border-strong); border-radius: var(--radius-sm); transform: rotate(-2deg);
}
.home-since__year { font-family: var(--font-mono); font-weight: 500; font-size: 40px; line-height: 1; color: var(--text-strong); }
.home-since__bar { display: block; height: 6px; border-radius: 2px; background: var(--border-strong); }
.home-since__front { right: 0; bottom: 0; width: 320px; display: flex; align-items: center; gap: 14px; padding: 16px 18px; }
.home-since__front-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.home-since__front-text strong { font-weight: 600; font-size: 16px; color: var(--text-strong); }
.home-since__front-text span { font-size: 14px; color: var(--text-muted); }
.home-since__cells { grid-column: 1 / -1; list-style: none; }
.home-since__cells li { position: relative; display: flex; flex-direction: column; gap: 8px; padding-top: 20px; border-top: 1px solid var(--border-strong); font-size: 15px; line-height: 1.5; color: var(--text-body); }
.home-since__tick { position: absolute; top: -1px; left: 0; width: 40px; height: 2px; background: var(--graphic); }
.home-since__big { font-family: var(--font-display); font-weight: 600; font-size: 24px; line-height: 1.15; letter-spacing: var(--tracking-heading); color: var(--text-strong); }
.home-since__big--lg { font-size: 44px; }
@media (max-width: 1023px) {
  .home-since__art { height: 210px; }
  .home-since__back { width: 200px; }
  .home-since__year { font-size: 32px; }
  .home-since__front { width: 270px; }
  .home-since__big { font-size: 22px; }
  .home-since__big--lg { font-size: 36px; }
}

/* ---------- S9 FAQ / S10 CTA ---------- */
.home-faq__more { font-size: 16px; line-height: 1.5; color: var(--text-body); }
.home-cta { padding-top: 96px; padding-bottom: 96px; display: flex; flex-direction: column; gap: 16px; }
.home-cta__hours { font-size: 14px; line-height: 1.5; color: var(--text-muted); }
@media (max-width: 1023px) { .home-cta { padding-top: 48px; padding-bottom: 64px; } }