html {
  scroll-behavior: smooth;
}

/* Vertical breathing room inside each homepage section. Two adjacent sections
   are separated by twice this value plus the framework's 7px .subgrid
   margin-bottom, and the stacked-block margin further down derives from it —
   so changing this one number rescales the whole section rhythm. */
:root {
  --section-pad-y: 32px;
}

/* Text Elements */



h1 span.heading-text-3 {
  font-weight: 400;
  font-size: 28px;
  line-height: 1.2;
}

h1.heading-1-contact {
  color: #4d7a95;
  font-weight: 500;
  margin-top: 0;
  margin-bottom: 10px;
}

h1.heading-1-notice {
  color: #4d7a95;
  font-weight: 500;
}

h1.about_title {
  margin-top: 7px;
  margin-bottom: 16px;
  padding-top: 0;
  color: #4d7a95;
  font-weight: 500;
  font-size: 40px;
  font-family: Garamond, Baskerville, 'Baskerville Old Face', 'Hoefler Text', 'Times New Roman', serif;
}

h1 span.heading-text-2 {
  font-size: 40px;
}

h1.MainTitle3 {
  margin-top: 0;
  margin-bottom: 0;
  padding-top: 0;
  padding-bottom: 0;
  color: #4d7a95;
  text-align: center;
  font-family: Garamond, Baskerville, 'Baskerville Old Face', 'Hoefler Text', 'Times New Roman', serif;
}

h2 span.heading-text-1 {
  color: #4d7a95;
  font-weight: 400;
  font-size: 22px;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  line-height: 1.2;
}

h2.LeftNav {
  color: #4d7a95;
  text-align: left;
  font-weight: 400;
  font-style: italic;
  font-size: 27px;
  font-family: Garamond, Baskerville, 'Baskerville Old Face', 'Hoefler Text', 'Times New Roman', serif;
  line-height: .47;
}

h2.LeftNav.right-mob {
  line-height: 1.2;
}

h2.heading-2-index {
  color: #4d6782;
  text-align: center;
  font-weight: 500;
  font-size: 38px;
  line-height: 1.2;
  /* No rule or accent bar under section headings: the card top-borders and
     section spacing carry the visual separation. */
  margin: 0 0 22px;
  font-family: Garamond, Baskerville, 'Baskerville Old Face', 'Hoefler Text', 'Times New Roman', serif;
}

h2 span.navigator {
  font-size: 24px;
  line-height: 1.2;
}

h2.heading-2-about {
  margin-top: 4px;
  margin-bottom: 10px;
  color: #4d7a95;
  text-align: left;
  font-weight: 500;
  font-size: 32px;
  font-family: Garamond, Baskerville, 'Baskerville Old Face', 'Hoefler Text', 'Times New Roman', serif;
}

h2 span.heading-text-3 {
  color: #4d7a95;
  font-weight: 400;
  font-size: 28px;
  line-height: 1.2;
}

h3 span.navigator {
  color: #4d7a95;
  font-style: italic;
  font-size: 24px;
  font-family: Garamond, Baskerville, 'Baskerville Old Face', 'Hoefler Text', 'Times New Roman', serif;
  line-height: 1.2;
}

h3.heading-3-nav.left-nav.right-mob {
  float: left;
  font-size: 30px;
}

h5.LeftNav {
  float: left;
  clear: left;
  color: #ba042a;
  text-align: left;
  font-size: 27px;
  font-family: Garamond, Baskerville, 'Baskerville Old Face', 'Hoefler Text', 'Times New Roman', serif;
}

h5 {
  color: #4d4d4d;
  text-align: center;
  font-style: italic;
  font-size: 24px;
  font-family: Garamond, Baskerville, 'Baskerville Old Face', 'Hoefler Text', 'Times New Roman', serif;
}

h6.section-header {
  margin-top: 30px;
  color: #4d7a95;
  text-transform: uppercase;
  letter-spacing: 2px;
  font-size: 24px;
  font-family: 'Franklin Gothic Medium', 'Franklin Gothic', 'ITC Franklin Gothic', Arial, sans-serif;
}

p.paragraph.Footer {
  margin-top: 0;
  margin-right: 0;
  margin-bottom: 30px;
  background-color: transparent;
  color: #f9fafb;
  text-align: left;
  text-transform: uppercase;
  letter-spacing: 2px;
  font-size: 16px;
  font-family: 'Franklin Gothic Medium', 'Franklin Gothic', 'ITC Franklin Gothic', Arial, sans-serif;
}

p.paragraph {
  color: #4d4d4d;
  text-align: left;
  font-size: 18px;
  font-family: Garamond, Baskerville, 'Baskerville Old Face', 'Hoefler Text', 'Times New Roman', serif;
}

p.paragraph.text_body {
  margin-top: 0;
  margin-bottom: 13px;
  padding-bottom: 5px;
  color: #414141;
  text-align: left;
  text-indent: 0;
  font-weight: 300;
  font-size: 16px;
  line-height: 1.65;
  font-family: 'Roboto', sans-serif;
}

p.paragraph span.paragraph-text-2 {
  font-size: 12px;
}

p.paragraph span.paragraph-text-25 {
  font-weight: 500;
  font-size: 17px;
}

p.paragraph span.paragraph-text-26 {
  font-weight: 700;
  font-size: 17px;
}

p.paragraph span.paragraph-text-27 {
  text-decoration: underline;
}

