/*
  Authentic mobile reflow for the restored 2019 Matte layout.

  Desktop (≥960px): only the home-teaser / CMS-width tweaks below.
  styles.css / styles2015.css stay untouched.

  ROLLBACK (do not edit the 2015 stylesheets):
  1. Replace this file with the three lines below, then deploy.
       html, body { min-width: 941px; }
  2. git revert of this commit restores the previous overlay, not the 2019
     pinch-zoom canvas. Use option 1 to go back to desktop-only 2019.
*/

/* Homepage teasers are position:absolute; z-index:5 and cover the in-flow
   footer, so Francais/English never receive clicks. Let empty teaser area
   pass clicks through, and keep the footer above the overlay. */
div[name^="spg"]:not([name^="spgblk"]) {
  pointer-events: none;
}

div[name^="spg"] a {
  pointer-events: auto;
}

.wrapper1 > table[width="100%"] {
  position: relative;
  z-index: 20;
}

/* Language switcher: 2019 footer glyph is ~10px and easy to miss.
   Header + footer share .langswitch with a real hit area. */
a.langswitch {
  display: inline-block;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 13px !important;
  font-weight: bold;
  text-transform: uppercase;
  text-decoration: none;
  color: #000066 !important;
  padding: 10px 14px;
  line-height: 1.2;
  white-space: nowrap;
  position: relative;
  z-index: 40;
}

a.langswitch:hover,
a.langswitch:focus {
  text-decoration: underline;
}

a.homelogo {
  display: inline-block;
  line-height: 0;
  text-decoration: none;
  color: inherit;
  position: relative;
  z-index: 40;
  overflow: visible;
}

a.homelogo img {
  border: 0;
  float: none !important;
  display: block;
}

/* Light Opus lockup on both languages: diamonds, MATTE, the language
   wordmark, the rule, and the tagline. Same 204px canvas. Do not crop
   the PNG; height:auto plus padding keeps the navy nav off the artwork. */
table.brandlockup {
  width: auto;
  max-width: 100%;
  border-collapse: collapse;
  overflow: visible;
}

table.brandlockup a.homelogo {
  padding-bottom: 10px;
}

a.homelogo img.brand-logo,
a.homelogo img[src*="logo-matte-"] {
  width: 204px;
  max-width: 100%;
  height: auto !important;
  object-fit: contain;
  object-position: top left;
  overflow: visible;
}

/* Sit Francais/English on the diamond band of the MATTE lockup
   (diamonds occupy ~2–54px of the 113px PNG), not the Feldman middle. */
.langswitch-cell {
  vertical-align: top;
  position: relative;
  z-index: 40;
}

/* Affilié au groupe / Affiliate of sits valign=middle against the
   65px Feldman PNG + Toronto, so it lines up with the figures. The
   FELDMAN DAXON wordmark in that PNG is ~44–55px down (of 65);
   10px/line-height:1 label centers on that band at 44px. */
td:has(> a[href*="feldmandaxon.com"] > b) {
  vertical-align: top;
  padding-top: 44px;
}

td:has(> a[href*="feldmandaxon.com"] > b) > a {
  display: inline-block;
  line-height: 1;
  vertical-align: top;
}

/* Inner pages still use the 2019 10px footer glyph without the class. */
a[style*="text-decoration:none"][style*="font-size:10px"][style*="text-transform:uppercase"]:has(> span > b) {
  display: inline-block;
  padding: 10px 14px;
  position: relative;
  z-index: 40;
}

/* Homepage hover teasers sit on a 941×158 shortpage-bg.gif slice
   (blue nav + white panel + shadow). Repeating that gif would draw a
   second blue bar, so stretch one copy and give the 4-row name lists
   a taller slot instead of clipping them on the shadow. */
