/* scope: .msi-page, body.LeftAndRightColumn, body._404 */
/* Shared content-page idiom for the six CMS pages. Owner: agent content. Every selector must start with the scope above;
   _tools/css_scope_check.py fails the sign-off otherwise. Responsive rules live here too.

   A content page is a CMS body wrapped in <div class="msi-page msi-page--<slug>">. Class names are listed in
   spec/about-us.md ("Content-page idiom"). Everything is keyed on the body's own classes, never on a template,
   because live /pg/ pages render General.html and carry no page-specific template markup.
   Breakpoints follow msi-responsive.css: >= 992 is the 1440 wire, 768-991 the 834 wire, <= 767 the 440 wire. */

/* ---- RAILS: hidden on content pages (Diego 2026-09-23: always follow Figma) ------------------------------
   The wires draw one full-width column. The live left rail (IMAGELOGO3066, the Bipolar banner) and right rail
   (IMAGELOGO1658 35-years logo + TABS1656) stay in the DOM; this block only hides them. It is the single switch:
   delete this block to bring both rails back. */
body.LeftAndRightColumn:has(.msi-page) .LayoutLeftColumn,
body.LeftAndRightColumn:has(.msi-page) .LayoutRightColumn { display: none; }
/* ---- end RAILS ---------------------------------------------------------------------------------------- */

body.LeftAndRightColumn:has(.msi-page) .LayoutContent {
  float: none;
  width: 100%;
  padding: 0;
}
body.LeftAndRightColumn:has(.msi-page) .LayoutContentInner { background: none; padding: 0; }

/* ---- type ---------------------------------------------------------------------------------------------- */
.msi-page {
  font-family: var(--msi-font);
  font-size: 16px;
  /* 1.6 as Figma lays it out: each line rounded to whole pixels (16 -> 26, 14 -> 22). The wire's text boxes
     are built from those lines (11 lines = 286), so 25.6 drifts 0.4 a line against every box below it. */
  line-height: 26px;
  color: var(--msi-ink-2);
}
.msi-page p,
.msi-page li {
  font-size: inherit;
  line-height: inherit;
  color: inherit;
}
.msi-page p { margin: 0; }
/* the wires draw body copy flat; the client's <b> runs stay in the source */
.msi-page .msi-page__text b { font-weight: inherit; }

/* Inter Display Medium in the wire; Inter 500 (BRIEF accepted deviation 1) */
.msi-page .msi-page__title {
  margin: 0;
  font-family: var(--msi-font);
  font-size: 56px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: normal;
  color: #000;
}
.msi-page .msi-page__eyebrow {
  font-weight: 600;
  color: var(--msi-orange);
}

/* screen-reader text for a photo drawn as a background */
.msi-page .msi-page__alt {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ---- breadcrumb: Home > page, 8 between items, a 16px chevron ------------------------------------------ */
.msi-page .msi-page__crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  width: fit-content;
  margin-top: 24px;
}
.msi-page .msi-page__crumb {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 400;
  color: var(--msi-ink-2);
  text-decoration: none;
}
.msi-page a.msi-page__crumb:hover,
.msi-page a.msi-page__crumb:focus { color: var(--msi-blue); }
/* the chevron sits in the 8 + 16 + 8 between two crumbs, outside the crumb's own box */
.msi-page .msi-page__crumb + .msi-page__crumb {
  position: relative;
  margin-left: 24px;
}
.msi-page .msi-page__crumb + .msi-page__crumb::before {
  content: "";
  position: absolute;
  top: 50%;
  left: -24px;
  width: 16px;
  height: 16px;
  margin-top: -8px;
  background: url("../images/content/crumb-chevron.svg") center / 16px no-repeat;
}