p.paragraph span.paragraph-text-28 {
  text-decoration: underline;
}

p.paragraph span.paragraph-text-29 {
  font-weight: 500;
  font-size: 17px;
}

p.paragraph span.paragraph-text-30 {
  text-decoration: underline;
}

p.paragraph span.paragraph-text-31 {
  font-weight: 500;
  font-size: 17px;
}

p.paragraph span.paragraph-text-32 {
  font-weight: 700;
  font-size: 17px;
}

p.paragraph span.paragraph-text-33 {
  font-weight: 500;
  font-size: 17px;
}

p.paragraph span.paragraph-text-34 {
  text-decoration: none;
  font-size: 17px;
}

p.paragraph span.paragraph-text-35 {
  font-weight: 500;
  font-size: 17px;
}

p.paragraph span.paragraph-text-36 {
  font-weight: 500;
  font-size: 17px;
}

p.paragraph span.paragraph-text-37 {
  font-weight: 500;
  font-size: 17px;
}

p.paragraph.text_body_index {
  text-align: left;
  font-weight: 300;
  font-size: 16px;
  font-family: 'Roboto', sans-serif;
  line-height: 1.7;
}

p.paragraph.text-body-about.text_body {
  text-align: justify;
}

p.paragraph span.paragraph-text-1 {
  font-weight: 500;
}

p.paragraph span.paragraph-text-7 {
  font-weight: 500;
}

p.paragraph span.paragraph-text-8 {
  font-weight: 500;
}

p.paragraph span.paragraph-text-9 {
  font-weight: 500;
}

p.paragraph span.paragraph-text-10 {
  font-weight: 500;
}

p.paragraph span.paragraph-text-11 {
  font-weight: 500;
}