@media screen and (min-width: 960px) {
  .wrapper1 td[style*="shortpage-bg.gif"] {
    background-color: #fff !important;
    background-repeat: no-repeat !important;
    background-position: top center !important;
    background-size: 941px 176px !important;
  }

  .wrapper1 table[width="941"][height="158"],
  .wrapper1 table[style*="height:158"] {
    height: 176px !important;
  }

  /* Keep the absolute teaser inside the shortpage cell (nav 23px + panel),
     not at viewport top:2% + 498px where it covers Francais/English. */
  .home-shortpage {
    position: relative !important;
  }

  .home-shortpage > div[name^="spg"]:not([name^="spgblk"]) {
    top: 28px !important;
    margin-top: 0 !important;
    height: 148px !important;
    overflow: hidden !important;
  }

  .wrapper1 div[name^="spg"]:not([name^="spgblk"]) {
    height: 148px !important;
    overflow: hidden !important;
  }

  .wrapper1 div[name^="spg"]:not([name^="spgblk"]) > div[name^="spgblk"] {
    height: auto !important;
    min-height: 105px;
    padding-bottom: 14px;
    box-sizing: border-box;
  }

  .wrapper1 div[name^="spg"]:not([name^="spgblk"]) > div[name^="spgblk"] > span > table {
    margin-top: 8px !important;
  }

  .wrapper1 div[name^="spg"] .title1[style*="font-size:12px"] {
    line-height: 15px !important;
  }

  /* CMS leftover: width:904 with no unit overflows the 941 canvas. */
  .contentbox div[style*="width:904"] {
    width: auto !important;
    max-width: 100%;
    box-sizing: border-box;
  }
}

