/* Red-theme layouts for converted legacy support and infrastructure pages. */
.page-support,
.page-infrastructure { background: var(--canvas); }

.support-hero {
  position: relative;
  overflow: hidden;
  color: var(--white);
  background: var(--red);
  isolation: isolate;
}
.support-hero::before {
  position: absolute;
  z-index: -1;
  right: -140px;
  bottom: -310px;
  width: 620px;
  height: 620px;
  border: 105px solid rgba(255,255,255,.07);
  border-radius: 50%;
  content: "";
}
.support-hero::after {
  position: absolute;
  z-index: -1;
  top: -80px;
  left: 45%;
  width: 1px;
  height: 520px;
  background: rgba(255,255,255,.13);
  content: "";
  transform: rotate(24deg);
}
.support-hero-grid {
  display: grid;
  grid-template-columns: minmax(0,1.1fr) minmax(320px,.55fr);
  align-items: center;
  gap: 76px;
  min-height: 470px;
  padding-block: 65px;
}
.support-hero .breadcrumb { margin-bottom: 25px; }
.support-hero .section-kicker { color: rgba(255,255,255,.74); }
.support-hero h1 {
  max-width: 850px;
  margin: 12px 0 18px;
  font: 800 clamp(56px,7vw,88px)/.87 var(--display-font);
  letter-spacing: -.025em;
}
.support-hero-copy > p {
  max-width: 690px;
  margin: 0;
  color: rgba(255,255,255,.86);
  font-size: 16px;
  line-height: 1.72;
}
.support-hero-actions { display: flex; flex-wrap: wrap; gap: 11px; margin-top: 28px; }
.support-hero-panel {
  padding: 28px;
  background: rgba(112,7,12,.26);
  border: 1px solid rgba(255,255,255,.26);
  box-shadow: 0 22px 52px rgba(100,8,13,.19);
}
.support-hero-panel > span {
  color: rgba(255,255,255,.65);
  font: 700 11px/1 var(--display-font);
  letter-spacing: .1em;
  text-transform: uppercase;
}
.support-hero-panel h2 { margin: 10px 0 17px; color: var(--white); font: 800 34px/.96 var(--display-font); }
.support-hero-panel p { margin: 0; color: rgba(255,255,255,.77); font-size: 12px; }
.support-hero-panel ul { display: grid; gap: 12px; margin: 20px 0 0; padding: 0; list-style: none; }
.support-hero-panel li { position: relative; padding-left: 22px; color: rgba(255,255,255,.88); font-size: 12px; }
.support-hero-panel li::before {
  position: absolute;
  top: .7em;
  left: 0;
  width: 7px;
  height: 7px;
  background: var(--white);
  border-radius: 50%;
  content: "";
  transform: translateY(-50%);
}

.support-stat-strip { color: var(--white); background: var(--charcoal); }
.support-stat-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); }
.support-stat-grid > div { min-height: 116px; padding: 25px 29px; }
.support-stat-grid > div + div { border-left: 1px solid rgba(255,255,255,.15); }
.support-stat-grid strong { display: block; color: var(--red); font: 800 31px/1 var(--display-font); }
.support-stat-grid span { display: block; margin-top: 6px; color: rgba(255,255,255,.62); font-size: 11px; }

.support-section { background: var(--canvas); }
.support-section-white { background: var(--white); }
.support-heading { display: grid; grid-template-columns: 1fr .68fr; align-items: end; gap: 58px; margin-bottom: 39px; }
.support-heading h2 { margin: 8px 0 0; font: 800 clamp(43px,5vw,62px)/.92 var(--display-font); }
.support-heading > p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.75; }