/* ---- blocks ------------------------------------------------------------------------------------------- */
/* heading block: eyebrow over title */
.msi-page .msi-page__head {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
/* copy column: heading, then body copy */
.msi-page .msi-page__copy {
  display: flex;
  flex-direction: column;
  gap: 24px;
  flex: 0 1 624px;
  min-width: 0;
}
/* body copy: paragraphs one blank line apart */
.msi-page .msi-page__text > p + p { margin-top: 26px; }

/* copy beside a photo; --flip puts the photo on the left at desktop */
.msi-page .msi-page__split {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
}
.msi-page .msi-page__split--flip { flex-direction: row-reverse; }
.msi-page .msi-page__media {
  position: relative;
  flex: 0 1 515px;
  min-width: 0;
  aspect-ratio: 515 / 455;
  background: center / 100% 100% no-repeat;
}

/* full-bleed #f8f9fb plate: spans the container including its gutters */
.msi-page .msi-page__band {
  margin-left: calc(-1 * var(--msi-gutter));
  margin-right: calc(-1 * var(--msi-gutter));
  padding: 80px var(--msi-gutter);
  background: var(--msi-surface);
  border-radius: 80px;
}

/* ---- contact band: intro + four icon rows -------------------------------------------------------------- */
.msi-page .msi-page__contact {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 40px;
}
.msi-page .msi-page__contact-intro {
  display: flex;
  flex-direction: column;
  gap: 24px;
  flex: 0 1 515px;
  min-width: 0;
}
.msi-page .msi-page__contact-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
  flex: 0 1 624px;
  min-width: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}