@media screen and (max-width: 959px) {
  html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    padding-top: env(safe-area-inset-top, 0px);
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }

  html,
  body {
    max-width: 100%;
  }

  .wrapper1 {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: max(8px, env(safe-area-inset-left, 0px)) !important;
    padding-right: max(8px, env(safe-area-inset-right, 0px)) !important;
    box-sizing: border-box;
  }

  .maintable,
  .cent1,
  .cent2,
  .back0,
  .back1,
  .jsanim,
  .jsmask,
  .featuremenu {
    width: 100% !important;
    max-width: 100% !important;
    left: auto !important;
    margin-left: 0 !important;
    height: auto !important;
  }

  .featshadow {
    display: none !important;
  }

  .cent2 {
    background-image: none !important;
    background-color: transparent !important;
  }

  .languages {
    position: static !important;
    margin: 0 !important;
  }

  .langswitch-cell {
    display: block;
    text-align: center;
    padding: 8px 0 12px;
  }

  a.langswitch {
    font-size: 16px !important;
    padding: 12px 20px;
  }

  /* ------------------------------------------------------------------ */
  /* Header: logo, then Feldman/Toronto, then search full width.        */
  /* ------------------------------------------------------------------ */
  .wrapper1 > div:first-child {
    position: relative;
    width: 100% !important;
    max-width: 100%;
    box-sizing: border-box;
  }

  /* Pin the header switcher to the diamond lockup instead of the
     Feldman row that stacks under the logo on a phone. */
  .wrapper1 > div:first-child .langswitch-cell {
    position: absolute;
    top: 16px;
    right: 0;
    padding: 0;
    z-index: 50;
  }

  .wrapper1 > div:first-child .langswitch-cell a.langswitch {
    font-size: 14px !important;
    padding: 8px 12px;
  }

  .wrapper1 > div:first-child > table {
    width: 100% !important;
  }

  .wrapper1 > div:first-child > table > tbody > tr > td > table[width="100%"] {
    width: 100% !important;
  }

  .wrapper1 > div:first-child > table > tbody > tr > td > table[width="100%"] > tbody > tr {
    display: flex;
    flex-direction: column;
    align-items: stretch;
  }

  .wrapper1 > div:first-child > table > tbody > tr > td > table[width="100%"] > tbody > tr > td {
    display: block;
    width: 100% !important;
    max-width: 100%;
    text-align: center !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    box-sizing: border-box;
  }

  .wrapper1 > div:first-child > table > tbody > tr > td > table[width="100%"] > tbody > tr > td:first-child {
    padding-bottom: 8px;
  }

  .wrapper1 > div:first-child td[align="right"] {
    text-align: center !important;
  }

  .wrapper1 > div:first-child table[align="right"] {
    float: none !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* 2019 logo is two GIFs in a width=100% table: diamonds on row 1
     (204px canvas, mark only ~90px wide), wordmark align=right on
     row 2. On a phone that table is the full card, so the wordmark
     flies to the opposite corner. Shrink-wrap to the diamond canvas
     so the two pieces sit as one mark. */
  .wrapper1 table:has(> tbody > tr > td > a.homelogo) {
    width: auto !important;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
  }

  .wrapper1 table:has(> tbody > tr > td > a.homelogo) > tbody > tr > td {
    width: auto !important;
    max-width: 100%;
    padding: 0 !important;
  }

  .wrapper1 table:has(> tbody > tr > td > a.homelogo) td[align="right"] {
    text-align: right !important;
  }

  table.brandlockup {
    margin-left: auto;
    margin-right: auto;
  }

  a.homelogo img.brand-logo,
  a.homelogo img[src*="logo-matte-"] {
    width: min(204px, 100%);
  }

  .wrapper1 > div:first-child img[src*="banner-t"],
  .wrapper1 > div:first-child img[src*="banner-e"],
  .wrapper1 > div:first-child img[src*="banner-f"] {
    display: block !important;
    float: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    max-width: 100%;
    height: auto;
  }

  .wrapper1 > div:first-child > table > tbody > tr > td > table[width="100%"] > tbody > tr > td:last-child > table[align="right"] {
    width: 100% !important;
    float: none !important;
    margin-left: auto;
    margin-right: auto;
  }

  .wrapper1 > div:first-child > table > tbody > tr > td > table[width="100%"] > tbody > tr > td:last-child > table[align="right"] > tbody {
    display: flex;
    flex-direction: column-reverse;
    align-items: stretch;
    width: 100%;
  }

  .wrapper1 > div:first-child > table > tbody > tr > td > table[width="100%"] > tbody > tr > td:last-child > table[align="right"] > tbody > tr,
  .wrapper1 > div:first-child > table > tbody > tr > td > table[width="100%"] > tbody > tr > td:last-child > table[align="right"] > tbody > tr > td {
    display: block;
    width: 100% !important;
    text-align: center !important;
  }

  .wrapper1 > div:first-child td[nowrap] {
    white-space: normal;
  }

  .wrapper1 > div:first-child table:has(img[src*="feldman_logo.png"]) {
    margin-left: auto !important;
    margin-right: auto !important;
    float: none !important;
  }

  .wrapper1 > div:first-child table:has(img[src*="feldman_logo.png"]) > tbody > tr {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
  }

  .wrapper1 > div:first-child td:has(> a[href*="feldmandaxon.com"] > b) {
    align-self: flex-start;
    padding-top: 44px;
  }

  /* ------------------------------------------------------------------ */
  /* Slideshow: keep 931×338, fill the column, do not clip the right.   */
  /* ------------------------------------------------------------------ */
  table[width="931"] {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
  }

  table[width="931"] > tbody > tr > td {
    width: 100% !important;
    display: block;
  }

  td[height="338"] {
    height: auto !important;
  }

  .fadein {
    position: relative !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    aspect-ratio: 931 / 338;
    overflow: hidden;
    box-sizing: border-box;
  }

  .fadein img {
    position: absolute !important;
    inset: 0;
    left: 0 !important;
    top: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    object-fit: cover;
    display: block;
  }

  /* ------------------------------------------------------------------ */
  /* Homepage tabs. shortpage-bg.gif is a 941×158 navy+white slice;     */
  /* stacked tabs sat on the white part with white type (invisible)     */
  /* then more navy. Solid navy list + white labels instead.            */
  /* ------------------------------------------------------------------ */
  .home-shortpage,
  .wrapper1 td[style*="shortpage-bg.gif"] {
    background-image: none !important;
    background-color: transparent !important;
    height: auto !important;
  }

  table[width="941"][height="158"],
  table[style*="height:158"] {
    width: 100% !important;
    height: auto !important;
    max-width: 100%;
    background: none !important;
  }

  td[height="21"] {
    height: auto !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  table[height="23"] {
    width: 100% !important;
    height: auto !important;
    display: block;
    background-color: #303f61 !important;
    background-image: none !important;
  }

  table[height="23"] > tbody {
    display: block;
    width: 100%;
  }

  table[height="23"] > tbody > tr {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
  }

  table[height="23"] td[id^="spgmenu"] {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    white-space: normal;
    height: auto !important;
    min-height: 44px;
    box-sizing: border-box;
    border-bottom: 1px solid rgba(255, 255, 255, 0.14);
    background-image: none !important;
    background-color: transparent !important;
  }

  table[height="23"] td.submenu1 {
    background-image: none !important;
    background-color: #3d4e75 !important;
  }

  table[height="23"] td[id^="spgmenu"] a {
    display: block;
    width: 100%;
    padding: 12px 14px !important;
    text-decoration: none;
  }

  table[height="23"] td[id^="spgmenu"] .submenut1,
  table[height="23"] td[id^="spgmenu"] .submenut2 {
    color: #fff !important;
    font-size: 14px !important;
    line-height: 1.3 !important;
    white-space: normal;
  }

  table[height="23"] img[src*="blue_pipe"],
  table[height="23"] td:has(> img[src*="blue_pipe"]) {
    display: none !important;
  }

  /* vis1 intro card under the tab list. .vis2 stays display:none. */
  div[name^="spg"]:not([name^="spgblk"]) {
    position: static !important;
    float: none !important;
    overflow: visible !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    left: auto !important;
    top: auto !important;
    margin: 0 !important;
    padding: 16px 14px !important;
    z-index: auto !important;
    box-sizing: border-box;
    background: #fff;
  }

  div[name^="spgblk"] {
    position: static !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    left: auto !important;
    top: auto !important;
    overflow: visible !important;
  }

  div[name^="spg"]:not([name^="spgblk"]) table {
    width: 100% !important;
    max-width: 100%;
  }

  div[name^="spg"].vis1 .title1 {
    color: #303f61 !important;
    display: block;
    margin-bottom: 8px;
  }

  /* ------------------------------------------------------------------ */
  /* Inner-page top nav is a UL, not a table. Wrap + larger taps.       */
  /* ------------------------------------------------------------------ */
  #nav1 {
    float: none !important;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    width: 100% !important;
    height: auto !important;
    box-sizing: border-box;
  }

  #nav1 li {
    float: none !important;
    display: block;
    margin-left: 0 !important;
  }

  /* Home/Accueil has inline padding-left:5px from 2019; that pulls
     the last stacked row left of every other item. */
  #nav1 a {
    display: block;
    box-sizing: border-box;
    padding: 10px 12px !important;
    font-size: 12px;
    line-height: 1.3;
    white-space: normal;
  }

  /* Fluid 941 canvas without squeezing nested nowrap nav (already flex). */
  table[width="941"],
  table[style*="width:941"],
  table[style*="width: 941"] {
    width: 100% !important;
    max-width: 100% !important;
  }

  .contentbox {
    padding-left: 8px !important;
    padding-right: 8px !important;
    box-sizing: border-box;
  }

  .contentbox > table[width="941"],
  .contentbox > table[style*="width:941"],
  .contentbox > table[style*="width: 941"] {
    width: 100% !important;
    max-width: 100%;
  }

  div[style*="width:904"] {
    width: auto !important;
    max-width: 100% !important;
    box-sizing: border-box;
  }

  .contentbox table {
    max-width: 100%;
  }

  /* Sitemap (and similar CMS tables): 2019 used a 240px empty gutter,
     100px left pad, and a 560px column. On a phone that leaves ~50px
     for nested lists, so titles clip. */
  .contentbox table[width="800"],
  .contentbox table[width="560"],
  .contentbox table[width="500"] {
    width: 100% !important;
    max-width: 100% !important;
    table-layout: auto;
  }

  .contentbox table[width="800"] > tbody,
  .contentbox table[width="800"] > tbody > tr,
  .contentbox table[width="560"] > tbody,
  .contentbox table[width="560"] > tbody > tr {
    display: block;
    width: 100%;
  }

  .contentbox table[width="800"] td,
  .contentbox table[width="560"] td {
    display: block;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0;
    box-sizing: border-box;
  }

  .contentbox td[width="240"],
  .contentbox td[style*="width:240px"] {
    display: none !important;
  }

  .contentbox td[style*="padding-left:100px"] {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .contentbox [id^="pgblk"] {
    width: auto !important;
    max-width: 100% !important;
    overflow: visible !important;
    box-sizing: border-box;
  }

  .contentbox div[style*="min-height:300px"] {
    padding-right: 0 !important;
    max-width: 100%;
    box-sizing: border-box;
  }

  .contentbox ul {
    margin: 6px 0 10px;
    padding-left: 1.25em;
    list-style-position: outside;
  }

  .contentbox ul ul {
    margin: 4px 0 8px;
    padding-left: 1.1em;
  }

  /* Address block is a UL with no LI (2019 CMS). */
  .contentbox ul:not(:has(> li)) {
    list-style: none;
    padding-left: 0;
    margin-left: 0;
  }

  .contentbox li {
    line-height: 1.45;
    overflow-wrap: break-word;
    word-wrap: break-word;
  }

  .contentbox a {
    overflow-wrap: break-word;
    word-wrap: break-word;
    white-space: normal;
  }

  /* IIC Partners article is 250 + spacer + 450. Stack it. */
  .contentbox table:has(> tbody > tr > td[width="250"]) {
    width: 100% !important;
    max-width: 100%;
  }

  .contentbox table:has(> tbody > tr > td[width="250"]) > tbody,
  .contentbox table:has(> tbody > tr > td[width="250"]) > tbody > tr {
    display: flex;
    flex-direction: column;
    width: 100%;
  }

  .contentbox td[width="250"],
  .contentbox td[width="450"] {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
    padding-bottom: 12px;
  }

  .contentbox td:has(> img[src*="trans.gif"][width="40"]) {
    display: none !important;
  }

  /* Stack article above the 2019 left rail so phones and tablets get a
     related-links band instead of a squeezed 150px column. */
  .contentbox > table[width="941"],
  .contentbox > table[style*="width:941"],
  .contentbox > table[style*="width: 941"] {
    display: block;
    width: 100% !important;
  }

  .contentbox > table[width="941"] > tbody,
  .contentbox > table[style*="width:941"] > tbody,
  .contentbox > table[style*="width: 941"] > tbody {
    display: block;
    width: 100%;
  }

  .contentbox > table[width="941"] > tbody > tr,
  .contentbox > table[style*="width:941"] > tbody > tr,
  .contentbox > table[style*="width: 941"] > tbody > tr {
    display: flex;
    flex-direction: column-reverse;
    width: 100%;
  }

  .contentbox > table[width="941"] > tbody > tr > td,
  .contentbox > table[style*="width:941"] > tbody > tr > td,
  .contentbox > table[style*="width: 941"] > tbody > tr > td {
    display: block;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
    padding-left: 8px !important;
    padding-right: 8px !important;
  }

  .contentbox td[width="150"],
  .contentbox td[width="170"],
  .contentbox td[width="140"] {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    padding-top: 20px !important;
    padding-right: 0 !important;
    padding-bottom: 8px;
    border-top: 1px solid #cfcfcf;
    box-sizing: border-box;
  }

  .contentbox td[width="150"] .title0,
  .contentbox td[width="170"] .title0,
  .contentbox td[width="140"] .title0 {
    display: block;
    font-size: 16px !important;
    line-height: 1.3;
    margin-top: 12px;
  }

  .contentbox td[width="150"] .title0:first-child,
  .contentbox td[width="170"] .title0:first-child,
  .contentbox td[width="140"] .title0:first-child {
    margin-top: 0;
  }

  .contentbox td[width="150"] img[src*="64.jpg"],
  .contentbox td[width="150"] img[src*="65.jpg"],
  .contentbox td[width="170"] img[src*="64.jpg"],
  .contentbox td[width="170"] img[src*="65.jpg"],
  .contentbox td[width="140"] img[src*="64.jpg"],
  .contentbox td[width="140"] img[src*="65.jpg"] {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    display: block;
    margin: 8px 0 10px;
    object-fit: cover;
  }

  .contentbox td[width="150"] table[width="200"],
  .contentbox td[width="170"] table[width="200"],
  .contentbox td[width="140"] table[width="200"] {
    width: 100% !important;
    max-width: 100% !important;
  }

  .contentbox td[width="150"] table[width="200"] > tbody > tr,
  .contentbox td[width="170"] table[width="200"] > tbody > tr,
  .contentbox td[width="140"] table[width="200"] > tbody > tr {
    display: flex;
    align-items: flex-start;
    width: 100%;
    box-sizing: border-box;
    border-bottom: 1px dotted #999;
  }

  .contentbox td[width="150"] table[width="200"] > tbody > tr > td,
  .contentbox td[width="170"] table[width="200"] > tbody > tr > td,
  .contentbox td[width="140"] table[width="200"] > tbody > tr > td {
    border-bottom: none !important;
  }

  .contentbox td[width="150"] table[width="200"] > tbody > tr > td:first-child,
  .contentbox td[width="170"] table[width="200"] > tbody > tr > td:first-child,
  .contentbox td[width="140"] table[width="200"] > tbody > tr > td:first-child {
    flex: 0 0 16px;
    width: 16px !important;
    padding-top: 10px !important;
  }

  .contentbox td[width="150"] table[width="200"] > tbody > tr > td:last-child,
  .contentbox td[width="170"] table[width="200"] > tbody > tr > td:last-child,
  .contentbox td[width="140"] table[width="200"] > tbody > tr > td:last-child {
    flex: 1 1 auto;
    min-width: 0;
    padding: 8px 4px 8px 2px !important;
  }

  .contentbox td[width="150"] table[width="200"] a,
  .contentbox td[width="170"] table[width="200"] a,
  .contentbox td[width="140"] table[width="200"] a {
    display: block;
    line-height: 1.35;
  }

  /* Salle de presse / témoignages / professionnels listings:
     thumbnail td collapses under max-width:100% images, so the 145px
     still paints over the title. Keep the thumb in-flow beside wrapping copy. */
  table[width="660"] {
    width: 100% !important;
    max-width: 100%;
  }

  table[width="660"] > tbody > tr {
    display: flex;
    flex-direction: column;
    width: 100%;
  }

  table[width="660"] > tbody > tr > td {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
  }

  table[width="660"] table {
    width: 100% !important;
    max-width: 100%;
  }

  table[width="660"] table > tbody > tr {
    display: flex !important;
    flex-direction: row;
    align-items: flex-start;
    gap: 10px;
    width: 100%;
  }

  table[width="660"] table > tbody > tr > td {
    display: block !important;
    width: auto !important;
    max-width: none;
  }

  table[width="660"] table td:has(> a > img),
  table[width="660"] table td:has(> img) {
    flex: 0 0 auto;
    width: auto !important;
  }

  table[width="660"] table td:has(> a > img) img,
  table[width="660"] table td:has(> img) img {
    max-width: 110px !important;
    width: auto !important;
    height: auto !important;
    padding-right: 0 !important;
  }

  table[width="660"] table > tbody > tr > td:last-child {
    flex: 1 1 auto;
    min-width: 0;
  }

  .contentbox img {
    max-width: 100%;
    height: auto;
  }

  .contentbox img[src*="bullet"],
  .contentbox img[src*="trans.gif"],
  .contentbox img[width="9"],
  .contentbox img[width="10"] {
    max-width: none;
    width: auto;
    height: auto;
  }

  iframe[src*="youtube.com"],
  iframe[src*="youtube-nocookie.com"],
  iframe[src*="youtu.be"],
  iframe[src*="vimeo.com"] {
    width: 100% !important;
    max-width: 100%;
    height: auto !important;
    aspect-ratio: 16 / 9;
  }

  .contentbox td:has(> iframe[src*="youtube"]),
  .contentbox td:has(> iframe[src*="vimeo"]),
  .contentbox td:has(iframe[src*="youtube.com"]),
  .contentbox td:has(iframe[src*="vimeo.com"]) {
    display: block;
    width: 100% !important;
    padding-right: 0 !important;
    padding-left: 0 !important;
  }

  .footerlink,
  .footerlink a {
    font-size: 13px !important;
    line-height: 1.6;
    white-space: normal;
  }

  /* 2019 footer is white type on body #bfbfbf — unreadable on a phone.
     Give the chrome a navy bar (same as the shortpage nav) and a tap-sized
     language control. Desktop ≥960 stays the original gray page. */
  .wrapper1 > table[width="100%"]:last-of-type {
    display: block;
    width: 100% !important;
    background: #303f61;
    margin-top: 12px;
    padding: 12px 14px calc(12px + env(safe-area-inset-bottom, 0px));
    box-sizing: border-box;
    border-collapse: separate;
    border-spacing: 0;
  }

  .wrapper1 > table[width="100%"]:last-of-type > tbody {
    display: block;
    width: 100%;
  }

  .wrapper1 > table[width="100%"]:last-of-type > tbody > tr:last-child:not(:first-child) {
    display: none;
  }

  .wrapper1 > table[width="100%"]:last-of-type > tbody > tr:first-child {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 16px;
    width: 100%;
  }

  .wrapper1 > table[width="100%"]:last-of-type > tbody > tr:first-child > td {
    display: block;
  }

  .wrapper1 > table[width="100%"]:last-of-type > tbody > tr:first-child > td:first-child {
    flex: 1 1 220px;
    min-width: 0;
    width: auto !important;
  }

  .wrapper1 > table[width="100%"]:last-of-type > tbody > tr:first-child > td[align="right"] {
    flex: 0 0 auto;
    width: auto !important;
  }

  .wrapper1 > table[width="100%"]:last-of-type .footerlink,
  .wrapper1 > table[width="100%"]:last-of-type .footerlink a {
    color: #fff !important;
    font-size: 14px !important;
    white-space: normal !important;
    overflow-wrap: break-word;
    word-break: break-word;
  }

  .wrapper1 > table[width="100%"]:last-of-type a.langswitch,
  .wrapper1 > table[width="100%"]:last-of-type a[style*="text-transform:uppercase"]:has(> span > b) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff !important;
    background: rgba(255, 255, 255, 0.16);
    min-height: 44px;
    padding: 10px 16px !important;
    font-size: 15px !important;
    font-weight: bold;
    line-height: 1.2;
    text-decoration: none !important;
    box-sizing: border-box;
  }

  .wrapper1 > table[width="100%"]:last-of-type a.langswitch span,
  .wrapper1 > table[width="100%"]:last-of-type a.langswitch b,
  .wrapper1 > table[width="100%"]:last-of-type a[style*="text-transform:uppercase"]:has(> span > b) span,
  .wrapper1 > table[width="100%"]:last-of-type a[style*="text-transform:uppercase"]:has(> span > b) b {
    color: #fff !important;
    font-size: inherit !important;
  }

  .wrapper1 > div[style*="height:20px"] {
    display: none;
  }
}