p.paragraph.footer_contact {
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

p.paragraph span.paragraph-text-12 {
  color: #f9fafb;
  font-weight: 600;
  font-style: italic;
  font-size: 20px;
  font-family: Baskerville, 'Baskerville Old Face', 'Hoefler Text', Garamond, 'Times New Roman', serif;
  line-height: .48;
}


p.paragraph.text_column {
  padding: 0;
  font-weight: 300;
  font-size: 15px;
  font-family: 'Roboto', sans-serif;
}

p.paragraph.paragraph-1 {
  padding-top: 2px;
  padding-right: 1px;
  padding-left: 1px;
  background-color: #236cbe;
  text-align: center;
}

p.paragraph span.paragraph-text-3 {
  background-color: #236cbe;
  color: #f9fafb;
  font-weight: 600;
  font-size: 18px;
}

p.paragraph.left_adjust.text_body_index {
  text-align: left;
}

ul.unorder-list {
  width: auto;
}

ul.unorder-list.achievementlist {
  margin-right: 0;
  border-left: 4px solid #4d7a95;
  padding-left: 24px;
  margin-left: 0;
  list-style: none;
}

a.link-text.leftnavlinks {
  padding-left: 10px;
  color: #4d4d4d;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 14px;
  line-height: 2.1;
  font-family: 'Franklin Gothic Medium', 'Franklin Gothic', 'ITC Franklin Gothic', Arial, sans-serif;
}

a.link-text.text-link-1 {
  color: #1fc2ff;
}

a.link-text.leftnavlinks.righ-mob {
  float: left;
  clear: left;
}

a.link-text.leftnavlinks:hover {
  opacity: .8;
}

a.link-text.leftnavlinks:active {
  font-weight: 600;
}

/* Interaction Elements */

a.link-button.active-nav.nav-button {
  border-top-width: 2px;
  border-top-color: #4d7a95;
}

a.link-button {
  padding-right: 15px;
  padding-left: 15px;
  background-color: transparent;
  color: #4d4d4d;
  text-transform: uppercase;
  letter-spacing: 3px;
  font-weight: 600;
  font-size: 13px;
  font-family: 'Franklin Gothic Medium', 'Franklin Gothic', 'ITC Franklin Gothic', Arial, sans-serif;
}

a.link-button.nav-button {
  color: #4d7a95;
}

a.link-button.nav-button:hover {
  color: #2a5570;
}

/* Layout Elements */

body > .row.FooterRow {
  position: static;
  /* Was min-width: 800px, which forced horizontal scrolling on every page at
     any viewport narrower than 800px (all phones and small tablets). */
  min-width: 0;
  max-width: none;
  background-color: #333;
  text-align: left;
}

/* === Honeypot trap: hidden from humans, visible to bots parsing the HTML === */
.hp-field {
  position: absolute !important;
  left: -9999px !important;
  top: -9999px !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* === Form status messages === */
p.form-error,
p.Error {
  color: #b3261e;
  background: #fdeceb;
  border-left: 3px solid #b3261e;
  padding: 10px 14px;
  margin: 0 0 16px;
  font-size: 15px;
  font-family: 'Roboto', sans-serif;
  border-radius: 4px;
}

p.form-success {
  color: #1b5e20;
  background: #eaf4ec;
  border-left: 3px solid #2e7d32;
  padding: 10px 14px;
  margin: 0 0 16px;
  font-size: 15px;
  font-family: 'Roboto', sans-serif;
  border-radius: 4px;
}

/* === Publication list === */
h3.pub-year-header {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #9ca3af;
  margin: 28px 0 0;
  padding-bottom: 8px;
  border-bottom: 1px solid #e4e9ee;
  font-family: 'Roboto', sans-serif;
}

.pub-year-group:first-child > h3.pub-year-header {
  margin-top: 4px;
}

.pub-entry {
  padding: 15px 0 13px;
  border-bottom: 1px solid #f0f3f7;
}

.pub-entry:last-child {
  border-bottom: none;
}

p.pub-authors {
  font-size: 14px;
  color: #718096;
  margin: 0 0 4px;
  padding-bottom: 0;
  font-family: 'Roboto', sans-serif;
  font-weight: 300;
  line-height: 1.4;
}

p.pub-title {
  font-size: 17px;
  font-weight: 500;
  color: #4d7a95;
  margin: 0 0 5px;
  padding-bottom: 0;
  font-family: Garamond, Baskerville, 'Baskerville Old Face', 'Hoefler Text', 'Times New Roman', serif;
  line-height: 1.3;
}

p.pub-venue {
  font-size: 14px;
  color: #555;
  margin: 0 0 4px;
  padding-bottom: 0;
  font-family: 'Roboto', sans-serif;
  font-weight: 300;
  line-height: 1.5;
}

p.pub-doi {
  font-size: 13px;
  margin: 0;
  padding-bottom: 0;
  font-family: 'Roboto', sans-serif;
  font-weight: 300;
}

p.pub-doi a { color: #4d7a95; }
p.pub-doi a:hover { color: #2a5570; text-decoration: underline; }

p.paragraph.footer-copyright {
  text-align: center;
  font-size: 11px;
  color: rgba(249, 250, 251, 0.55);
  margin-top: 14px;
  margin-bottom: 0;
  padding-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  letter-spacing: 0.03em;
}

body > .row.NavTitle2 {
  position: relative;
  top: 0;
  margin-top: 0;
  margin-bottom: 80px;
  padding-top: 0;
  padding-right: 0;
  padding-bottom: 0;
  min-height: 300px;
  max-width: none;
  height: auto;
  background-color: #fff;
  background-image: none;
  background-position: center center;
  background-origin: padding-box;
  background-size: contain;
  background-repeat: no-repeat;
  opacity: .94;
}

body > .row.NavTitle3 {
  position: sticky;
  top: 0;
  z-index: 100;
  margin-bottom: 0;
  padding-top: 6px;
  padding-bottom: 6px;
  min-height: auto;
  max-width: none;
  background-color: #fff;
  box-shadow: 0 1px 6px rgba(0,0,0,0.07);
}

body > .row > [class*='coffee-span-'].call-out {
  float: left;
  margin-right: auto;
  margin-bottom: 0;
  margin-left: auto;
  padding: 0 0 8px;
  min-height: 160px;
  max-height: 800px;
  height: 160px;
  background-color: transparent;
  background-image: url('../birefr_100cut_0Grad_feinst_color.png');
  background-position: center 30%;
  background-size: contain;
  background-repeat: no-repeat;
  text-align: center;
}

body > .row > [class*='coffee-span-'].newsfeed {
  padding-top: 20px;
  padding-right: 20px;
  padding-left: 40px;
}

/* Remove repeated top-padding on pushed continuation rows (description.html rows 2+) */
body > .row > [class*='coffee-push'][class*='coffee-span-'].newsfeed {
  padding-top: 0;
}

body > .row.NavTitle4 {
  margin-top: 0;
  margin-bottom: 100px;
  min-height: 2px;
  max-width: none;
  background-color: #fff;
  background-image: none;
  background-position: center bottom;
  background-size: contain;
  background-repeat: no-repeat;
  opacity: .94;
}

body > .row > [class*='coffee-span-'].column-1 {
  margin-top: 0;
}

body > .row > [class*='coffee-span-'].column-3 {
  margin-right: 3%;
  padding: 10px 8px 10px 0;
}

body > .row > [class*='coffee-span-'].column-4 {
  margin-right: 0;
  margin-bottom: 142px;
}

body > .row > [class*='coffee-span-'].column-6 {
  margin-bottom: 40px;
  padding-right: 10px;
}

body > .row > [class*='coffee-span-'].column-7 {
  margin-bottom: 50px;
}

body.grid-1 {
  height: 60%;
  background-color: transparent;
}

body > .row > [class*='coffee-span-'].section-content {
  padding: var(--section-pad-y) 70px;
}

body > .row > [class*='coffee-span-'].front {
  float: left;
  margin: 0 auto;
  padding: 0 0 8px;
  min-height: 300px;
  max-height: 700px;
  height: auto;
  background-color: transparent;
  background-image: none;
  background-position: center 30%;
  background-size: contain;
  background-repeat: no-repeat;
  text-align: center;
}

body > .row.row-2 {
  margin-top: -20px;
}

body > .row > [class*='coffee-span-'].nav-col {
  position: static;
  clear: none;
  padding-right: 8px;
  padding-left: 0;
  border-right: 1px solid #e4e9ee;
}

body > .row > [class*='coffee-span-'].column-2 {
  float: left;
  padding-right: 0;
}

body > .row > [class*='coffee-span-'].column-5 {
  min-height: 100px;
}

body > .row > [class*='coffee-span-'].column-9 {
  float: none;
}

.subgrid > .row > [class*='coffee-span-'].subgrid-column-1 {
  clear: left;
}

.subgrid > .row > [class*='coffee-span-'].subgrid-column-2 {
  clear: left;
  padding-right: 8px;
}

.subgrid > .row > [class*='coffee-span-'].subgrid-column-3 {
  position: relative;
  left: 40px;
  display: block;
  float: left;
  clear: none;
}

.subgrid > .row > [class*='coffee-span-'].subgrid-column-4,
.subgrid > .row > [class*='coffee-span-'].subgrid-column-5,
.subgrid > .row > [class*='coffee-span-'].subgrid-column-6,
.subgrid > .row > [class*='coffee-span-'].subgrid-column-7,
.subgrid > .row > [class*='coffee-span-'].subgrid-column-8 {
  left: 40px;
}

.subgrid > .row > [class*='coffee-span-'].subgrid-column-9 {
  clear: left;
}

.subgrid > .row > [class*='coffee-span-'].subgrid-column-10 {
  clear: left;
}

.subgrid > .row > [class*='coffee-span-'].subgrid-column-11 {
  clear: left;
}

.subgrid > .row > [class*='coffee-span-'].subgrid-column-12 {
  clear: left;
}

.subgrid > .row > [class*='coffee-span-'].subgrid-column-14 {
  position: static;
  float: left;
  clear: none;
  margin-right: 0;
  margin-left: 0;
  padding-top: 0;
  padding-right: 10px;
  padding-left: 10px;
  max-height: none;
  height: 100%;
}

.row > [class*='coffee-span-'] > .container.nav-container {
  text-align: right;
  padding-top: 10px;
}

.row > [class*='coffee-span-'] > .container.NewsContainer {
  float: left;
  margin: 0 0 24px;
  padding-top: 0;
  width: auto;
  text-align: left;
}

div.responsive-picture {
  max-width: 800px;
}

li {
  margin-top: 6px;
  margin-right: 2%;
  margin-left: 1%;
  color: #4d4d4d;
  font-size: 16px;
  font-family: Garamond, Baskerville, 'Baskerville Old Face', 'Hoefler Text', 'Times New Roman', serif;
}

div.responsive-picture.newspic {
  float: left;
  padding-right: 20px;
  width: 25%;
  background-image: none;
}

div.responsive-picture.newsfeed.newspic {
  float: left;
  margin-right: 1%;
  padding-right: 1px;
  padding-left: 12px;
  max-width: 800px;
  width: 33%;
}

.row > [class*='coffee-span-'] > .container {
  width: auto;
}

.row > [class*='coffee-span-'] > .container.achievements-wrapper {
  display: flex;
  margin-right: 0;
  margin-bottom: 80px;
}

li.body_text {
  color: #414141;
  font-weight: 300;
  font-size: 15px;
  font-family: 'Roboto', sans-serif;
}

div.responsive-picture.logo {
  margin-top: 2px;
  margin-bottom: 2px;
  padding-bottom: 0;
}

div.responsive-picture.logo img {
  max-height: 52px;
  width: auto;
}

li span[class*="list-item-text"] {
  font-weight: 600;
}

div.responsive-picture.newsfeed.newspic.right {
  float: right;
  margin: 0 1% 7px;
  padding-top: 0;
  padding-bottom: 0;
}

div.responsive-picture.picture-1 {
  max-width: none;
  max-height: 480px;
}

a.responsive-picture.picture-link-1 {
  float: none;
  display: block;
  margin-right: auto;
  margin-left: auto;
  padding-top: 2px;
  padding-right: 0;
  padding-bottom: 0;
  max-width: none;
  max-height: none;
  width: 26%;
}

a.responsive-picture.amp.picture-link-1 {
  max-width: none;
  width: 40%;
}

a.responsive-picture.picture-link-1.qswitch {
  padding-top: 2px;
  padding-bottom: 0;
  width: 35%;
}

.row > [class*='coffee-span-'] .html-element.html-element-1 {
  position: static;
  right: auto;
  left: auto;
  float: none;
  clear: none;
  margin-right: 0;
  padding-right: 0;
  text-align: center;
}

.row > [class*='coffee-span-'] > .container.container-1 {
  max-width: 800px;
}

.row > [class*='coffee-span-'] > .container.container-2 {
  max-width: 800px;
}

.row > [class*='coffee-span-'] > .container.container-3 {
  max-width: 800px;
  max-height: 600px;
  width: auto;
}

@media screen and (max-width: 672px) {
  /* Text Elements */

  h5.LeftNav {
    display: block;
    margin-bottom: 0;
  }

  h6.section-header {
    margin-top: 60px;
    text-align: left;
  }

  p.paragraph.Footer {
    text-align: center;
  }

  a.link-text.leftnavlinks {
    display: inline-block;
    padding-right: 10px;
    text-align: left;
  }

  /* Layout Elements */

  body > .row > [class*='coffee-span-'].call-out {
    padding-top: 80px;
    text-align: center;
  }

  body > .row > [class*='coffee-span-'].nav-col {
    text-align: center;
  }

  body > .row.NavTitle2 {
    margin-bottom: 50px;
  }

  body > .row.NavTitle3 {
    position: relative;
    padding-top: 4px;
    padding-bottom: 4px;
    box-shadow: none;
  }

  body > .row > [class*='coffee-span-'].newsfeed {
    padding-top: 12px;
    padding-right: 8px;
    padding-left: 8px;
  }

  body > .row.NavTitle4 {
    margin-bottom: 50px;
  }

  body > .row > [class*='coffee-span-'].section-content {
    padding: var(--section-pad-y) 20px;
  }

  body > .row > [class*='coffee-span-'].front {
    padding-top: 80px;
    text-align: center;
  }

  .row > [class*='coffee-span-'] > .container.nav-container {
    text-align: center;
  }

  .row > [class*='coffee-span-'] > .container.NewsContainer {
    margin-right: 1%;
    margin-left: 1%;
  }

  /* Application Highlights: horizontal feature rows on mobile */
  [class*='subgrid-column-14'] > .container {
    display: grid;
    grid-template-columns: 68px 1fr;
    grid-template-rows: auto auto;
    column-gap: 14px;
    padding: 16px 0;
    border-bottom: 1px solid #e8ecf0;
    max-width: none;
    max-height: none;
    width: auto;
  }

  [class*='subgrid-column-14'] > .container .rule {
    display: none;
  }

  [class*='subgrid-column-14'] > .container p.paragraph.paragraph-1 {
    grid-column: 2;
    grid-row: 1;
    background-color: transparent;
    text-align: left;
    padding: 0;
    margin: 0 0 4px 0;
  }

  [class*='subgrid-column-14'] > .container p.paragraph.paragraph-1 span.paragraph-text-3 {
    background-color: transparent;
    color: #2d5a78;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.35;
  }

  [class*='subgrid-column-14'] > .container a.responsive-picture.picture-link-1 {
    grid-column: 1;
    grid-row: 1 / span 2;
    width: 100% !important;
    margin: 0 !important;
    padding: 0;
    align-self: center;
    display: block;
  }

  [class*='subgrid-column-14'] > .container p.paragraph.text_column {
    grid-column: 2;
    grid-row: 2;
    margin: 0;
    font-size: 14px;
    line-height: 1.5;
  }

  /* === Typography scaling === */
  h1.about_title {
    font-size: 24px;
    margin-top: 4px;
  }

  h1.MainTitle3 {
    padding-top: 16px;
    font-size: 26px;
    text-align: left;
  }

  h1 span.heading-text-2 {
    font-size: 26px;
  }

  h2.heading-2-index {
    font-size: 28px;
    text-align: left;
    margin-bottom: 10px;
  }

  h2.heading-2-about {
    font-size: 22px;
    margin-top: 20px;
  }

  h2 span.heading-text-3 {
    font-size: 20px;
  }

  h3.faq-question {
    font-size: 16px;
    line-height: 1.45;
  }

  /* Remove justify on narrow screens */
  p.paragraph.text-body-about.text_body,
  p.paragraph.text_body {
    text-align: left;
  }

  /* === Left nav → horizontal pill chips === */
  body > .row > [class*='coffee-span-'].nav-col {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    padding: 10px 8px 14px;
    border-right: none;
    text-align: left;
    border-bottom: 1px solid #e5eaef;
    margin-bottom: 4px;
  }

  h3.heading-3-nav.left-nav.right-mob {
    display: none;
  }

  a.link-text.leftnavlinks.righ-mob {
    float: none !important;
    clear: none !important;
    display: inline-block;
    padding: 5px 12px;
    margin: 0;
    background: #f0f5f8;
    border: 1px solid #cdd8e3;
    border-radius: 20px;
    font-size: 11px;
    letter-spacing: 0.4px;
    color: #4d7a95;
    text-transform: uppercase;
    white-space: nowrap;
    text-decoration: none;
  }

  a.link-text.leftnavlinks.righ-mob:hover {
    background: #e0eaf0;
    color: #2d5a78;
    border-color: #b3c8d8;
  }

  /* === Banner (index): no extra top padding === */
  body > .row > [class*='coffee-span-'].front {
    padding-top: 0;
  }

  /* === Call-out image (about.html): shorter on mobile === */
  body > .row > [class*='coffee-span-'].call-out {
    min-height: 90px;
    height: 90px;
    padding-top: 0;
    padding-bottom: 0;
  }

  /* === Inline images (description.html): stack full-width === */
  div.responsive-picture.newspic,
  div.responsive-picture.newsfeed.newspic,
  div.responsive-picture.newsfeed.newspic.right {
    float: none !important;
    width: 100% !important;
    max-width: 100%;
    margin: 0 0 16px 0 !important;
    padding: 0 !important;
  }

  div.responsive-picture.newspic img,
  div.responsive-picture.newsfeed.newspic img {
    width: 100%;
    height: auto;
    display: block;
  }

  /* === Newsfeed: consistent horizontal padding === */
  body > .row > [class*='coffee-span-'].newsfeed {
    padding-right: 12px;
    padding-left: 12px;
  }

  /* === NewsContainer: tighter spacing === */
  .row > [class*='coffee-span-'] > .container.NewsContainer {
    margin-right: 0;
    margin-left: 0;
    padding: 0 4px;
  }
}

/* =============================================
   Why ASLD — modern feature cards
   ============================================= */

body > .row.why-section {
  background-color: #f0f5f8;
  max-width: none;
  padding-top: 40px;
  padding-bottom: 40px;
}

body > .row.app-section {
  background-color: #f0f5f8;
  max-width: none;
}

body > .row.why-section > [class*='coffee-span-'].section-content {
  padding-top: 0;
  padding-bottom: 0;
}

body > .row.why-section h2.heading-2-index {
  margin-top: 0;
  margin-bottom: 20px;
}

.why-cards-row {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 20px;
  padding: 0;
}

/* CoffeeGrinder gives every .row a clearfix via :before/:after. In a flex
   container those pseudo-elements become flex ITEMS: the :before sits on the
   first line and its trailing `gap` pushes line 1 right by 20px, while the
   wrapped line 2 starts at the true left edge. Removing them from the flow
   keeps every line — and every card row — flush with the section above. */
.why-cards-row::before,
.why-cards-row::after,
.app-highlights-row::before,
.app-highlights-row::after {
  display: none;
}

.why-col {
  /* 380px basis: with .row capped at 1200px, three cards can never share a
     row, so four items settle into a readable 2x2 instead of four cramped
     columns. Drops to a single column on narrow screens. */
  flex: 1 1 380px;
  min-width: 0;
  /* override float-based grid width so flex takes over */
  width: auto !important;
  float: none !important;
}

.why-card {
  background: #fff;
  border-top: 3px solid #2d5a78;
  border-radius: 0 0 6px 6px;
  box-shadow: 0 2px 16px rgba(45,90,120,0.10);
  padding: 22px 22px 26px;
  height: 100%;
  box-sizing: border-box;
}

.why-card-title {
  margin: 0 0 10px;
  color: #2d5a78;
  font-size: 16px;
  font-weight: 600;
  font-family: 'Franklin Gothic Medium', 'Franklin Gothic', 'ITC Franklin Gothic', Arial, sans-serif;
  line-height: 1.3;
}

.why-card .paragraph.text_body_index {
  margin: 0;
  color: #555;
  font-size: 14px;
  line-height: 1.6;
}

/* =============================================
   Application Highlights — image cards
   ============================================= */

.app-col {
  flex: 1 1 240px;
  min-width: 0;
  width: auto !important;
  float: none !important;
  margin-bottom: 0;
}

/* Make the app highlights row also flex */
.app-highlights-row {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 20px;
  padding: 10px 0 30px;
}

.app-card {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  background: #fff;
  /* Square top corners so the accent bar below reads as a clean full-width
     line, matching .why-card. */
  border-radius: 0 0 8px 8px;
  box-shadow: 0 2px 14px rgba(0,0,0,0.07);
  overflow: hidden;
  height: 100%;
  box-sizing: border-box;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
  border: 1px solid #eaecef;
  /* Declared after the shorthand so it overrides the top edge. Same accent
     treatment as the "Why ASLD" cards. */
  border-top: 3px solid #2d5a78;
}

.app-card:hover {
  box-shadow: 0 6px 24px rgba(0,0,0,0.12);
  transform: translateY(-3px);
}

.app-card-img {
  width: 100%;
  height: 190px !important;
  max-height: 190px !important;
  background: #f0f4f7;
  overflow: hidden !important;
  flex-shrink: 0;
  display: block;
}

.app-card-img img {
  width: 100% !important;
  height: 190px !important;
  max-width: 100% !important;
  max-height: 190px !important;
  object-fit: cover !important;
  display: block !important;
  margin: 0 !important;
}

.app-card-img--icon {
  background: #eef2f5;
}

.app-card-img--icon img {
  object-fit: contain !important;
  padding: 20px;
  box-sizing: border-box;
}

.app-card-img--contain {
  background: #f8f9fa;
}

.app-card-img--contain img {
  object-fit: contain !important;
  padding: 10px;
  box-sizing: border-box;
}

.app-card-body {
  padding: 18px 20px 22px;
  flex: 1;
}

.app-card-title {
  margin: 0 0 8px;
  color: #2d5a78;
  font-size: 15px;
  font-weight: 600;
  font-family: 'Franklin Gothic Medium', 'Franklin Gothic', 'ITC Franklin Gothic', Arial, sans-serif;
  line-height: 1.4;
}

.app-card-body p {
  margin: 0;
  color: #555;
  font-size: 14px;
  font-family: 'Roboto', sans-serif;
  font-weight: 300;
  line-height: 1.6;
}

@media (max-width: 672px) {
  .why-col,
  .app-col {
    flex: 1 1 100%;
  }

  .why-card,
  .app-card {
    margin-bottom: 0;
  }

  .why-cards-row,
  .app-highlights-row {
    gap: 14px;
  }
}

.video-responsive {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
}

.video-responsive iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* YouTube facade — click-to-load thumbnail */
.yt-facade {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
  background: #0a0a0a;
  overflow: hidden;
}

.yt-thumbnail {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.88;
  transition: opacity 0.25s ease;
}

.yt-facade:hover .yt-thumbnail {
  opacity: 1;
}

.yt-play-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transition: transform 0.18s ease, filter 0.18s ease;
  pointer-events: none;
  filter: drop-shadow(0 2px 12px rgba(0, 0, 0, 0.55));
}

.yt-facade:hover .yt-play-btn {
  transform: translate(-50%, -50%) scale(1.12);
  filter: drop-shadow(0 4px 20px rgba(0, 0, 0, 0.45));
}

/* iframe injected into facade on click */
.yt-facade iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

#contactForm div {
  margin-top: 12px;
}

#contactForm label,
#evaluationForm label[for] {
  display: block;
  font-family: 'Franklin Gothic Medium', 'Franklin Gothic', 'ITC Franklin Gothic', Arial, sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: #4d4d4d;
  margin-bottom: 4px;
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* Empty validation spans must not create phantom line height */
#evaluationForm span.info:empty,
#contactForm span.info:empty {
  display: none;
}

/* Section sub-headings inside evaluation form */
#evaluationForm h3 {
  margin-top: 0;
  margin-bottom: 8px;
  font-family: 'Franklin Gothic Medium', 'Franklin Gothic', 'ITC Franklin Gothic', Arial, sans-serif;
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: #4d7a95;
}