.support-card-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 17px; }
.support-card {
  display: flex;
  min-height: 310px;
  padding: 27px;
  flex-direction: column;
  color: var(--ink);
  background: var(--white);
  border: 1px solid var(--line);
  border-top: 3px solid transparent;
  box-shadow: 0 12px 30px rgba(73,40,37,.045);
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.support-card:hover { border-top-color: var(--red); box-shadow: 0 19px 40px rgba(73,40,37,.09); transform: translateY(-4px); }
.support-card-icon {
  display: grid;
  width: 54px;
  height: 54px;
  place-items: center;
  color: var(--red);
  background: var(--red-soft);
  border: 1px solid #f0cecb;
}
.support-card-icon .icon { width: 28px; height: 28px; }
.support-card > small { margin-top: 25px; color: var(--red); font: 700 11px/1 var(--display-font); letter-spacing: .08em; text-transform: uppercase; }
.support-card h3 { margin: 9px 0 10px; font: 800 30px/.98 var(--display-font); }
.support-card p { margin: 0 0 19px; color: var(--muted); font-size: 12px; line-height: 1.65; }
.support-card .text-link { margin-top: auto; }

.support-two-column { display: grid; grid-template-columns: minmax(0,1.25fr) minmax(280px,.55fr); gap: 24px; align-items: start; }
.reference-panel,
.support-side-panel {
  padding: 29px;
  background: var(--white);
  border: 1px solid var(--line);
  border-top: 4px solid var(--red);
  box-shadow: 0 18px 43px rgba(73,40,37,.06);
}
.support-side-panel { position: sticky; top: 110px; }
.reference-panel h2,
.support-side-panel h2 { margin: 9px 0 12px; font: 800 38px/.96 var(--display-font); }
.reference-panel > p,
.support-side-panel > p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.7; }
.support-list { display: grid; gap: 0; margin: 23px 0 0; padding: 0; list-style: none; counter-reset: support-list; }
.support-list li { position: relative; min-height: 68px; padding: 0 0 19px 43px; counter-increment: support-list; }
.support-list li::before { position: absolute; top: 1px; left: 0; color: var(--red); content: "0" counter(support-list); font: 800 17px/1 var(--display-font); }
.support-list li:not(:last-child)::after { position: absolute; top: 22px; bottom: 0; left: 11px; width: 1px; background: var(--line); content: ""; }
.support-list strong,
.support-list span { display: block; }
.support-list strong { font: 700 20px/1 var(--display-font); }
.support-list span { margin-top: 6px; color: var(--muted); font-size: 11px; }

.reference-alert { padding: 20px 22px; color: #6f2023; background: var(--red-soft); border-left: 4px solid var(--red); }
.reference-alert strong { display: block; font: 800 22px/1 var(--display-font); }
.reference-alert p { margin: 7px 0 0; font-size: 12px; line-height: 1.7; }
.document-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; margin-top: 28px; }
.document-card { min-height: 180px; padding: 23px; background: var(--white); border: 1px solid var(--line); }
.document-card span { color: var(--red); font: 800 13px/1 var(--display-font); }
.document-card h3 { margin: 18px 0 9px; font: 700 25px/1 var(--display-font); }
.document-card p { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.65; }
.official-link-list { display: grid; gap: 10px; margin-top: 22px; }
.official-link-list a { display: flex; justify-content: space-between; gap: 14px; padding: 13px 14px; color: var(--ink); background: var(--canvas); border: 1px solid var(--line); font-size: 12px; font-weight: 800; }
.official-link-list a:hover { color: var(--red); border-color: var(--red); }

.inquiry-prep-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 1px; background: var(--line); }
.inquiry-prep-grid article { min-height: 205px; padding: 25px; background: var(--white); }
.inquiry-prep-grid span { color: var(--red); font: 800 18px/1 var(--display-font); }
.inquiry-prep-grid h3 { margin: 40px 0 9px; font: 700 25px/1 var(--display-font); }
.inquiry-prep-grid p { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.65; }
.inquiry-embed-shell { padding: 12px; background: var(--white); border: 1px solid var(--line); box-shadow: 0 18px 45px rgba(73,40,37,.07); }
.inquiry-embed-shell iframe { display: block; width: 100%; height: 760px; border: 0; background: var(--canvas); }
.embed-fallback { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 17px 18px; color: var(--white); background: var(--charcoal); }
.embed-fallback p { margin: 0; color: rgba(255,255,255,.7); font-size: 11px; }