/* Phone footer: stack copyright then a full-width language control.
   Rail stacking already applies at ≤959. */
@media screen and (max-width: 699px) {
  #nav1 {
    flex-direction: column;
    align-items: stretch;
  }

  #nav1 li {
    float: none !important;
    display: block;
    width: 100% !important;
    flex: 1 1 100%;
    margin-left: 0 !important;
  }

  #nav1 a {
    display: block;
    width: 100%;
    box-sizing: border-box;
    padding: 12px 14px !important;
    min-height: 44px;
    line-height: 1.3;
  }

  .contentbox td[nowrap],
  .contentbox td[nowrap="nowrap"] {
    white-space: normal !important;
    max-width: 100%;
  }

  .contentbox [id^="pgblk"] {
    padding: 12px 6px !important;
  }

  .contentbox > table[width="941"] > tbody > tr > td,
  .contentbox > table[style*="width:941"] > tbody > tr > td,
  .contentbox > table[style*="width: 941"] > tbody > tr > td {
    padding-left: 4px !important;
    padding-right: 4px !important;
  }

  .wrapper1 > table[width="100%"]:last-of-type > tbody > tr:first-child {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }

  .wrapper1 > table[width="100%"]:last-of-type td.footerlink {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-align: center !important;
    max-width: 100%;
  }

  .wrapper1 > table[width="100%"]:last-of-type td.footerlink a {
    display: inline-block;
    padding: 4px 8px;
  }

  .wrapper1 > table[width="100%"]:last-of-type > tbody > tr:first-child > td:first-child,
  .wrapper1 > table[width="100%"]:last-of-type > tbody > tr:first-child > td[align="right"] {
    flex: 0 0 auto;
    width: 100% !important;
    min-height: 0;
  }

  /* Keep Francais/English at the top of the navy bar, not under Map. */
  .wrapper1 > table[width="100%"]:last-of-type > tbody > tr:first-child > td[align="right"] {
    order: -1;
  }

  .wrapper1 > table[width="100%"]:last-of-type td[align="right"] table,
  .wrapper1 > table[width="100%"]:last-of-type table[align="right"] {
    width: 100% !important;
    max-width: 100%;
    text-align: left !important;
    float: none !important;
  }

  .wrapper1 > table[width="100%"]:last-of-type a.langswitch,
  .wrapper1 > table[width="100%"]:last-of-type a[style*="text-transform:uppercase"]:has(> span > b) {
    display: flex;
    width: 100%;
  }

  .contentbox img[style*="float: right"],
  .contentbox img[style*="float:right"],
  .contentbox img[style*="float: left"],
  .contentbox img[style*="float:left"],
  .contentbox img[align="left"],
  .contentbox img[align="right"] {
    float: none !important;
    display: block;
    margin: 0 0 12px 0;
    max-width: 140px;
    height: auto;
  }
}

/* Narrow phones: stack homepage tabs and teaser columns. */
@media screen and (max-width: 480px) {
  table[height="23"] > tbody > tr {
    flex-direction: column;
    align-items: stretch;
  }

  table[height="23"] td[id^="spgmenu"] {
    justify-content: flex-start;
    width: 100%;
  }

  #nav1 {
    flex-direction: column;
    align-items: stretch;
  }

  #nav1 li {
    width: 100%;
  }

  div[name^="spg"]:not([name^="spgblk"]) > * table > tbody > tr > td,
  div[name^="spg"]:not([name^="spgblk"]) table > tbody > tr > td {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    padding-bottom: 8px;
    white-space: normal !important;
  }

  div[name^="spg"]:not([name^="spgblk"]) td[nowrap],
  div[name^="spg"]:not([name^="spgblk"]) td[nowrap="nowrap"] {
    white-space: normal !important;
  }

  table[width="660"] table > tbody > tr {
    flex-direction: column !important;
    align-items: flex-start;
    gap: 8px;
  }

  table[width="660"] table td:has(> a > img) img,
  table[width="660"] table td:has(> img) img {
    max-width: 145px !important;
  }

  table[width="660"] table > tbody > tr > td:last-child {
    width: 100% !important;
  }
}