/* Checkbox / radio labels inside evaluation form */
#evaluationForm label:not([for]) {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: 'Roboto', sans-serif;
  font-size: 14px;
  font-weight: 300;
  text-transform: none;
  letter-spacing: normal;
  color: #4d4d4d;
  cursor: pointer;
  margin-bottom: 7px;
}

/* Input/textarea spacing within evaluation form */
#evaluationForm .demoInputBox {
  margin-bottom: 14px;
}

.demoInputBox {
  display: block;
  width: 100%;
  max-width: 480px;
  padding: 8px 10px;
  font-size: 14px;
  font-family: 'Roboto', sans-serif;
  border: 1px solid #ccc;
  border-radius: 2px;
  box-sizing: border-box;
}

.demoInputBox:focus {
  outline: none;
  border-color: #4d7a95;
}

textarea.demoInputBox {
  resize: vertical;
}

.btnAction {
  margin-top: 16px;
  padding: 10px 28px;
  background-color: #4d7a95;
  color: #fff;
  border: none;
  border-radius: 2px;
  font-size: 13px;
  font-family: 'Franklin Gothic Medium', 'Franklin Gothic', 'ITC Franklin Gothic', Arial, sans-serif;
  text-transform: uppercase;
  letter-spacing: 2px;
  cursor: pointer;
}