.msi-page .msi-page__contact-row {
  display: flex;
  align-items: center;
  gap: 18px;
  min-height: 48px;
  margin: 0;
}
.msi-page .msi-page__contact-row::before {
  content: "";
  flex: 0 0 48px;
  width: 48px;
  height: 48px;
  background: url("../images/content/contact-address.svg") center / 48px no-repeat;
}
.msi-page .msi-page__contact-row--phone::before { background-image: url("../images/content/contact-phone.svg"); }
.msi-page .msi-page__contact-row--fax::before   { background-image: url("../images/content/contact-fax.svg"); }
.msi-page .msi-page__contact-row--email::before { background-image: url("../images/content/contact-email.svg"); }
.msi-page .msi-page__contact-text { flex: 1 1 auto; min-width: 0; }
.msi-page .msi-page__contact-text > b { font-weight: 700; color: #000; }

/* ---- tablet: 834 wire --------------------------------------------------------------------------------- */
@media (max-width: 991px) {
  .msi-page .msi-page__split,
  .msi-page .msi-page__split--flip,
  .msi-page .msi-page__contact {
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
  }
  .msi-page .msi-page__split { gap: 40px; }
  .msi-page .msi-page__copy,
  .msi-page .msi-page__media,
  .msi-page .msi-page__contact-intro,
  .msi-page .msi-page__contact-list { flex: 0 0 auto; }
  .msi-page .msi-page__media { aspect-ratio: 754 / 468; }
  .msi-page .msi-page__contact { gap: 48px; }
}

/* ---- mobile: 440 wire --------------------------------------------------------------------------------- */
@media (max-width: 767px) {
  .msi-page .msi-page__crumbs,
  .msi-page .msi-page__crumb,
  .msi-page .msi-page__text,
  .msi-page .msi-page__contact-intro > p { font-size: 14px; line-height: 22px; }
  .msi-page .msi-page__text > p + p { margin-top: 22px; }
  .msi-page .msi-page__title { font-size: 40px; }
  .msi-page .msi-page__media { aspect-ratio: 392 / 346.33; }
  /* the 440 wire insets the plate's content 32 on the left and 24 on the right (741:4800 at x 32, w 384) */
  .msi-page .msi-page__band {
    padding: 56px 24px 56px 32px;
    border-radius: 56px;
  }
  .msi-page .msi-page__contact-list { gap: 20px; }
}

/* ---- About footer: the tagline band above the plate (741:2394 / 741:7557 / 741:4829) -------------------
   The wire moves the About body's opening sentence into the footer, the same band the homepage draws
   (.msi-footer-band in FooterPage.html, homepage-only in msi-refresh.css). Keyed on the About body.
   From 992 up it follows board 697 like the homepage; 834 and 440 keep the 741 frames. */
@media (min-width: 992px) {
  /* as the homepage (board 697:16717, Diego 2026-09-24): the tab starts 120 under the contact plate, the straight edge
     80.5 below it, the content 160.5 under the tab top */
  body.LeftAndRightColumn:has(.msi-page--about) .LayoutBottom {
    margin-top: 120px;
    padding-top: 160.5px;
  }
  body.LeftAndRightColumn:has(.msi-page--about) .LayoutBottom::after { top: 80.5px; }
  body.LeftAndRightColumn:has(.msi-page--about) .LayoutBottom::before {
    top: 0;
    width: 283px;
    height: 81.5px;
    clip-path: path("M0 80.5 C10.12 80.5 19.55 75.81 25.6 67.83 L67.4 12.67 C73.45 4.69 82.88 0 92.9 0 H251 C268.67 0 283 14.33 283 32 V81.5 H0 Z");
  }
}
body.LeftAndRightColumn:has(.msi-page--about) .msi-footer-band {
  display: block;
  position: absolute;
  top: 0;
  left: max(var(--msi-gutter), calc((100% - var(--msi-content)) / 2));
  right: max(var(--msi-gutter), calc((100% - var(--msi-content)) / 2));
  margin: 0;
  font-family: var(--msi-font);
  font-size: 30px;
  font-weight: 600;
  line-height: 1.3;
  /* Inter Display SemiBold sets narrower than Inter 600 (as the homepage band) */
  letter-spacing: -0.033em;
  text-align: left;
  color: #000;
  opacity: 1;
}
@media (min-width: 992px) {
  /* the tagline sits on the white beside the tab, bottom 52.5 under the tab top, right edge 262 in from the window
     (the homepage rule, msi-refresh.css) */
  body.LeftAndRightColumn:has(.msi-page--about) .msi-footer-band {
    top: auto;
    bottom: calc(100% - 52.5px);
    right: max(var(--msi-gutter), calc((100% - var(--msi-content)) / 2), 262px);
    /* Inter Display SemiBold (697:27956): Inter's optical size 32, no tracking */
    font-variation-settings: "opsz" 32;
    letter-spacing: 0;
  }
}
@media (max-width: 991px) {
  /* 834: two lines of 45 (30/1.5), broken after "afford."; the plate is the 834 vector with a taller
     tab (741:7561): tab top 26 under the band top, straight edge 106, content 209 */
  body.LeftAndRightColumn:has(.msi-page--about) .LayoutBottom {
    margin-top: 112px;
    padding-top: 209px;
  }
  body.LeftAndRightColumn:has(.msi-page--about) .LayoutBottom::before {
    top: 26px;
    height: 81px;
    background: url("../images/content/footer-plate-834-about.svg") right top / 1440px 679.5px no-repeat;
  }
  body.LeftAndRightColumn:has(.msi-page--about) .LayoutBottom::after { top: 106px; }
  body.LeftAndRightColumn:has(.msi-page--about) .msi-footer-band { line-height: 1.5; }
  body.LeftAndRightColumn:has(.msi-page--about) .msi-footer-band .msi-hl::before { top: 3px; }
  body.LeftAndRightColumn:has(.msi-page--about) .msi-footer-band .msi-hl--2::after { content: "\A"; white-space: pre; }
}
@media (max-width: 767px) {
  /* 440: four lines of 36 (30/1.2), broken after "trust." and "afford."; the regular 440 plate
     starts 138 under the band top */
  body.LeftAndRightColumn:has(.msi-page--about) .LayoutBottom {
    margin-top: 88px;
    padding-top: 228px;
  }
  body.LeftAndRightColumn:has(.msi-page--about) .LayoutBottom::before {
    top: 138px;
    height: 35px;
    background: url("../images/footer/plate-440.svg") right top / 1440px 611.5px no-repeat;
  }
  body.LeftAndRightColumn:has(.msi-page--about) .LayoutBottom::after { top: 172px; }
  body.LeftAndRightColumn:has(.msi-page--about) .msi-footer-band { line-height: 1.2; }
  body.LeftAndRightColumn:has(.msi-page--about) .msi-footer-band .msi-hl::before { top: 2px; }
  body.LeftAndRightColumn:has(.msi-page--about) .msi-footer-band .msi-hl--1::after { content: "\A"; white-space: pre; }
}
/* as the homepage: at 401 and under the fourth line reaches the tab, so the tagline rises 12 (6 clear of the tab top) */
@media (max-width: 401px) {
  body.LeftAndRightColumn:has(.msi-page--about) .msi-footer-band { top: -12px; }
}

/* phone and email links take the link blue so they read as clickable (Diego 2026-09-23); buttons keep their own colours */
.msi-page a:is([href^="tel:"], [href^="mailto:"]):not([class*="btn"]) { font: inherit; color: var(--msi-blue); text-decoration: none; }
.msi-page a:is([href^="tel:"], [href^="mailto:"]):not([class*="btn"]):is(:hover, :focus) { color: var(--msi-blue-bright); }
.msi-page a:is([href^="tel:"], [href^="mailto:"]):not([class*="btn"]):focus-visible { text-decoration: underline; }

/* the hero and sheet run edge to edge: above 1440 the container would box them in */
body.LeftAndRightColumn:has(.msi-page--return-auth) .LayoutMiddle.container,
body.LeftAndRightColumn:has(.msi-page--contact) .LayoutMiddle.container,
body.LeftAndRightColumn:has(.msi-page--catalog-request) .LayoutMiddle.container,
body.LeftAndRightColumn:has(.msi-page--repair) .LayoutMiddle.container { max-width: none; }

/* live body content the wire does not draw: kept in the body, hidden (Diego 2026-09-23: follow Figma) */
.msi-page .msi-page__off { display: none; }

/* ---- 404 (_404Page.html, no wire): the idiom's title, body copy and pills, centred; the promo rail goes ---------- */
body._404 .LayoutLeftColumn { display: none; }
body._404 .LayoutContent { width: 100%; }
.msi-page.msi-page--404 .msi-404 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  max-width: 720px;
  margin: 0 auto;
  /* deputy.css:65 .pad-b-40 { padding-bottom: 40px !important } */
  padding: 120px 0 !important;
}
.msi-page.msi-page--404 .msi-404__title {
  padding: 0;
  /* deputy.css:312 .m-b-10 { margin-bottom: 10px !important } */
  margin: 0 !important;
}
/* deputy.css:1087 .size-big { font-size: 150% !important }, nested twice in the template */
.msi-page.msi-page--404 .msi-404__title .size-big { font-size: inherit !important; font-weight: inherit; }
.msi-page.msi-page--404 .msi-404__message {
  margin: 0;
  /* deputy.css:37 .pad-b-20 { padding-bottom: 20px !important } */
  padding: 0 !important;
  font-family: var(--msi-font);
  font-size: 16px;
  font-weight: 400;
  line-height: 26px;
  color: var(--msi-ink-2);
}
.msi-page.msi-page--404 .msi-404__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
  margin-top: 16px;
}
/* the secondary pill at the primary's size: 70 tall, 600 16/1.4, chevron */
.msi-page.msi-page--404 .msi-404__contact {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 23px 31px;
  border: 1px solid rgba(0, 0, 0, 0.22);
  border-radius: 999px;
  background: #fff;
  font-family: var(--msi-font);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--msi-ink);
  text-decoration: none;
}
.msi-page.msi-page--404 .msi-404__contact::after {
  content: "";
  width: 20px;
  height: 20px;
  background: var(--msi-ink);
  -webkit-mask: url("../images/menu/chevron-down.svg") center / 20px no-repeat;
  mask: url("../images/menu/chevron-down.svg") center / 20px no-repeat;
  transform: rotate(-90deg);
}
.msi-page.msi-page--404 .msi-404__contact:hover,
.msi-page.msi-page--404 .msi-404__contact:focus { color: var(--msi-ink); text-decoration: none; }
@media (max-width: 991px) {
  /* deputy.css:65 .pad-b-40 */
  .msi-page.msi-page--404 .msi-404 { padding: 96px 0 !important; }
}
@media (max-width: 767px) {
  /* deputy.css:65 .pad-b-40 */
  .msi-page.msi-page--404 .msi-404 { padding: 64px 0 !important; }
  .msi-page.msi-page--404 .msi-404__message { font-size: 14px; line-height: 22px; }
  .msi-page.msi-page--404 .msi-404__actions { flex-direction: column; align-self: stretch; }
  .msi-page.msi-page--404 .msi-404__actions > a { justify-content: center; }
}