.complaint-layout { display: grid; grid-template-columns: minmax(0,1.4fr) minmax(280px,.48fr); align-items: start; gap: 26px; }
.complaint-form { padding: 37px; }
.complaint-form-section + .complaint-form-section { margin-top: 30px; padding-top: 30px; border-top: 1px solid var(--line); }
.complaint-form-section > h2 { margin: 0; font: 800 34px/1 var(--display-font); }
.complaint-form-section > p { margin: 8px 0 22px; color: var(--muted); font-size: 12px; }
.complaint-form .field-grid { margin-top: 0; }
.complaint-form .field-help { margin: 0; color: var(--muted); font-size: 10px; }
.complaint-submit-note { margin: 19px 0 0; color: var(--muted); font-size: 10px; line-height: 1.6; }
.complaint-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.complaint-actions .button-outline { color: var(--charcoal); border-color: #cfc7c3; }
.complaint-side-card { padding: 27px; color: var(--white); background: var(--charcoal); }
.complaint-side-card + .complaint-side-card { margin-top: 15px; }
.complaint-side-card h2 { margin: 8px 0 11px; color: var(--white); font: 800 32px/1 var(--display-font); }
.complaint-side-card p { margin: 0; color: rgba(255,255,255,.67); font-size: 11px; line-height: 1.7; }
.complaint-side-card .support-list strong { color: var(--white); }
.complaint-side-card .support-list span { color: rgba(255,255,255,.6); }
.complaint-side-card .support-list li:not(:last-child)::after { background: rgba(255,255,255,.18); }
.complaint-side-card a { color: var(--white); }

.infrastructure-fact-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 16px; }
.infrastructure-fact { min-height: 175px; padding: 25px; background: var(--white); border: 1px solid var(--line); border-top: 3px solid var(--red); }
.infrastructure-fact span { color: var(--red); font: 700 11px/1 var(--display-font); letter-spacing: .08em; text-transform: uppercase; }
.infrastructure-fact strong { display: block; margin-top: 25px; font: 800 32px/.95 var(--display-font); }
.infrastructure-fact p { margin: 10px 0 0; color: var(--muted); font-size: 11px; line-height: 1.6; }
.capability-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 17px; }
.capability-card { min-height: 260px; padding: 28px; background: var(--white); border: 1px solid var(--line); }
.capability-card .support-card-icon { margin-bottom: 25px; }
.capability-card h3 { margin: 0 0 10px; font: 800 31px/1 var(--display-font); }
.capability-card p { margin: 0 0 17px; color: var(--muted); font-size: 12px; line-height: 1.7; }
.capability-card ul { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.capability-card li { position: relative; padding-left: 16px; color: #555960; font-size: 11px; }
.capability-card li::before { position: absolute; top: .65em; left: 0; width: 6px; height: 6px; background: var(--red); border-radius: 50%; content: ""; transform: translateY(-50%); }
.operations-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 1px; background: var(--line); }
.operations-grid article { min-height: 245px; padding: 25px; background: var(--canvas); }
.operations-grid span { color: var(--red); font: 800 16px/1 var(--display-font); }
.operations-grid h3 { margin: 42px 0 10px; font: 700 25px/1 var(--display-font); }
.operations-grid p { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.65; }

@media (max-width: 1050px) {
  .support-hero-grid { grid-template-columns: minmax(0,1fr) minmax(280px,.55fr); gap: 38px; }
  .support-card-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .operations-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}

@media (max-width: 820px) {
  .support-hero-grid,
  .support-heading,
  .support-two-column,
  .complaint-layout { grid-template-columns: minmax(0,1fr); }
  .support-hero-grid { gap: 28px; padding-block: 48px; }
  .support-hero-panel { max-width: 590px; }
  .support-heading { align-items: start; gap: 14px; }
  .support-side-panel { position: static; }
  .infrastructure-fact-grid,
  .inquiry-prep-grid { grid-template-columns: minmax(0,1fr); }
  .inquiry-prep-grid article { min-height: 165px; }
  .inquiry-prep-grid h3 { margin-top: 24px; }
}

@media (max-width: 620px) {
  .support-hero h1 { font-size: 55px; }
  .support-hero-actions { display: grid; }
  .support-hero-actions .button { width: 100%; }
  .support-stat-grid,
  .support-card-grid,
  .document-grid,
  .capability-grid,
  .operations-grid { grid-template-columns: minmax(0,1fr); }
  .support-stat-grid > div { min-height: 92px; }
  .support-stat-grid > div + div { border-top: 1px solid rgba(255,255,255,.15); border-left: 0; }
  .support-card { min-height: 265px; }
  .complaint-form { padding: 24px 19px; }
  .embed-fallback { display: grid; }
  .inquiry-embed-shell iframe { height: 690px; }
}

@media (prefers-reduced-motion: reduce) {
  .support-card { transition: none; }
}