.btnAction:hover {
  background-color: #4a6070;
}

.btnRefresh {
  margin-left: 10px;
  padding: 6px 14px;
  background-color: transparent;
  color: #4d7a95;
  border: 1px solid #4d7a95;
  border-radius: 2px;
  font-size: 12px;
  cursor: pointer;
}

.btnRefresh:hover {
  background-color: #f0f4f6;
}

/* Validation message. Block-level and placed after its field in the markup so
   it sits on its own line beneath the input. Inputs here compute to
   inline-block, so an inline span would share the input's line and push it
   sideways. */
span.info {
  display: block;
  color: #c00;
  font-size: 12px;
  line-height: 1.35;
  font-family: 'Roboto', sans-serif;
  margin: 4px 0 0;
  max-width: 480px;
}

/* The evaluation form spaces fields with margin-bottom on the input itself, so
   pull the message up to sit close under it. Scoped to spans that directly
   follow an input: the checkbox-group messages there follow an <h3> instead
   and must keep their normal spacing. */
#evaluationForm .demoInputBox + span.info {
  margin-top: -10px;
  margin-bottom: 10px;
}

#mail-status {
  margin-bottom: 10px;
  font-family: 'Roboto', sans-serif;
  font-size: 14px;
}

#mail-status p.Error {
  padding: 10px 12px;
  color: #a00;
  background-color: #fff4f4;
  border: 1px solid #f5c6c6;
  border-radius: 2px;
  font-family: 'Roboto', sans-serif;
  font-size: 14px;
}

.form-check {
  margin-top: 4px;
  margin-bottom: 0;
}

#contactForm .form-check {
  margin-top: 2px;
  margin-bottom: 0;
}

#contactForm .form-check label,
#evaluationForm .form-check label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 400;
  text-transform: none;
  letter-spacing: normal;
  font-size: 14px;
  font-family: 'Roboto', sans-serif;
  color: #4d4d4d;
  cursor: pointer;
}

#contactForm .form-check a,
#evaluationForm .form-check a {
  color: #4d7a95;
}

#contactForm .form-check a:hover,
#evaluationForm .form-check a:hover {
  text-decoration: underline;
}

span.required-mark {
  color: #c00;
  font-weight: 600;
}

p.news-date {
  margin-top: 0;
  margin-bottom: 4px;
  padding-bottom: 0;
  color: #4d7a95;
  text-transform: uppercase;
  letter-spacing: 2px;
  font-size: 12px;
  font-family: 'Franklin Gothic Medium', 'Franklin Gothic', 'ITC Franklin Gothic', Arial, sans-serif;
}

h2.heading-2-about.news-year {
  clear: both;
  margin-top: 30px;
  margin-bottom: 0;
  padding-bottom: 4px;
  border-bottom: 1px solid #ddd;
}

a.news-link {
  color: #4d7a95;
  font-weight: 600;
  font-family: 'Franklin Gothic Medium', 'Franklin Gothic', 'ITC Franklin Gothic', Arial, sans-serif;
  font-size: 14px;
  text-decoration: none;
  letter-spacing: 1px;
}

a.news-link:hover {
  text-decoration: underline;
}

h3.faq-question {
  color: #4d7a95;
  font-weight: 500;
  font-size: 20px;
  font-family: Garamond, Baskerville, 'Baskerville Old Face', 'Hoefler Text', 'Times New Roman', serif;
  margin-top: 18px;
  margin-bottom: 4px;
}

/* === FAQ Accordion === */
body > .row > [class*='coffee-span-'].faq-content.newsfeed {
  padding-top: 20px;
}

.faq-group {
  margin-bottom: 30px;
}

h2.faq-group-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: #9ca3af;
  margin: 0 0 10px 2px;
  padding: 0;
  font-family: 'Roboto', sans-serif;
}

.faq-item {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  margin-bottom: 8px;
  overflow: hidden;
  transition: box-shadow 0.18s ease;
}

.faq-item[open] {
  box-shadow: 0 3px 14px rgba(0, 0, 0, 0.07);
}

.faq-item > summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 16px 20px;
  cursor: pointer;
  list-style: none;
  font-size: 19px;
  font-weight: 500;
  color: #4d7a95;
  font-family: Garamond, Baskerville, 'Baskerville Old Face', 'Hoefler Text', 'Times New Roman', serif;
  line-height: 1.35;
  -webkit-user-select: none;
  user-select: none;
}

.faq-item > summary::-webkit-details-marker { display: none; }
.faq-item > summary::marker { display: none; }

.faq-item > summary::after {
  content: '+';
  flex-shrink: 0;
  font-size: 22px;
  font-weight: 300;
  color: #aab;
  line-height: 1;
  width: 22px;
  text-align: center;
}

.faq-item[open] > summary::after {
  content: '\00D7';
  font-size: 20px;
}

.faq-item[open] > summary {
  border-bottom: 1px solid #edf0f4;
  color: #2a5570;
}

.faq-answer {
  padding: 14px 20px 16px;
}

.faq-answer p.paragraph.text_body {
  margin-bottom: 0;
  padding-bottom: 0;
  font-size: 15px;
  color: #4a5568;
}

@media screen and (max-width: 371px) {
  /* Layout Elements */

  body > .row > [class*='coffee-span-'].call-out {
    text-align: center;
  }

  body > .row > [class*='coffee-span-'].section-content {
    padding: var(--section-pad-y) 20px;
  }

  body > .row > [class*='coffee-span-'].front {
    text-align: center;
  }

  .subgrid > .row > [class*='coffee-span-'].subgrid-column-14 {
    padding-right: 7px;
    padding-left: 7px;
  }

  .row > [class*='coffee-span-'] > .container.NewsContainer {
    margin-right: 0;
    margin-left: 0;
  }

  .row > [class*='coffee-span-'] > .container.achievements-wrapper {
    flex-direction: column;
  }

  div.responsive-picture.newsfeed.newspic {
    margin-right: auto;
    margin-left: auto;
    padding-left: 0;
    width: 100%;
  }

  div.responsive-picture.newspic {
    padding-right: 0;
    width: 100%;
  }
}

/* =============================================
   Homepage call-to-action buttons
   The CTAs previously reused .link-button.nav-button, so the primary
   conversion action looked identical to a header nav link. These give the
   page one clear primary action and a lighter secondary one.
   ============================================= */
a.link-button.btn-primary,
a.link-button.btn-secondary {
  display: inline-block;
  margin: 6px 10px 6px 0;
  padding: 13px 30px;
  border-radius: 6px;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  font-size: 13px;
  font-weight: 600;
  transition: background-color .18s ease, color .18s ease,
              box-shadow .18s ease, transform .18s ease;
}

a.link-button.btn-primary {
  background-color: #4d7a95;
  color: #fff;
  border: 1px solid #4d7a95;
  box-shadow: 0 2px 10px rgba(45, 90, 120, .22);
}

a.link-button.btn-primary:hover {
  background-color: #3c6379;
  border-color: #3c6379;
  color: #fff;
  box-shadow: 0 5px 18px rgba(45, 90, 120, .30);
  transform: translateY(-1px);
}

a.link-button.btn-secondary {
  background-color: transparent;
  color: #4d7a95;
  border: 1px solid #b9cad6;
}

a.link-button.btn-secondary:hover {
  background-color: #f2f6f9;
  border-color: #4d7a95;
  color: #2a5570;
  transform: translateY(-1px);
}

a.link-button.btn-primary:focus-visible,
a.link-button.btn-secondary:focus-visible {
  outline: 2px solid #2a5570;
  outline-offset: 2px;
}

/* Consistent vertical rhythm between homepage sections.
   Standalone sections are separated by .section-content's 50px top + 50px
   bottom padding. The Consulting / News / Learn-More blocks instead share one
   wrapper as sibling .subgrid elements, so they got no padding between them
   (~7px), so they need an explicit margin.

   Two standalone sections sit (7px .subgrid margin-bottom + 2 x section
   padding) apart, so deriving the same figure here keeps stacked blocks in
   step with the rest of the page at every breakpoint. Adjacent sibling margins
   collapse to the larger of the two, so this value wins over the 7px. */
.section-content > .subgrid + .subgrid {
  margin-top: calc(var(--section-pad-y) * 2 + 7px);
}

/* Section separators are handled by the section padding alone, so the
   full-width rules are no longer needed. */
.section-content .rule hr,
.column-9 .rule hr {
  display: none;
}

@media screen and (max-width: 672px) {
  a.link-button.btn-primary,
  a.link-button.btn-secondary {
    display: block;
    margin: 8px 0;
    padding: 14px 20px;
    text-align: center;
  }

  /* Tighter rhythm on phones. The stacked-block margin derives from this via
     calc(), so it stays in step automatically. */
  :root {
    --section-pad-y: 22px;
  }
}