/* ==========================================================================
   Containers
   Three widths, as in the house style:
     .container        the main grid. The design is a 1680 column with 120 margins on a
                       1920 screen; the container adds the 15px gutter each side, so 1710
                       gives exactly 1680 of content
     .container-sm     a step narrower, for blocks that sit inside the main grid (footer,
                       CTA, intros)
     .container-fluid  full bleed (photos, the blue band), usually with p-0
   Narrow reading columns (article text, forms) use the grid inside .container
   (col-lg-6 offset-lg-3), not a container of their own.
   Desktop-first: every block below is max-width only.
   ========================================================================== */

@media screen and (min-width: 1800px) {

  .container,
  .container-lg,
  .container-md,
  .container-xl,
  .container-xxl {
    max-width: 1710px;
  }

  .container-sm {
    max-width: 1480px;
  }
}

@media screen and (min-width: 1600px) and (max-width: 1799px) {

  .container,
  .container-lg,
  .container-md,
  .container-xl,
  .container-xxl {
    max-width: 1530px;
  }

  .container-sm {
    max-width: 1320px;
  }
}

@media screen and (min-width: 1400px) and (max-width: 1599px) {

  .container,
  .container-lg,
  .container-md,
  .container-xl,
  .container-xxl {
    max-width: 1350px;
  }

  .container-sm {
    max-width: 1200px;
  }
}

@media screen and (min-width: 1200px) and (max-width: 1399px) {

  .container,
  .container-lg,
  .container-md,
  .container-xl,
  .container-xxl {
    max-width: 1170px;
  }

  .container-sm {
    max-width: 1020px;
  }
}

/* below 1200 Bootstrap's own widths apply (960 · 720 · 540 · full width) */

/* ==========================================================================
   Typography
   One scale, stepped down at each breakpoint. Every text style is listed at every step, so
   the sizes can be read across in one place:

                 1920   1599  1399  1199   991   767   575   374
   hero_heading   120    104    92    80    68    56    44    38
   h1 / h1_style   84     76    68    60    52    44    36    32
   h2 / h2_style   28     27    26    25    24    23    22    20
   h3              24     23    22    21    20    20    19    18
   h4              22     21    20    20    19    18    18    17
   h5              20     19    19    18    18    17    17    16
   h6              18     18    17    17    16    16    16    15
   p / li          18     18    17    17    16    16    16    15
   body_large      22     21    20    19    18    18    17    16
   meta / label    14     14    13    13    13    13    13    12
   ========================================================================== */

@media screen and (max-width: 1599px) {
  .hero_heading {
    font-size: 104px;
  }

  h1,
  .h1_style {
    font-size: 76px;
  }

  h2,
  .h2_style {
    font-size: 27px;
  }

  h3 {
    font-size: 23px;
  }

  h4 {
    font-size: 21px;
  }

  h5 {
    font-size: 19px;
  }

  .body_large {
    font-size: 21px;
  }
}

@media screen and (max-width: 1399px) {
  .hero_heading {
    font-size: 92px;
  }

  h1,
  .h1_style {
    font-size: 68px;
  }

  h2,
  .h2_style {
    font-size: 26px;
  }

  h3 {
    font-size: 22px;
  }

  h4 {
    font-size: 20px;
  }

  h6 {
    font-size: 17px;
  }

  p,
  li {
    font-size: 17px;
  }

  .body_large {
    font-size: 20px;
  }

  .meta_text,
  .default_label,
  .chapter_label {
    font-size: 13px;
  }
}

@media screen and (max-width: 1199px) {
  .hero_heading {
    font-size: 80px;
  }

  h1,
  .h1_style {
    font-size: 60px;
  }

  h2,
  .h2_style {
    font-size: 25px;
  }

  h3 {
    font-size: 21px;
  }

  h5 {
    font-size: 18px;
  }

  .body_large {
    font-size: 19px;
  }
}

@media screen and (max-width: 991px) {
  .section-padding {
    padding: 80px 0;
  }

  .section-padding-lg {
    padding: 100px 0;
  }

  .hero_heading {
    font-size: 68px;
  }

  h1,
  .h1_style {
    font-size: 52px;
  }

  h2,
  .h2_style {
    font-size: 24px;
  }

  h3 {
    font-size: 20px;
  }

  h4 {
    font-size: 19px;
  }

  h6 {
    font-size: 16px;
  }

  p,
  li {
    font-size: 16px;
  }

  .body_large {
    font-size: 18px;
  }
}

@media screen and (max-width: 767px) {
  .hero_heading {
    font-size: 56px;
  }

  h1,
  .h1_style {
    font-size: 44px;
  }

  h2,
  .h2_style {
    font-size: 23px;
  }

  h4 {
    font-size: 18px;
  }

  h5 {
    font-size: 17px;
  }
}

@media screen and (max-width: 575px) {
  .section-padding {
    padding: 60px 0;
  }

  .section-padding-lg {
    padding: 80px 0;
  }

  /* a little more breathing room at the screen edge than Bootstrap's 15px */
  .container,
  .container-sm {
    padding-left: 20px;
    padding-right: 20px;
  }

  .hero_heading {
    font-size: 44px;
  }

  h1,
  .h1_style {
    font-size: 36px;
  }

  h2,
  .h2_style {
    font-size: 22px;
  }

  h3 {
    font-size: 19px;
  }

  .body_large {
    font-size: 17px;
  }
}

/* small phones (iPhone SE, 360 and under 375) */
@media screen and (max-width: 374px) {
  .container,
  .container-sm {
    padding-left: 16px;
    padding-right: 16px;
  }

  .hero_heading {
    font-size: 38px;
  }

  h1,
  .h1_style {
    font-size: 32px;
  }

  h2,
  .h2_style {
    font-size: 20px;
  }

  h3 {
    font-size: 18px;
  }

  h4 {
    font-size: 17px;
  }

  h5 {
    font-size: 16px;
  }

  h6,
  p,
  li {
    font-size: 15px;
  }

  .body_large {
    font-size: 16px;
  }

  .meta_text,
  .default_label,
  .chapter_label {
    font-size: 12px;
  }
}

/* ==========================================================================
   Sections (each page's blocks go below, in the same order as style.css)
   ========================================================================== */

/* ==========================================================================
   Header
   ========================================================================== */

@media screen and (max-width: 1399px) {
  .header_nav_link,
  .header_search_btn,
  .header_hours_area {
    font-size: 13px;
  }

  .header_nav_area ul {
    gap: 30px;
  }
}

/* below 1200 the nav moves into the full-screen menu: one 90px row, logo block on the
   left, search and the menu button on the right */
@media screen and (max-width: 1199px) {
  .header_logo_area {
    flex-basis: 200px;
  }

  .header_logo_area a {
    width: 150px;
  }

  .site_header.is_scrolled .header_logo_area a {
    width: 130px;
  }

  .header_top_area,
  .header_nav_area,
  .header_line {
    display: none;
  }

  .header_main_area,
  .site_header.is_scrolled .header_main_area {
    height: 90px;
    padding: 0 30px;
    border-top: 0;
  }

  .header_search_btn span {
    display: none;
  }

  .header_menu_btn {
    display: block;
  }

  .header_menu_area {
    display: block;
  }

  .header_spacer {
    height: 90px;
  }

  /* the open menu keeps the bar on top, in blue, and never lets it slide away */
  .site_header.is_menu_open {
    background-color: #2D4385;
    transform: none;
  }

  .site_header.is_menu_open .header_main_area {
    border-bottom-color: rgba(155, 155, 155, 0.6);
  }
}

@media screen and (max-width: 991px) {
  .header_menu_row a {
    font-size: 29px;
  }
}

@media screen and (max-width: 767px) {
  .header_menu_row a {
    font-size: 26px;
  }

  .header_menu_inner {
    padding: 20px 20px 30px;
  }

  .header_menu_contact a {
    font-size: 18px;
  }
}

@media screen and (max-width: 575px) {
  .header_menu_row a {
    font-size: 24px;
  }

  .header_menu_sub a,
  .header_menu_contact a {
    font-size: 16px;
  }

  .header_menu_meta p {
    font-size: 14px;
  }

  .header_logo_area {
    flex-basis: 150px;
  }

  .header_logo_area a,
  .site_header.is_scrolled .header_logo_area a {
    width: 112px;
  }

  .header_main_area,
  .site_header.is_scrolled .header_main_area {
    height: 70px;
    padding: 0 12px 0 20px;
  }

  .header_menu_btn {
    margin-left: 12px;
  }

  .header_menu_area {
    padding-top: 70px;
  }

  .header_spacer {
    height: 70px;
  }
}

/* ==========================================================================
   Page banner
   ========================================================================== */

@media screen and (max-width: 1599px) {
  .page_banner {
    height: 560px;
  }

  .page_banner_cell_area {
    padding: 30px;
  }
}

/* the header is one 90px row from here */
@media screen and (max-width: 1199px) {
  .page_banner {
    height: 520px;
  }

  .page_banner_line.is_y1 {
    bottom: 90px;
  }

  .page_banner_title_area {
    bottom: 126px;
  }

  .page_banner_cell_area {
    top: 90px;
    bottom: 90px;
    left: calc(70% + 1px);
    width: calc(25.885% - 1px);
    padding: 24px;
  }

  .page_banner_line.is_x1 {
    left: 70%;
  }
}

/* tablets and phones: the side cell would be a sliver, so the vertical lines go and the label
   and sentence move under the line, on the grid's left edge, below the title */
@media screen and (max-width: 991px) {
  .page_banner {
    height: 500px;
  }

  .page_banner_line.is_x1,
  .page_banner_line.is_x2 {
    display: none;
  }

  .page_banner_line.is_y1 {
    bottom: 120px;
  }

  .page_banner_title_area {
    bottom: 152px;
  }

  .page_banner_cell_area {
    top: auto;
    bottom: 0;
    left: 0;
    right: 0;
    width: auto;
    height: 120px;
    justify-content: center;
    gap: 10px;
    max-width: 720px;
    margin: 0 auto;
    padding: 0 15px;
  }

  .page_banner_cell_area p:not(.default_label) {
    max-width: 460px;
  }
}

@media screen and (max-width: 767px) {
  .page_banner_cell_area {
    max-width: 540px;
  }
}

@media screen and (max-width: 575px) {
  .page_banner {
    height: 440px;
  }

  .page_banner_line.is_y1 {
    bottom: 128px;
  }

  .page_banner_title_area {
    bottom: 156px;
  }

  .page_banner_cell_area {
    height: 128px;
    max-width: none;
    padding: 0 20px;
  }
}

@media screen and (max-width: 374px) {
  .page_banner_cell_area {
    padding: 0 16px;
  }
}

/* ==========================================================================
   Breadcrumb bar
   ========================================================================== */

@media screen and (max-width: 1399px) {
  .breadcrumb_step {
    font-size: 13px;
  }
}

@media screen and (max-width: 991px) {
  .breadcrumb_list {
    height: 64px;
  }

  .breadcrumb_home_area {
    flex-basis: 64px;
  }

  .breadcrumb_home_area + .breadcrumb_step {
    margin-left: 24px;
  }

  .breadcrumb_step {
    gap: 12px;
    margin-left: 12px;
  }
}

/* phones: the bar keeps to one line, the current page giving way with "…" */
@media screen and (max-width: 575px) {
  .breadcrumb_list {
    height: 56px;
  }

  .breadcrumb_home_area {
    flex-basis: 56px;
  }

  .breadcrumb_home_area svg {
    width: 22px;
    height: 22px;
  }

  .breadcrumb_home_area + .breadcrumb_step {
    margin-left: 18px;
  }

  .breadcrumb_step {
    gap: 10px;
    margin-left: 10px;
  }

  .breadcrumb_arrow {
    flex-basis: 20px;
  }

  .breadcrumb_arrow svg {
    width: 20px;
    height: 20px;
  }

  .breadcrumb_step.is_current > span:last-child {
    max-width: none;
  }
}

@media screen and (max-width: 374px) {
  .breadcrumb_step {
    font-size: 12px;
  }
}

/* phones and small tablets: the home icon and the last two steps only (the parent and this
   page), each giving way with "…" before the bar ever runs wider than the screen */
@media screen and (max-width: 767px) {
  .breadcrumb_list {
    overflow: hidden;
  }

  .breadcrumb_list .breadcrumb_step:not(:nth-last-child(-n+2)) {
    display: none;
  }

  /* the parent gives way first; this page's own name only once the parent is down to "…" */
  .breadcrumb_list .breadcrumb_step {
    flex: 0 1000 auto;
    min-width: 0;
  }

  .breadcrumb_list .breadcrumb_step.is_current {
    flex: 0 1 auto;
    min-width: 72px;
  }

  .breadcrumb_list .breadcrumb_step > a,
  .breadcrumb_list .breadcrumb_step > span:last-child {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* the first step still shown sits 18 from the home cell, with no arrow before it */
  .breadcrumb_list .breadcrumb_step:nth-last-child(2) {
    margin-left: 18px;
  }

  .breadcrumb_list .breadcrumb_step:nth-last-child(2) .breadcrumb_arrow {
    display: none;
  }
}

/* phones: the home icon and this page's name only (the back link covers the way up) */
@media screen and (max-width: 575px) {
  .breadcrumb_list .breadcrumb_step:not(.is_current) {
    display: none;
  }

  .breadcrumb_list .breadcrumb_step.is_current {
    margin-left: 18px;
  }

  .breadcrumb_list .breadcrumb_step.is_current .breadcrumb_arrow {
    display: none;
  }
}

/* the back link: arrow only on tablets and phones, so the path keeps its room */
@media screen and (max-width: 1399px) {
  .breadcrumb_back {
    font-size: 13px;
  }
}

@media screen and (max-width: 991px) {
  .breadcrumb_back {
    padding: 0 20px;
  }

  .breadcrumb_back span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
}

@media screen and (max-width: 575px) {
  .breadcrumb_back {
    padding: 0 14px;
  }
}

/* ==========================================================================
   Home — hero
   ========================================================================== */

@media screen and (max-width: 1199px) {
  .home_hero_label_area {
    top: max(150px, 21.3%);
  }
}

/* phones: the desktop grid in miniature. The card takes a bigger square at the bottom right
   (--hero-card), standing on the bottom line in a cell of its own: a line across its top
   edge (the width of the screen, as on desktop) and two short uprights at its sides, from that
   line down. The headline rests on the top line, 28 above it, as it rests on the bottom line on
   desktop; the intro line stays at the top */
@media screen and (max-width: 767px) {
  .home_hero {
    --hero-card: min(44vw, 300px);
    min-height: 600px;
  }

  .home_hero_card_area {
    left: auto;
    right: 20px;
    width: var(--hero-card);
    aspect-ratio: 1 / 1;
  }

  .home_hero_line.is_y1 {
    bottom: calc(7.407% + var(--hero-card));
  }

  .home_hero_line.is_x2,
  .home_hero_line.is_x3 {
    top: auto;
    bottom: 0;
    height: calc(7.407% + var(--hero-card));
  }

  .home_hero_line.is_x2 {
    left: calc(100% - 20px - var(--hero-card) - 1px);
  }

  .home_hero_line.is_x3 {
    left: calc(100% - 20px);
  }

  .home_hero_label_area {
    top: 120px;
    left: 20px;
    right: 20px;
  }

  .home_hero_heading_area {
    left: 20px;
    right: 20px;
    bottom: calc(7.407% + var(--hero-card) + 28px);
  }
}

/* ==========================================================================
   Buttons
   Steps down with the type: height = arrow box, label size and side padding.

                 1920   1399   991   575   374
   height / box    60     56    54    52    50
   label           14     13    13    13    12
   label padding   30     26    24    20    18
   min width      340    300   280   full width (max 340)
   ========================================================================== */

@media screen and (max-width: 1399px) {
  .default_button {
    min-width: 300px;
    height: 56px;
  }

  .default_button_label {
    padding: 0 26px;
    font-size: 13px;
  }

  .default_button_arrow {
    flex-basis: 56px;
    width: 56px;
  }
}

@media screen and (max-width: 991px) {
  .default_button {
    min-width: 280px;
    height: 54px;
  }

  .default_button_label {
    padding: 0 24px;
  }

  .default_button_arrow {
    flex-basis: 54px;
    width: 54px;
  }
}

@media screen and (max-width: 575px) {
  .default_button {
    min-width: 0;
    width: 100%;
    max-width: 340px;
    height: 52px;
  }

  .default_button_label {
    padding: 0 20px;
  }

  .default_button_arrow {
    flex-basis: 52px;
    width: 52px;
  }
}

@media screen and (max-width: 374px) {
  .default_button {
    height: 50px;
  }

  .default_button_label {
    padding: 0 18px;
    font-size: 12px;
  }

  .default_button_arrow {
    flex-basis: 50px;
    width: 50px;
  }
}

/* ==========================================================================
   Home — about
   ========================================================================== */

@media screen and (max-width: 1399px) {
  .home_about_strip_area {
    height: 120px;
  }

  .home_about_content_area {
    margin-left: 4%;
    padding-bottom: 170px;
  }
}

/* stacked: the text first, then the mascot standing on the strip */
@media screen and (max-width: 991px) {
  .home_about {
    padding-top: 80px;
  }

  .home_about_content_area {
    max-width: 620px;
    margin-left: 0;
    padding-bottom: 60px;
  }

  .home_about_mascot_area {
    justify-content: center;
  }

  .home_about_mascot_area img {
    max-width: 420px;
  }

  .home_about_strip_area {
    height: 100px;
  }

  .home_about_content_area h2,
  .home_about_text_area,
  .home_about_button_area {
    margin-top: 32px;
  }
}

@media screen and (max-width: 575px) {
  .home_about {
    padding-top: 60px;
  }

  .home_about_mascot_area img {
    max-width: 300px;
  }

  .home_about_strip_area {
    height: 70px;
  }

  .home_about_logo_area img {
    width: 96px;
  }
}

/* ==========================================================================
   Home — solutions
   ========================================================================== */

/* short screens: the cards get less air so they still fit the ground */
@media screen and (min-width: 992px) and (max-height: 860px) {
  .home_solutions_card_area {
    min-height: 0;
    padding-top: 10px;
    padding-bottom: 10px;
  }

  .home_solutions_card_area h3,
  .home_solutions_card_area p {
    margin-top: 20px;
  }
}

@media screen and (max-width: 1399px) {
  .home_solutions_card_area {
    padding-left: 40px;
    padding-right: 20px;
  }
}

/* small laptops and iPad landscape: the row slides anyway, so three cards to the screen keep
   the titles on whole words */
@media screen and (min-width: 992px) and (max-width: 1199px) {
  .home_solutions_track > [class*="col-"] {
    flex: 0 0 33.333%;
    max-width: 33.333%;
  }

  .home_solutions_card_area {
    padding-left: 32px;
  }
}

/* below 992 the scene isn't pinned: the van on a white stage, the watermark behind it, and the
   blue ground underneath with the cards two to a row */
@media screen and (max-width: 991px) {
  /* room above the ground for the van (70vw wide, so 37.2vw tall) */
  .home_solutions {
    height: auto;
    min-height: 0;
    padding-top: calc(37.2vw + 80px);
  }

  .home_solutions_speed_area {
    display: none;
  }

  .home_solutions_watermark {
    top: 90px;
    bottom: auto;
    left: 20px;
    font-size: 22vw;
  }

  .home_solutions_vehicle_area {
    left: 15vw;
    width: 70vw;
  }

  .home_solutions_land_area {
    position: relative;
    height: auto;
    padding: 40px 0 80px;
  }

  .home_solutions_track > [class*="col-"] {
    margin-top: 40px;
  }

  .home_solutions_card_area {
    min-height: 0;
  }
}

@media screen and (max-width: 575px) {
  .home_solutions {
    padding-top: calc(45.7vw + 60px);
  }

  .home_solutions_vehicle_area {
    left: 7vw;
    width: 86vw;
  }

  .home_solutions_land_area {
    padding: 20px 0 60px;
  }

  .home_solutions_card_area {
    padding: 20px 0 20px 30px;
  }
}

/* ==========================================================================
   Home — product line-up
   ========================================================================== */

/* tablets and phones: the whole range in view, nothing cut at the sides. The frame is the
   photo's 16:9 less the 8% the picture runs over for its drift (16 × 1.08 : 9 = 48 : 25), so the
   picture is exactly the photo's shape and "cover" crops nothing */
@media screen and (max-width: 991px) {
  .home_catalog_image_area {
    aspect-ratio: 48 / 25;
  }
}

/* ==========================================================================
   Blog card
   ========================================================================== */

/* the date follows the meta size */
@media screen and (max-width: 1399px) {
  .blog_card_date {
    font-size: 13px;
  }
}

@media screen and (max-width: 374px) {
  .blog_card_date {
    font-size: 12px;
  }

  /* written one level deeper than the narrow-card rules further down, so these win */
  .blog_card_area .blog_card_content_area {
    margin-left: 8px;
    margin-right: 8px;
    padding: 18px 16px;
  }

  .blog_card_area .blog_card_button .default_button_label {
    padding: 0 12px;
    font-size: 12px;
  }

  .blog_card_area .blog_card_button .default_button_arrow {
    flex-basis: 44px;
    width: 44px;
  }
}

@media screen and (max-width: 1399px) {
  .blog_card_content_area {
    min-height: 380px;
    margin-left: 20px;
    margin-right: 20px;
    padding: 24px;
  }

  .blog_card_title {
    margin-top: 24px;
  }
}

/* the card's button always fills its panel, whatever the site-wide button minimum */
.blog_card_area .blog_card_button {
  min-width: 0;
}

/* narrow three-up cards (iPad landscape, small laptops): a smaller button so its label fits */
@media screen and (max-width: 1199px) {
  .blog_card_content_area {
    margin-left: 14px;
    margin-right: 14px;
    padding: 20px;
  }

  .blog_card_button .default_button_label {
    padding: 0 18px;
    font-size: 13px;
  }

  .blog_card_button .default_button_arrow {
    flex-basis: 52px;
    width: 52px;
  }
}

@media screen and (max-width: 575px) {
  .blog_card_content_area {
    min-height: 0;
    margin: -25% 10px 0;
    padding: 20px 18px;
  }

  .blog_card_button .default_button_label {
    padding: 0 14px;
  }

  .blog_card_button .default_button_arrow {
    flex-basis: 48px;
    width: 48px;
  }

  .blog_card_title {
    margin-bottom: 40px;
  }
}

/* ==========================================================================
   Home — blog
   ========================================================================== */

/* tablets and phones: the cards become a row you swipe, the next one peeking in from the right */
@media screen and (max-width: 991px) {
  .home_blog_list {
    flex-wrap: nowrap;
    margin-top: 50px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .home_blog_list::-webkit-scrollbar {
    display: none;
  }

  .home_blog_list > [class*="col-"] {
    flex: 0 0 46%;
    max-width: 46%;
    scroll-snap-align: start;
  }
}

/* one card and the next peeking in, so the card's button has room */
@media screen and (max-width: 767px) {
  .home_blog_list > [class*="col-"] {
    flex-basis: 72%;
    max-width: 72%;
  }
}

@media screen and (max-width: 575px) {
  .home_blog_list {
    margin-top: 40px;
  }

  .home_blog_list > [class*="col-"] {
    flex-basis: 88%;
    max-width: 88%;
  }
}

@media screen and (max-width: 374px) {
  .home_blog_list > [class*="col-"] {
    flex-basis: 92%;
    max-width: 92%;
  }
}

/* the button drops under the heading */
@media screen and (max-width: 767px) {
  .home_blog_button_area {
    justify-content: flex-start;
    margin-top: 30px;
  }
}

@media screen and (max-width: 1399px) {
  .home_blog_button_area .default_button {
    min-width: 280px;
  }
}

@media screen and (max-width: 991px) {
  .home_blog_button_area .default_button {
    min-width: 260px;
  }
}

@media screen and (max-width: 575px) {
  .home_blog_button_area .default_button {
    min-width: 0;
  }
}

/* ==========================================================================
   Home — certifications
   ========================================================================== */

@media screen and (max-width: 1399px) {
  .home_certification_list {
    column-gap: 160px;
  }
}

@media screen and (max-width: 1199px) {
  .home_certification_list {
    column-gap: 100px;
  }
}

@media screen and (max-width: 991px) {
  .home_certification {
    padding-bottom: 80px;
  }

  .home_certification_area {
    margin: 0;
  }

  .home_certification_list {
    column-gap: 60px;
  }

  .home_certification_list img {
    height: 64px;
  }
}

/* phones: two marks to a row */
@media screen and (max-width: 575px) {
  .home_certification {
    padding-bottom: 60px;
  }

  .home_certification_header_area {
    padding: 40px 0;
  }

  /* follows the h2 scale, smaller only where a line would not fit */
  .home_certification_header_area h2 {
    font-size: min(22px, 5.4vw);
  }

  .home_certification_list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    justify-items: center;
    gap: 40px 20px;
    padding: 40px 0;
  }

  .home_certification_list img {
    height: 56px;
  }
}

/* ==========================================================================
   About — story
   ========================================================================== */

/* the photo stays the design's 52% of the screen; the gap around it shrinks with the screen */
@media screen and (max-width: 1399px) {
  .about_story {
    min-height: calc(34.375vw + 200px);
    padding: 100px 0;
  }

  .about_story_text_area,
  .about_story_button_area {
    margin-top: 36px;
  }

  .about_story_text_area p + p {
    margin-top: 20px;
  }
}

/* small laptops and iPad landscape: a narrower photo, so the copy keeps a readable column */
@media screen and (min-width: 992px) and (max-width: 1199px) {
  .about_story {
    min-height: calc(30vw + 200px);
  }

  .about_story_image_area {
    width: 45.45vw;
  }

  .about_story .col-lg-5 {
    flex: 0 0 50%;
    max-width: 50%;
  }
}

/* tablets and phones: the photo moves under the copy, lined up with the text on the left and
   still running off the right edge */
@media screen and (max-width: 991px) {
  .about_story {
    display: block;
    min-height: 0;
    padding: 80px 0;
  }

  .about_story_content_area {
    max-width: 620px;
  }

  .about_story_text_area,
  .about_story_button_area {
    margin-top: 32px;
  }

  .about_story_image_area {
    position: relative;
    top: auto;
    transform: none;
    width: calc(50vw + 345px);
    margin: 60px 0 0 auto;
  }
}

@media screen and (max-width: 767px) {
  .about_story_image_area {
    width: calc(50vw + 255px);
  }
}

@media screen and (max-width: 575px) {
  .about_story {
    padding: 60px 0;
  }

  .about_story_text_area,
  .about_story_button_area {
    margin-top: 28px;
  }

  .about_story_text_area p + p {
    margin-top: 16px;
  }

  .about_story_image_area {
    width: calc(100% - 20px);
    margin-top: 48px;
    aspect-ratio: 4 / 3.4;
  }
}

@media screen and (max-width: 374px) {
  .about_story_image_area {
    width: calc(100% - 16px);
  }
}

/* ==========================================================================
   About — chapter 01 · made in Gujarat
   ========================================================================== */

@media screen and (max-width: 1399px) {
  .about_plant {
    padding-bottom: 100px;
  }

  .about_plant_card_area {
    width: 640px;
    margin-top: -180px;
    padding: 50px;
    gap: 24px;
  }

  .about_plant_facts_area li {
    font-size: 13px;
  }
}

@media screen and (max-width: 1199px) {
  .about_plant_card_area {
    width: 600px;
    margin-top: -160px;
    padding: 44px;
  }
}

/* tablets: a taller crop so the machines stay readable, the card overlapping a little less */
@media screen and (max-width: 991px) {
  .about_plant {
    padding-bottom: 80px;
  }

  .about_plant_image_area {
    height: 56vw;
  }

  .about_plant_card_area {
    width: 560px;
    margin-top: -120px;
    padding: 40px;
  }
}

/* phones: nearly 4 : 3, kept on the bags; the card sits under the photo (over it, it would
   cover the bags) */
@media screen and (max-width: 575px) {
  .about_plant {
    padding-bottom: 60px;
  }

  .about_plant_image_area {
    height: 72vw;
  }

  .about_plant_image_area img {
    object-position: 78% bottom;
  }

  .about_plant_card_area {
    width: auto;
    margin-top: 0;
    padding: 36px 0 0;
    gap: 20px;
    box-shadow: none;
  }

  .about_plant_facts_area {
    gap: 32px;
  }
}

@media screen and (max-width: 374px) {
  .about_plant_facts_area {
    gap: 24px;
  }

  .about_plant_facts_area li {
    font-size: 12px;
  }
}

/* ==========================================================================
   About — chapter 02 · proven in the lab
   ========================================================================== */

@media screen and (max-width: 1399px) {
  .about_lab {
    padding: 100px 0 120px;
  }

  .about_lab_head_area {
    gap: 24px;
  }

  .about_lab_steps_area,
  .about_lab_certified_area {
    margin-top: 60px;
  }

  .about_lab_number,
  .about_lab_caption_area h3,
  .about_lab_certified_area {
    font-size: 13px;
  }
}

/* tablets and phones: the steps become a row you swipe, the next one peeking in */
@media screen and (max-width: 991px) {
  .about_lab {
    padding: 80px 0 90px;
  }

  .about_lab_head_area {
    max-width: 600px;
    gap: 20px;
  }

  .about_lab_steps_area {
    flex-wrap: nowrap;
    margin-top: 50px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .about_lab_steps_area::-webkit-scrollbar {
    display: none;
  }

  .about_lab_steps_area > [class*="col-"] {
    flex: 0 0 46%;
    max-width: 46%;
    scroll-snap-align: start;
  }

  .about_lab_step_area {
    gap: 20px;
  }

  .about_lab_caption_area {
    gap: 16px;
    padding-top: 16px;
  }

  .about_lab_certified_area {
    margin-top: 50px;
  }
}

/* phones: the label over the marks, which wrap two to a line */
@media screen and (max-width: 575px) {
  .about_lab {
    padding: 60px 0 70px;
  }

  .about_lab_head_area {
    align-items: flex-start;
    text-align: left;
  }

  .about_lab_steps_area {
    margin-top: 40px;
  }

  .about_lab_steps_area > [class*="col-"] {
    flex-basis: 86%;
    max-width: 86%;
  }

  .about_lab_certified_area {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    margin-top: 40px;
  }

  /* two marks to a line, no dots (a dot would start the second line) */
  .about_lab_certified_list {
    display: grid;
    grid-template-columns: auto auto;
    justify-content: start;
    gap: 8px 32px;
  }

  .about_lab_certified_list span + span::before {
    content: none;
  }
}

@media screen and (max-width: 374px) {
  .about_lab_steps_area > [class*="col-"] {
    flex-basis: 90%;
    max-width: 90%;
  }

  .about_lab_number,
  .about_lab_caption_area h3,
  .about_lab_certified_area {
    font-size: 12px;
  }
}

/* ==========================================================================
   About — chapter 03 · delivered to your site
   ========================================================================== */

@media screen and (max-width: 1599px) {
  .about_supply_top_area {
    gap: 80px;
  }

  .about_supply_content_area {
    flex-basis: 500px;
  }
}

@media screen and (max-width: 1399px) {
  .about_supply {
    padding: 100px 0;
  }

  .about_supply_top_area {
    gap: 60px;
  }

  .about_supply_content_area {
    flex-basis: 440px;
    gap: 24px;
  }

  .about_supply_flow_area {
    margin-top: 80px;
  }

  .about_supply_step,
  .about_supply_step h3,
  .about_supply_step p {
    font-size: 13px;
  }
}

@media screen and (max-width: 1199px) {
  .about_supply_top_area {
    gap: 48px;
  }

  .about_supply_content_area {
    flex-basis: 380px;
  }

  .about_supply_step {
    padding-right: 16px;
  }
}

/* tablets: the photo moves under the copy */
@media screen and (max-width: 991px) {
  .about_supply {
    padding: 80px 0;
  }

  .about_supply_top_area {
    flex-direction: column;
    align-items: stretch;
    gap: 50px;
  }

  .about_supply_content_area {
    flex-basis: auto;
    max-width: 620px;
    gap: 20px;
  }

  .about_supply_image_area {
    flex: 0 0 auto;
  }

  .about_supply_flow_area {
    margin-top: 60px;
  }

  .about_supply_step {
    padding: 20px 12px 0 0;
    gap: 8px;
  }
}

/* phones: the flow turns into a timeline running down, the marker travelling down its line */
@media screen and (max-width: 767px) {
  .about_supply_steps {
    grid-template-columns: 1fr;
    grid-auto-rows: 1fr;
  }

  .about_supply_step {
    padding: 0 0 28px 24px;
    border-top: 0;
    border-left: 1px solid rgba(155, 155, 155, 0.85);
  }

  .about_supply_marker {
    top: 80%;
    left: 0;
    width: 2px;
    height: 20%;
  }

  .about_supply_flow_area.is_tracking .about_supply_marker {
    top: 0;
    left: 0;
  }
}

@media screen and (max-width: 575px) {
  .about_supply {
    padding: 60px 0;
  }

  .about_supply_top_area {
    gap: 40px;
  }

  .about_supply_flow_area {
    margin-top: 48px;
  }
}

@media screen and (max-width: 374px) {
  .about_supply_step,
  .about_supply_step h3,
  .about_supply_step p {
    font-size: 12px;
  }
}

/* ==========================================================================
   CTA band
   ========================================================================== */

/* the call card follows the button's steps (height, label size) */
@media screen and (max-width: 1399px) {
  .cta_band_inner_area {
    padding: 70px 0;
  }

  .cta_band_call {
    width: 300px;
    height: 56px;
  }

  .cta_band_call_icon {
    flex-basis: 56px;
  }

  .cta_band_call_label,
  .cta_band_call_number {
    font-size: 13px;
  }
}

@media screen and (max-width: 991px) {
  .cta_band {
    padding: 60px 0;
  }

  .cta_band_area {
    margin: 0;
  }

  .cta_band_inner_area {
    gap: 16px;
    padding: 60px 0;
  }

  .cta_band_call {
    width: 280px;
    height: 54px;
  }

  .cta_band_call_icon {
    flex-basis: 54px;
  }
}

/* phones: the heading wraps on its own, evenly (the design's line break would leave one word
   alone on a narrow screen) */
@media screen and (max-width: 575px) {
  .cta_band_inner_area h2 br {
    display: none;
  }

  .cta_band_inner_area h2 {
    text-wrap: balance;
  }
}

/* phones: the actions stack, full width */
@media screen and (max-width: 575px) {
  .cta_band {
    padding: 40px 0;
  }

  .cta_band_inner_area {
    padding: 50px 0;
  }

  .cta_band_actions_area {
    flex-direction: column;
    align-items: center;
    width: 100%;
    margin-top: 12px;
    gap: 12px;
  }

  .cta_band_call {
    width: 100%;
    max-width: 340px;
    height: 52px;
  }

  .cta_band_call_icon {
    flex-basis: 52px;
  }
}

@media screen and (max-width: 374px) {
  .cta_band_call {
    height: 50px;
  }

  .cta_band_call_icon {
    flex-basis: 50px;
  }

  .cta_band_call_text {
    padding-left: 18px;
  }

  .cta_band_call_label,
  .cta_band_call_number {
    font-size: 12px;
  }
}

/* ==========================================================================
   Solutions — intro and index
   ========================================================================== */

@media screen and (max-width: 1599px) {
  .solution_intro_area {
    gap: 90px;
  }

  .solution_intro_content_area {
    flex-basis: 480px;
  }
}

@media screen and (max-width: 1399px) {
  .solution_intro {
    padding: 100px 0;
  }

  .solution_intro_area {
    gap: 70px;
  }

  .solution_intro_content_area {
    flex-basis: 420px;
    gap: 28px;
  }

  .solution_index_link {
    gap: 24px;
    padding: 24px 0;
  }

  .solution_index_meta,
  .solution_index_number {
    font-size: 13px;
  }

  .solution_index_arrow {
    flex-basis: 56px;
    height: 56px;
    width: 56px;
  }
}

@media screen and (max-width: 1199px) {
  .solution_intro_area {
    gap: 50px;
  }

  .solution_intro_content_area {
    flex-basis: 360px;
  }

  .solution_index_number {
    flex-basis: 30px;
  }
}

/* tablets and phones: the index runs full width under the intro */
@media screen and (max-width: 991px) {
  .solution_intro {
    padding: 80px 0;
  }

  .solution_intro_area {
    flex-direction: column;
    align-items: stretch;
    gap: 50px;
  }

  .solution_intro_content_area {
    flex-basis: auto;
    max-width: 620px;
    gap: 24px;
  }

  .solution_index_arrow {
    flex-basis: 54px;
    height: 54px;
    width: 54px;
  }
}

@media screen and (max-width: 575px) {
  .solution_intro {
    padding: 60px 0;
  }

  .solution_intro_area {
    gap: 40px;
  }

  .solution_index_link {
    gap: 16px;
    padding: 20px 0;
  }

  .solution_index_number {
    flex-basis: 22px;
  }

  .solution_index_arrow {
    flex-basis: 48px;
    height: 48px;
    width: 48px;
  }
}

@media screen and (max-width: 374px) {
  .solution_index_link {
    gap: 12px;
  }

  .solution_index_meta,
  .solution_index_number {
    font-size: 12px;
  }

  .solution_index_arrow {
    flex-basis: 44px;
    height: 44px;
    width: 44px;
  }
}

/* ==========================================================================
   Solutions — 01 · tile & stone fixing
   ========================================================================== */

@media screen and (max-width: 1599px) {
  .solution_tile_top_area {
    gap: 80px;
  }

  .solution_scale_stage {
    height: 320px;
  }

  .solution_scale_size {
    font-size: 22px;
  }
}

@media screen and (max-width: 1399px) {
  .solution_tile {
    padding-bottom: 100px;
  }

  .solution_tile_top_area {
    gap: 60px;
  }

  .solution_head_area {
    gap: 24px;
  }

  .solution_number,
  .solution_scale_product,
  .solution_scale_grade,
  .solution_scale_head_area p {
    font-size: 13px;
  }

  .solution_scale_area {
    margin-top: 80px;
  }

  .solution_scale_item {
    gap: 16px;
    padding: 32px 18px 0 22px;
  }

  .solution_scale_stage {
    height: 280px;
  }

  .solution_scale_size {
    font-size: 20px;
  }
}

/* small laptops and iPad landscape: a narrower photo so the copy keeps its column */
@media screen and (max-width: 1199px) {
  .solution_tile_top_area {
    gap: 48px;
  }

  .solution_tile_image_area {
    flex-basis: 54%;
  }

  .solution_scale_stage {
    height: 240px;
  }

  .solution_scale_size {
    font-size: 18px;
  }
}

/* tablets and phones: the copy under the photo; the scale becomes a row you swipe (each column
   keeps a fixed width, so the tiles stay to scale) */
@media screen and (max-width: 991px) {
  .solution_tile {
    padding-bottom: 80px;
  }

  .solution_tile_top_area {
    flex-direction: column;
    align-items: stretch;
    gap: 40px;
  }

  .solution_tile_image_area {
    flex: 0 0 auto;
  }

  .solution_tile_top_area .solution_head_area {
    max-width: 620px;
  }

  .solution_head_area {
    gap: 20px;
  }

  .solution_scale_area {
    margin-top: 60px;
  }

  .solution_scale_list {
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .solution_scale_list::-webkit-scrollbar {
    display: none;
  }

  .solution_scale_item {
    flex: 0 0 210px;
    scroll-snap-align: start;
  }

  .solution_scale_stage {
    height: 260px;
  }
}

@media screen and (max-width: 575px) {
  .solution_tile {
    padding-bottom: 60px;
  }

  .solution_tile_top_area {
    gap: 32px;
  }

  .solution_scale_area {
    margin-top: 48px;
  }

  .solution_scale_list {
    margin-top: 28px;
  }

  .solution_scale_item {
    flex-basis: 170px;
    gap: 12px;
    padding: 28px 14px 0 18px;
  }

  .solution_scale_stage {
    height: 220px;
  }

  .solution_scale_size {
    font-size: 17px;
  }
}

@media screen and (max-width: 374px) {
  .solution_scale_item {
    flex-basis: 150px;
  }

  .solution_scale_stage {
    height: 190px;
  }

  .solution_number,
  .solution_scale_product,
  .solution_scale_grade,
  .solution_scale_head_area p {
    font-size: 12px;
  }
}

/* ==========================================================================
   Shared: tags, product row cards
   ========================================================================== */

@media screen and (max-width: 1399px) {
  .tag {
    font-size: 13px;
  }

  .product_row_card_meta {
    font-size: 13px;
  }
}

@media screen and (max-width: 575px) {
  .product_row_card {
    gap: 16px;
    padding: 14px;
  }

  .product_row_card_image {
    flex-basis: 84px;
    height: 84px;
  }

  .product_row_card .arrow_box.is_small {
    flex-basis: 40px;
    width: 40px;
    height: 40px;
  }
}

@media screen and (max-width: 374px) {
  .tag,
  .product_row_card_meta {
    font-size: 12px;
  }

  .product_row_card_image {
    flex-basis: 72px;
    height: 72px;
  }
}

/* ==========================================================================
   Solutions — 02 · waterproofing
   ========================================================================== */

@media screen and (max-width: 1399px) {
  .solution_water_area {
    padding: 100px 0;
  }

  .solution_water_content_area {
    max-width: 480px;
  }

  .solution_water_products_area {
    flex-basis: 460px;
  }

  .product_row_card_image {
    flex-basis: 104px;
    height: 104px;
  }
}

@media screen and (max-width: 1199px) {
  .solution_water_content_area {
    max-width: 420px;
  }

  .solution_water_products_area {
    flex-basis: 420px;
  }
}

/* tablets and phones: the cards move under the copy, over a darker shade */
@media screen and (max-width: 991px) {
  .solution_water {
    min-height: 0;
  }

  .solution_water_shade {
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.35) 55%, rgba(0, 0, 0, 0.6) 100%);
  }

  .solution_water_area {
    flex-direction: column;
    align-items: stretch;
    gap: 50px;
    padding: 80px 0;
  }

  .solution_water_content_area {
    max-width: 560px;
  }

  /* the full column, up to 560 at the right (auto margins would size it to its widest card) */
  .solution_water_products_area {
    flex-basis: auto;
    align-self: stretch;
    width: 100%;
    max-width: 560px;
    margin-left: auto;
  }
}

@media screen and (max-width: 575px) {
  .solution_water_area {
    gap: 40px;
    padding: 60px 0;
  }

  .solution_water_products_area {
    gap: 12px;
  }
}

/* the narrowest phones: a smaller packshot so the name, line and arrow fit beside it */
@media screen and (max-width: 374px) {
  .solution_water_products_area .product_row_card {
    gap: 12px;
  }

  .solution_water_products_area .product_row_card_image {
    flex-basis: 76px;
    height: 76px;
  }
}

/* ==========================================================================
   Solutions — split head, 03 · walls
   ========================================================================== */

@media screen and (max-width: 1599px) {
  .solution_split_head_area > p {
    flex-basis: 500px;
  }

  .solution_walls_image {
    height: 340px;
  }
}

@media screen and (max-width: 1399px) {
  .solution_walls {
    padding: 100px 0;
  }

  .solution_split_head_area > p {
    flex-basis: 460px;
  }

  .solution_split_title_area {
    gap: 20px;
  }

  .solution_walls_list {
    margin-top: 64px;
  }

  .solution_walls_item {
    gap: 20px;
    padding: 0 22px;
  }

  .solution_walls_step {
    font-size: 13px;
  }

  .solution_walls_image {
    height: 290px;
  }
}

@media screen and (max-width: 1199px) {
  .solution_split_head_area > p {
    flex-basis: 400px;
  }

  .solution_walls_image {
    height: 240px;
  }
}

/* tablets: the text under the title; the steps two to a row */
@media screen and (max-width: 991px) {
  .solution_walls {
    padding: 80px 0;
  }

  .solution_split_head_area {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
  }

  .solution_split_head_area > p {
    flex-basis: auto;
    max-width: 620px;
  }

  .solution_walls_list {
    flex-wrap: wrap;
    row-gap: 48px;
    margin-top: 50px;
  }

  .solution_walls_item {
    flex: 0 0 50%;
    padding: 0 24px;
  }

  .solution_walls_item:nth-child(odd) {
    padding-left: 0;
  }

  .solution_walls_item:nth-child(even) {
    padding-right: 0;
    border-right: 0;
  }

  .solution_walls_image {
    height: auto;
    aspect-ratio: 1 / 1;
  }
}

/* phones: one step under the other, the packshot beside its name and text to keep it compact */
@media screen and (max-width: 575px) {
  .solution_walls {
    padding: 60px 0;
  }

  .solution_walls_list {
    flex-direction: column;
    row-gap: 0;
    margin-top: 36px;
    border-top: 1px solid #DDDDDD;
  }

  .solution_walls_item,
  .solution_walls_item:nth-child(odd),
  .solution_walls_item:nth-child(even) {
    display: grid;
    grid-template-columns: 110px 1fr;
    grid-template-rows: auto auto 1fr;
    column-gap: 18px;
    row-gap: 8px;
    padding: 20px 0;
    border-right: 0;
    border-bottom: 1px solid #DDDDDD;
  }

  .solution_walls_image {
    grid-column: 1;
    grid-row: 1 / span 3;
    width: 110px;
    height: 110px;
  }

  .solution_walls_step,
  .solution_walls_item h3,
  .solution_walls_item p:not(.solution_walls_step) {
    grid-column: 2;
  }

  .solution_walls_step {
    min-height: 0;
  }

  .solution_walls_next {
    display: none;
  }
}

@media screen and (max-width: 374px) {
  .solution_walls_item,
  .solution_walls_item:nth-child(odd),
  .solution_walls_item:nth-child(even) {
    grid-template-columns: 90px 1fr;
    column-gap: 14px;
  }

  .solution_walls_image {
    width: 90px;
    height: 90px;
  }

  .solution_walls_step {
    font-size: 12px;
  }
}

/* ==========================================================================
   Check list, 04 · tile jointing
   ========================================================================== */

@media screen and (max-width: 1399px) {
  .check_list li {
    gap: 16px;
    padding: 16px 0;
    font-size: 17px;
  }

  .solution_joint {
    padding: 100px 0;
  }

  .solution_joint_list {
    margin-top: 64px;
  }

  .solution_joint_item {
    gap: 24px;
    padding-left: 44px;
  }

  .solution_joint_item:first-child {
    padding-right: 44px;
  }

  .solution_joint_image {
    height: 360px;
  }

  .solution_joint_title span {
    font-size: 13px;
  }
}

@media screen and (max-width: 1199px) {
  .solution_joint_item {
    padding-left: 32px;
  }

  .solution_joint_item:first-child {
    padding-right: 32px;
  }

  .solution_joint_image {
    height: 280px;
  }
}

/* tablets and phones: the two grouts one under the other */
@media screen and (max-width: 991px) {
  .check_list li {
    font-size: 16px;
  }

  .solution_joint {
    padding: 80px 0;
  }

  .solution_joint_list {
    flex-direction: column;
    gap: 56px;
    margin-top: 50px;
  }

  .solution_joint_item,
  .solution_joint_item:first-child {
    padding: 0;
    border-right: 0;
  }

  .solution_joint_item:first-child {
    padding-bottom: 56px;
    border-bottom: 1px solid #DDDDDD;
  }

  .solution_joint_image {
    height: auto;
    aspect-ratio: 16 / 9;
  }

  .solution_joint_item .check_list {
    margin-top: 0;
  }
}

@media screen and (max-width: 575px) {
  .check_list li {
    gap: 14px;
    padding: 14px 0;
  }

  .solution_joint {
    padding: 60px 0;
  }

  .solution_joint_list {
    gap: 44px;
    margin-top: 36px;
  }

  .solution_joint_item {
    gap: 20px;
  }

  .solution_joint_item:first-child {
    padding-bottom: 44px;
  }

  .solution_joint_image {
    aspect-ratio: 4 / 3;
  }
}

@media screen and (max-width: 374px) {
  .check_list li {
    font-size: 15px;
  }

  .solution_joint_title span {
    font-size: 12px;
  }
}

/* ==========================================================================
   Solutions — project highlight
   The photo narrows a step at each width so the copy keeps 90+ of air beside it
   ========================================================================== */

@media screen and (max-width: 1799px) {
  .solution_project_area {
    max-width: 1530px;
  }
}

@media screen and (max-width: 1599px) {
  .solution_project_area {
    max-width: 1350px;
    min-height: calc(35.37vw + 130px);
    padding: 100px 15px 30px;
  }

  .solution_project_content_area {
    width: 480px;
    gap: 32px;
  }

  .solution_project_image_area {
    top: calc(50% + 35px);
    width: 56vw;
  }
}

@media screen and (max-width: 1399px) {
  .solution_project_area {
    max-width: 1170px;
    min-height: calc(32.84vw + 130px);
    padding: 100px 15px 30px;
  }

  .solution_project_content_area {
    width: 440px;
    gap: 28px;
  }

  .solution_project_image_area {
    width: 52vw;
  }

  .solution_project_stat_area {
    padding: 26px 0;
  }

  .solution_project_stat_label {
    font-size: 13px;
  }

  .solution_project_facts_area li {
    font-size: 13px;
  }
}

@media screen and (max-width: 1199px) {
  .solution_project_area {
    max-width: 960px;
    min-height: calc(31.58vw + 130px);
  }

  .solution_project_content_area {
    width: 400px;
  }

  .solution_project_image_area {
    width: 50vw;
  }
}

/* tablets and phones: the photo under the copy, lined up with it and running off the right */
@media screen and (max-width: 991px) {
  .solution_project_area {
    display: block;
    max-width: 720px;
    min-height: 0;
    padding: 80px 15px 0;
  }

  .solution_project_content_area {
    width: auto;
    max-width: 620px;
    gap: 24px;
  }

  .solution_project_image_area {
    position: relative;
    top: auto;
    right: auto;
    width: calc(50vw + 345px);
    margin: 50px 0 0 auto;
    transform: none;
  }

  .solution_project {
    padding-bottom: 30px;
  }
}

@media screen and (max-width: 767px) {
  .solution_project_area {
    max-width: 540px;
  }

  .solution_project_image_area {
    width: calc(50vw + 255px);
  }
}

@media screen and (max-width: 575px) {
  .solution_project {
    padding-bottom: 20px;
  }

  .solution_project_area {
    max-width: none;
    padding: 60px 20px 0;
  }

  .solution_project_content_area {
    gap: 22px;
  }

  .solution_project_stat_area {
    padding: 22px 0;
  }

  .solution_project_image_area {
    width: calc(100% + 20px);
    margin-top: 40px;
    aspect-ratio: 4 / 3;
  }

  .solution_project_facts_area li {
    padding: 0 12px 0 20px;
  }
}

@media screen and (max-width: 374px) {
  .solution_project_area {
    padding: 60px 16px 0;
  }

  .solution_project_image_area {
    width: calc(100% + 16px);
  }
}

/* ==========================================================================
   Forms, contact items
   ========================================================================== */

@media screen and (max-width: 1399px) {
  .form_title,
  .form_field > label,
  .form_field > legend,
  .choice_chip span {
    font-size: 13px;
  }

  .form_field input,
  .form_field select {
    height: 56px;
  }

  .choice_chip span {
    height: 56px;
    padding: 0 20px;
  }

  .form_select_chevron {
    width: 55px;
  }

  .form_note,
  .form_help {
    font-size: 13px;
  }

  .contact_item {
    gap: 20px;
    padding: 24px 0;
  }

  .contact_item_icon {
    flex-basis: 56px;
    height: 56px;
  }

  .contact_item_text a.is_address {
    font-size: 17px;
  }

  .contact_item_label {
    font-size: 13px;
  }
}

@media screen and (max-width: 991px) {
  .form_field input,
  .form_field select,
  .choice_chip span {
    height: 54px;
  }

  .form_field input,
  .form_field select,
  .form_field textarea {
    font-size: 16px;
  }

  .contact_item_text a.is_address {
    font-size: 16px;
  }
}

/* phones: one field to a row; the button takes the full width under the note */
@media screen and (max-width: 575px) {
  .form_row {
    flex-direction: column;
    gap: 24px;
  }

  .choice_chip_list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }

  .choice_chip span {
    justify-content: center;
    height: 52px;
    padding: 0 12px;
  }

  .form_field textarea {
    height: 140px;
    min-height: 140px;
  }

  .form_submit_area {
    flex-direction: column-reverse;
    align-items: stretch;
    gap: 16px;
  }

  .form_submit_area .default_button {
    max-width: none;
  }

  .enquiry_sent_area {
    padding: 28px 24px;
  }

  .enquiry_sent_area strong {
    font-size: 20px;
  }

  .contact_item {
    gap: 16px;
    padding: 20px 0;
  }

  .contact_item_icon {
    flex-basis: 48px;
    height: 48px;
  }

  .contact_item_text a.is_address {
    font-size: 15px;
  }
}

/* ==========================================================================
   Contact — enquiry, more ways, map
   ========================================================================== */

@media screen and (max-width: 1599px) {
  .contact_enquiry_area {
    gap: 80px;
  }

  .contact_details_area {
    flex-basis: 460px;
  }

  .contact_ways_item {
    padding: 20px 44px;
  }
}

@media screen and (max-width: 1399px) {
  .contact_enquiry {
    padding: 100px 0;
  }

  .contact_enquiry_area {
    gap: 60px;
  }

  .contact_details_area {
    flex-basis: 400px;
    gap: 36px;
  }

  .contact_form_area {
    padding: 48px;
  }

  .enquiry_form {
    gap: 28px;
  }

  .contact_ways_head_area p {
    flex-basis: 420px;
  }

  .contact_ways_list {
    margin-top: 80px;
  }

  .contact_ways_item {
    padding: 16px 32px;
  }

  .contact_ways_number {
    font-size: 13px;
  }

  .contact_map_card {
    width: 440px;
    padding: 40px;
  }

  .contact_map_hours {
    font-size: 13px;
  }
}

/* small laptops and iPad landscape: the details over the form, both full width (side by side,
   the long email address would have to break) */
@media screen and (max-width: 1199px) {
  .contact_enquiry_area {
    flex-direction: column;
    align-items: stretch;
    gap: 56px;
  }

  .contact_details_area {
    flex-basis: auto;
    gap: 28px;
  }

  .contact_details_area > p {
    max-width: 620px;
  }

  .contact_ways_item {
    padding: 16px 24px;
  }

  /* the map stands on its own above the card: beside it there'd be no room left for the pin
     and its name */
  .contact_map {
    min-height: 0;
    padding: 0 0 80px;
  }

  .contact_map_canvas {
    position: relative;
    height: 480px;
  }

  /* under the map, not over its foot: Google's controls and its Map data / Terms line stay
     in view */
  .contact_map .container {
    justify-content: flex-start;
  }

  .contact_map_card {
    width: auto;
    max-width: 560px;
    margin-top: 24px;
  }
}

@media screen and (max-width: 991px) {
  .contact_enquiry {
    padding: 80px 0;
  }

  .contact_details_area {
    display: flex;
    gap: 28px;
  }

  .contact_form_area {
    padding: 40px;
  }

  .contact_ways {
    padding: 80px 0;
  }

  .contact_ways_head_area {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
  }

  .contact_ways_head_area p {
    flex-basis: auto;
    max-width: 560px;
  }

  .contact_ways_list {
    flex-direction: column;
    margin-top: 50px;
  }

  /* stacked, each sizes to its content (as stretchy columns they'd collapse to nothing) */
  .contact_ways_item {
    flex: 0 0 auto;
    min-height: 0;
    gap: 28px;
    padding: 32px 0 32px 28px;
  }

  .contact_ways_item + .contact_ways_item {
    margin-top: 16px;
  }

  .contact_ways_item .default_button {
    max-width: 340px;
  }

  .contact_map_canvas {
    height: 420px;
  }
}

@media screen and (max-width: 575px) {
  .contact_enquiry {
    padding: 60px 0;
  }

  .contact_enquiry_area {
    gap: 40px;
  }

  .contact_form_area {
    margin: 0 -20px;
    padding: 32px 20px;
  }

  .enquiry_form {
    gap: 24px;
  }

  .contact_ways {
    padding: 60px 0;
  }

  .contact_ways_list {
    margin-top: 36px;
  }

  .contact_ways_item {
    gap: 24px;
    padding: 24px 0 24px 20px;
  }

  .contact_ways_item .default_button {
    max-width: none;
  }

  .contact_map {
    padding-bottom: 60px;
  }

  .contact_map_canvas {
    height: 340px;
  }

  .contact_map_card {
    margin-top: 16px;
    padding: 28px 24px;
    gap: 18px;
  }
}

@media screen and (max-width: 374px) {
  .contact_form_area {
    margin: 0 -16px;
    padding: 28px 16px;
  }

  .form_select select {
    padding-right: 60px;
    padding-left: 14px;
    font-size: 15px;
  }

  .form_select_chevron {
    width: 46px;
  }

  .form_title,
  .form_field > label,
  .form_field > legend,
  .choice_chip span {
    font-size: 12px;
  }
}

/* ==========================================================================
   Filter tabs, product tiles, Products page
   ========================================================================== */

@media screen and (max-width: 1599px) {
  .product_group {
    gap: 60px;
  }

  .product_group_head_area {
    flex-basis: 340px;
  }

  .filter_tab_list {
    gap: 44px;
  }
}

@media screen and (max-width: 1399px) {
  .filter_tab {
    font-size: 13px;
  }

  /* six tabs across the 1140 container at 1200 */
  .filter_tab_list {
    gap: 28px;
  }

  .product_intro .filter_tab_area {
    margin-top: 48px;
  }

  .product_group {
    gap: 48px;
    padding: 64px 0;
  }

  .product_group_head_area {
    flex-basis: 280px;
    gap: 16px;
  }

  .product_group_number,
  .product_group_count {
    font-size: 13px;
  }

  .product_grid {
    gap: 48px 24px;
  }

  .product_card {
    gap: 20px;
  }

  .product_card .arrow_box {
    flex-basis: 40px;
    width: 40px;
    height: 40px;
  }
}

/* small laptops and iPad landscape: the category over its products */
@media screen and (max-width: 1199px) {
  .product_group {
    flex-direction: column;
    align-items: stretch;
    gap: 36px;
  }

  .product_group_head_area {
    flex-basis: auto;
    max-width: 560px;
  }

  .product_grid {
    flex: 0 0 auto;
  }
}

/* small laptops, tablets and phones: the tabs become one row you swipe, running to the
   screen's edges (six don't fit across below 1200) */
@media screen and (max-width: 1199px) {
  .filter_tab_area {
    margin-left: -15px;
    margin-right: -15px;
    padding: 0 15px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .filter_tab_area::-webkit-scrollbar {
    display: none;
  }

  /* a soft fade at the right edge says the row carries on (app/common.js clears it at the end) */
  .filter_tab_area.is_scrollable {
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 48px), transparent);
    mask-image: linear-gradient(90deg, #000 calc(100% - 48px), transparent);
  }

  .filter_tab_area.is_scrollable.is_end {
    -webkit-mask-image: none;
    mask-image: none;
  }

  .filter_tab_list {
    gap: 32px;
    width: max-content;
  }
}

/* tablets and phones */
@media screen and (max-width: 991px) {
  .product_intro {
    padding-top: 80px;
  }

  .product_list {
    padding: 50px 0 20px;
  }

  .product_group {
    padding: 56px 0;
    scroll-margin-top: 100px;
  }

  .product_grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 40px 24px;
  }
}

@media screen and (max-width: 575px) {
  .product_intro {
    padding-top: 60px;
  }

  .product_intro .filter_tab_area {
    margin-top: 36px;
  }

  .filter_tab_area {
    margin-left: -20px;
    margin-right: -20px;
    padding: 0 20px;
  }

  .filter_tab_list {
    gap: 26px;
  }

  .filter_tab {
    height: 54px;
  }

  .product_list {
    padding: 36px 0 10px;
  }

  .product_group {
    gap: 28px;
    padding: 44px 0;
  }

  .product_grid {
    gap: 32px 14px;
  }

  .product_card {
    gap: 14px;
  }

  .product_card_text {
    gap: 8px;
  }

  .product_card_name_row {
    gap: 8px;
  }

  .product_card .arrow_box {
    flex-basis: 34px;
    width: 34px;
    height: 34px;
  }

  .product_card .arrow_box svg {
    width: 20px;
    height: 20px;
    margin: -10px 0 0 -10px;
  }
}

@media screen and (max-width: 374px) {
  .filter_tab_area {
    margin-left: -16px;
    margin-right: -16px;
    padding: 0 16px;
  }

  .filter_tab {
    font-size: 12px;
  }

  .product_grid {
    gap: 28px 12px;
  }

  /* the tile is too narrow for both: the name keeps the room */
  .product_card .arrow_box {
    display: none;
  }
}

/* ==========================================================================
   Product detail
   ========================================================================== */

@media screen and (max-width: 1599px) {
  .product_hero_area {
    grid-template-columns: 400px minmax(0, 1fr) 400px;
  }

  .product_hero_facts_area {
    width: 360px;
  }

  .product_hero_pack_area {
    height: 640px;
  }

  .product_hero_area {
    min-height: 880px;
  }

  .product_side_area {
    gap: 90px;
  }

  .product_side_head_area {
    flex-basis: 360px;
  }

  .product_features_list li {
    padding: 20px 20px 20px 24px;
  }
}

@media screen and (max-width: 1399px) {
  .product_hero_area {
    grid-template-columns: 360px minmax(0, 1fr) 360px;
    column-gap: 36px;
    min-height: 800px;
    padding: 110px 0 90px;
  }

  .product_hero_facts_area {
    width: 320px;
  }

  .product_hero_area::after {
    bottom: 89px;
  }

  .product_hero_pack_area {
    height: 560px;
  }

  .product_hero_pack_area img.is_packshot {
    width: 460px;
  }

  .product_hero_watermark {
    top: 210px;
  }

  .product_hero_intro_area {
    gap: 24px;
  }

  .product_hero_tagline,
  .product_stats_label,
  .product_stats_note,
  .product_facts_list div,
  .product_specs_list dt,
  .product_grades_table tbody th,
  .product_grades_table tbody td,
  .text_arrow_link,
  .download_row_action,
  .download_row_meta {
    font-size: 13px;
  }

  .product_stats {
    padding: 50px 0;
  }

  .product_story {
    min-height: calc(32vw + 200px);
  }

  .product_story_image_area {
    width: 47vw;
  }

  .product_story_content_area {
    width: 480px;
    gap: 30px;
  }

  .product_features {
    padding: 90px 0;
  }

  .product_features_list {
    margin-top: 90px;
  }

  .product_features_list li {
    gap: 24px;
    padding: 16px 16px 16px 20px;
  }

  .product_features_list svg {
    width: 40px;
    height: 40px;
  }

  .product_grades,
  .product_specs,
  .product_faq {
    padding: 100px 0;
  }

  .product_grades_table thead td {
    width: 180px;
  }

  .product_grades_table thead th {
    height: 290px;
    padding: 20px;
  }

  .product_grades_image {
    width: 150px;
  }

  .product_grades_table tbody td {
    padding: 0 20px;
  }

  .product_side_area {
    gap: 60px;
  }

  .product_side_head_area {
    flex-basis: 320px;
  }

  .product_specs_list div {
    grid-template-columns: 240px 1fr;
    padding: 20px 0;
  }

  .accordion_icon {
    flex-basis: 54px;
    height: 54px;
  }

  .product_related {
    padding: 90px 0;
  }
}

/* small laptops and iPad landscape: the grades table scrolls sideways, the features wrap */
@media screen and (max-width: 1199px) {
  .product_hero_area {
    grid-template-columns: 310px minmax(0, 1fr) 310px;
    column-gap: 30px;
    min-height: 720px;
  }

  .product_hero_facts_area {
    width: 290px;
  }

  .product_hero_pack_area {
    height: 460px;
  }

  .product_hero_pack_area img.is_packshot {
    width: 360px;
  }

  .product_stats_list li {
    padding: 8px 16px 8px 20px;
  }

  .product_story_content_area {
    width: 440px;
  }

  .product_story_image_area {
    width: 46vw;
  }

  .product_features_head_area p {
    flex-basis: 380px;
  }

  .product_features_list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    row-gap: 48px;
  }

  .product_grades_scroll {
    margin-right: -15px;
    overflow-x: auto;
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
  }

  .product_grades_table {
    min-width: 1060px;
  }

  .product_side_head_area {
    flex-basis: 280px;
  }

  .product_specs_list div {
    grid-template-columns: 200px 1fr;
  }
}

/* tablets: one column. The pack between the intro and the facts, standing on its own floor */
@media screen and (max-width: 991px) {
  .product_hero_area {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    min-height: 0;
    padding: 60px 0 70px;
  }

  .product_hero_area::after {
    display: none;
  }

  /* the text keeps a reading width; the buttons under it take the full width */
  .product_hero_intro_area > p {
    max-width: 560px;
  }

  .product_hero_actions_area .default_button {
    max-width: none;
  }

  .product_hero_watermark {
    top: 600px;
    font-size: 26vw;
  }

  .product_hero_pack_area {
    position: relative;
    left: auto;
    bottom: auto;
    align-self: stretch;
    width: auto;
    height: 460px;
    margin: 50px 0 0;
    padding-bottom: 0;
    border-bottom: 1px solid #DDDDDD;
    transform: none;
  }

  /* stacked: the buttons and the facts run the full width */
  .product_hero_facts_area {
    width: auto;
    margin-top: 50px;
  }

  .product_stats_list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: 32px;
  }

  .product_story {
    display: block;
    min-height: 0;
    padding: 0 0 80px;
  }

  .product_story_image_area {
    position: relative;
    top: auto;
    width: calc(50vw + 345px);
    transform: none;
  }

  .product_story .container {
    justify-content: flex-start;
  }

  .product_story_content_area {
    width: auto;
    max-width: 600px;
    margin-top: 50px;
  }

  .product_features {
    padding: 80px 0;
  }

  .product_features_head_area {
    flex-direction: column;
    gap: 20px;
  }

  .product_features_head_area p {
    flex-basis: auto;
    max-width: 520px;
  }

  .product_features_list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: 56px;
  }

  .product_grades,
  .product_specs,
  .product_faq {
    padding: 80px 0;
  }

  .product_grades_scroll {
    margin-top: 44px;
  }

  /* stacked, the paragraph's desktop width (flex-basis) would turn into a height */
  .product_grades .solution_split_head_area > p {
    flex-basis: auto;
  }

  .product_side_area {
    flex-direction: column;
    gap: 40px;
  }

  .product_side_head_area {
    flex-basis: auto;
    max-width: 560px;
  }

  .product_side_body_area {
    width: 100%;
  }

  .product_related {
    padding: 80px 0;
  }

  .product_related_list {
    display: flex;
    gap: 24px;
    margin-top: 44px;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .product_related_list::-webkit-scrollbar {
    display: none;
  }

  .product_related_list li {
    flex: 0 0 46%;
    scroll-snap-align: start;
  }
}

@media screen and (max-width: 767px) {
  .product_story_image_area {
    width: calc(50vw + 255px);
  }

  .product_related_head_area {
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
  }
}

/* phones */
/* stacked, a product without its pack picture yet (Epoxy Grout) keeps a short band, not an
   empty 460 */
@media screen and (max-width: 991px) {
  .product_hero_pack_area.is_empty {
    height: 160px;
  }

  /* and no faint name, which would sit behind "At a glance" */
  .product_hero:has(.product_hero_pack_area.is_empty) .product_hero_watermark {
    display: none;
  }
}

@media screen and (max-width: 575px) {
  .product_hero_area {
    padding: 40px 0 56px;
  }

  .product_hero_pack_area.is_empty {
    height: 120px;
  }

  .product_hero_pack_area {
    height: 340px;
    margin-top: 36px;
  }

  .product_hero_packs_area {
    gap: 12px;
  }

  .product_hero_packs_image {
    width: 64px;
    height: 76px;
    margin-bottom: 4px;
    padding: 8px;
  }

  .product_hero_pack_area img.is_packshot {
    width: 300px;
  }

  .product_hero_watermark {
    top: 480px;
  }

  .product_hero_facts_area {
    margin-top: 36px;
  }

  .product_facts_list div {
    gap: 14px;
  }

  .product_certs_list img {
    height: 24px;
  }

  .product_stats {
    padding: 36px 0;
  }

  .product_stats_list {
    row-gap: 24px;
  }

  .product_stats_list li {
    gap: 8px;
    padding: 6px 10px 6px 14px;
  }

  .product_story {
    padding-bottom: 60px;
  }

  .product_story_image_area {
    width: 100%;
  }

  .product_story_content_area {
    margin-top: 36px;
    gap: 24px;
  }

  .product_steps_list li {
    grid-template-columns: 40px 1fr;
    padding: 16px 0;
  }

  .product_features {
    padding: 60px 0;
  }

  .product_features_list {
    grid-template-columns: 1fr;
    row-gap: 0;
    margin-top: 40px;
  }

  .product_features_list li {
    display: grid;
    grid-template-columns: 40px 1fr;
    column-gap: 18px;
    row-gap: 6px;
    padding: 22px 0;
    border-left: 0;
    border-top: 1px solid rgba(155, 155, 155, 0.6);
  }

  .product_features_list svg {
    grid-row: 1 / span 2;
    width: 36px;
    height: 36px;
  }

  .product_features_list p {
    margin-top: 0;
  }

  .product_grades,
  .product_specs,
  .product_faq {
    padding: 60px 0;
  }

  .product_grades_scroll {
    margin-right: -20px;
  }

  .product_grades_table {
    min-width: 900px;
  }

  .product_grades_table thead td {
    width: 120px;
  }

  .product_grades_table thead th {
    height: 250px;
    padding: 16px;
  }

  .product_grades_image {
    width: 120px;
  }

  .product_grades_table tbody td {
    padding: 0 16px;
  }

  .product_specs_list div {
    grid-template-columns: 1fr;
    row-gap: 6px;
    padding: 16px 0;
  }

  .download_row_icon {
    flex-basis: 56px;
    min-height: 72px;
  }

  .download_row_text {
    padding: 14px 16px;
  }

  .download_row_action {
    padding: 0 16px;
  }

  .download_row_action span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
  }

  .accordion_item summary {
    gap: 18px;
    padding: 16px 0;
  }

  .accordion_icon {
    flex-basis: 46px;
    height: 46px;
  }

  .accordion_answer p {
    padding: 0 0 22px;
  }

  .product_related {
    padding: 60px 0;
  }

  .product_related_list {
    margin-top: 32px;
    gap: 16px;
  }

  .product_related_list li {
    flex-basis: 78%;
  }
}

@media screen and (max-width: 374px) {
  .product_grades_scroll {
    margin-right: -16px;
  }

  .product_hero_pack_area {
    height: 290px;
  }

  .product_hero_tagline,
  .product_stats_label,
  .product_stats_note,
  .product_facts_list div,
  .product_specs_list dt,
  .text_arrow_link {
    font-size: 12px;
  }
}

/* ==========================================================================
   Blogs and pagination
   Three cards to a row down to 992, two to 768, then one
   ========================================================================== */

@media screen and (max-width: 1399px) {
  .blog_listing {
    padding: 90px 0 120px;
  }

  .blog_listing .filter_tab_list {
    gap: 48px;
  }

  .blog_grid {
    row-gap: 60px;
  }

  .pagination_area {
    margin-top: 60px;
    padding-top: 32px;
  }

  .pagination_info {
    font-size: 13px;
  }

  .pagination_box {
    width: 56px;
    height: 56px;
    font-size: 13px;
  }
}

@media screen and (max-width: 991px) {
  .blog_listing {
    padding: 80px 0 100px;
  }

  .blog_listing .filter_tab_area {
    margin-top: 48px;
  }

  .blog_listing .filter_tab_list {
    gap: 40px;
  }

  .blog_grid {
    row-gap: 48px;
    margin-top: 48px;
  }

  /* two-up cards: the panel fits its text instead of the desktop's fixed height */
  .blog_grid .blog_card_content_area {
    min-height: 0;
    margin-top: -30%;
  }

  .blog_grid .blog_card_title {
    margin-bottom: 40px;
  }

  .pagination_box {
    width: 54px;
    height: 54px;
  }
}

@media screen and (max-width: 575px) {
  .blog_listing {
    padding: 60px 0 80px;
  }

  .blog_listing .filter_tab_area {
    margin-top: 36px;
  }

  .blog_listing .filter_tab_list {
    gap: 28px;
  }

  .blog_grid {
    row-gap: 36px;
    margin-top: 36px;
  }

  /* the count over the pager */
  .pagination_area {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    margin-top: 48px;
    padding-top: 28px;
  }

  .pagination_list {
    gap: 8px;
  }

  .pagination_box {
    width: 48px;
    height: 48px;
  }
}

/* ==========================================================================
   Page not found (404.php)
   The mascot and the 404 shrink with the screen; below 992 the message comes first and the
   mascot stands under it; the four links go two to a row, then one
   ========================================================================== */

@media screen and (max-width: 1599px) {
  .not_found_area {
    min-height: 820px;
  }

  .not_found_mascot_area {
    width: 460px;
    margin-right: 60px;
  }

  .not_found_watermark {
    font-size: 460px;
  }

  .not_found_links_title {
    font-size: 23px;
  }
}

@media screen and (max-width: 1399px) {
  .not_found_area {
    min-height: 740px;
  }

  .not_found_copy_area {
    flex-basis: 560px;
    gap: 32px;
  }

  .not_found_mascot_area {
    width: 410px;
    margin-right: 20px;
  }

  .not_found_watermark {
    font-size: 400px;
  }

  .not_found_search_area input {
    font-size: 17px;
  }

  .not_found_links {
    padding: 70px 0 90px;
  }

  .not_found_links_list a {
    padding: 30px;
  }

  .not_found_links_title {
    font-size: 22px;
  }

  .not_found_links_number,
  .not_found_links_meta {
    font-size: 13px;
  }
}

@media screen and (max-width: 1199px) {
  .not_found_area {
    min-height: 660px;
  }

  .not_found_copy_area {
    flex-basis: 500px;
  }

  .not_found_mascot_area {
    width: 360px;
    margin-right: 0;
  }

  .not_found_watermark {
    left: 72%;
    font-size: 340px;
  }

  .not_found_links_list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .not_found_links_list li:nth-child(3) {
    border-left: 0;
  }

  .not_found_links_list li:nth-child(n + 3) {
    border-top: 1px solid #DDDDDD;
  }

  .not_found_links_list li:nth-child(3) a {
    padding-left: 0;
  }

  .not_found_links_title {
    font-size: 21px;
  }
}

/* stacked: the message, then the mascot standing on the line under it */
@media screen and (max-width: 991px) {
  .not_found_area {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    min-height: 0;
  }

  .not_found_copy_area {
    flex-basis: auto;
    max-width: 620px;
    padding: 64px 0 40px;
  }

  .not_found_mascot_area {
    align-self: center;
    width: 320px;
  }

  .not_found_watermark {
    top: auto;
    bottom: 120px;
    left: 50%;
    font-size: 300px;
    transform: translateX(-50%);
  }

  .not_found_links {
    padding: 56px 0 72px;
  }

  .not_found_links_list {
    margin-top: 28px;
  }

  .not_found_links_list a {
    padding: 26px 24px;
  }

  .not_found_links_title {
    font-size: 20px;
  }
}

@media screen and (max-width: 575px) {
  .not_found_copy_area {
    gap: 24px;
    padding: 44px 0 32px;
  }

  .not_found_search_area {
    height: 56px;
  }

  .not_found_search_icon {
    flex-basis: 52px;
  }

  .not_found_search_area input {
    font-size: 16px;
  }

  .not_found_actions_area {
    flex-direction: column;
    gap: 12px;
  }

  .not_found_actions_area .default_button {
    flex: 0 0 auto;
    width: 100%;
    max-width: none;
  }

  .not_found_mascot_area {
    width: 250px;
  }

  .not_found_watermark {
    bottom: 90px;
    font-size: 200px;
  }

  .not_found_links_list {
    grid-template-columns: minmax(0, 1fr);
  }

  .not_found_links_list li + li,
  .not_found_links_list li:nth-child(3) {
    border-top: 1px solid #DDDDDD;
    border-left: 0;
  }

  .not_found_links_list li a,
  .not_found_links_list li:first-child a,
  .not_found_links_list li:nth-child(3) a {
    padding: 22px 0;
  }

  .not_found_links_title {
    font-size: 19px;
  }
}

@media screen and (max-width: 374px) {
  .not_found_links_number,
  .not_found_links_meta {
    font-size: 12px;
  }

  .not_found_links_title {
    font-size: 18px;
  }

  .not_found_mascot_area {
    width: 220px;
  }
}

/* ==========================================================================
   Live suggestions (header and Search page)
   One column below 992; on phones the panel fills the screen under the bar
   ========================================================================== */

@media screen and (max-width: 1399px) {
  .suggest_label,
  .suggest_all,
  .suggest_item_meta {
    font-size: 13px;
  }

  .suggest_item_title {
    font-size: 17px;
  }

  .suggest_groups {
    column-gap: 40px;
  }
}

@media screen and (max-width: 1199px) {
  .header_search_area input[type="search"] {
    font-size: 20px;
  }
}

/* the bar sits right of the logo; below 1200 the suggestions run the full screen width,
   under the logo too (the logo column is 200 wide here, 150 on phones) */
@media screen and (max-width: 1199px) {
  .suggest_panel.is_header {
    left: -200px;
  }
}

@media screen and (max-width: 991px) {
  .suggest_groups {
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
  }

  .suggest_group.is_products {
    grid-row: auto;
  }

  .suggest_panel.is_header .suggest_inner_area {
    padding: 24px 30px;
  }

  .suggest_item_title {
    font-size: 16px;
  }
}

@media screen and (max-width: 575px) {
  .header_search_area input[type="search"] {
    font-size: 17px;
  }

  .suggest_panel.is_header {
    left: -150px;
  }

  /* long titles wrap instead of being cut */
  .suggest_item_meta {
    white-space: normal;
  }

  .suggest_panel.is_header {
    max-height: calc(100vh - 90px);
    max-height: calc(100dvh - 90px);
  }

  .suggest_panel.is_header .suggest_inner_area,
  .suggest_inner_area {
    padding: 20px 20px 24px;
  }

  .suggest_item {
    gap: 12px;
  }

  .suggest_item_image {
    flex-basis: 48px;
    width: 48px;
    height: 48px;
  }

  .suggest_item_arrow {
    display: none;
  }

  .suggest_empty {
    font-size: 16px;
  }
}

@media screen and (max-width: 374px) {
  .suggest_label,
  .suggest_all,
  .suggest_item_meta {
    font-size: 12px;
  }

  .suggest_item_title {
    font-size: 15px;
  }
}

/* ==========================================================================
   Search (search.php)
   The left column narrows, then (below 992) sits above its results; the products go two to
   a row, and the result rows put their text under a smaller picture on phones
   ========================================================================== */

@media screen and (max-width: 1599px) {
  .search_title {
    font-size: 34px;
  }

  .search_section {
    gap: 60px;
  }

  .search_section_head_area {
    flex-basis: 240px;
  }

  .search_form_area input {
    font-size: 21px;
  }

  .search_row_title {
    font-size: 23px;
  }
}

@media screen and (max-width: 1399px) {
  .search_head {
    padding: 90px 0 50px;
  }

  .search_title {
    font-size: 32px;
  }

  .search_form_area {
    height: 64px;
  }

  .search_form_wrap {
    margin-top: 32px;
  }

  .search_form_icon,
  .search_form_clear {
    flex-basis: 64px;
  }

  .search_form_area input {
    font-size: 20px;
  }

  .search_form_button.default_button {
    flex-basis: 200px;
    width: 200px;
  }

  .search_meta_area {
    margin-top: 32px;
  }

  .search_count,
  .search_popular_label,
  .search_section_number,
  .search_section_count,
  .search_row_meta {
    font-size: 13px;
  }

  .search_section {
    gap: 48px;
    padding: 64px 0;
  }

  .search_section_head_area {
    flex-basis: 220px;
  }

  .search_product_grid {
    gap: 48px 24px;
  }

  .search_row {
    gap: 32px;
    padding: 28px 0;
  }

  .search_row_image_area {
    flex-basis: 200px;
    height: 134px;
  }

  .search_row_title {
    font-size: 22px;
  }

  .search_row_text {
    font-size: 17px;
  }
}

@media screen and (max-width: 1199px) {
  .search_title {
    font-size: 30px;
  }

  .search_form_area input {
    font-size: 19px;
  }

  .search_section_head_area {
    flex-basis: 180px;
  }

  .search_row_image_area {
    flex-basis: 180px;
    height: 120px;
  }

  .search_row_title {
    font-size: 21px;
  }
}

/* stacked: each kind's name and count above its results */
@media screen and (max-width: 991px) {
  .search_head {
    padding: 64px 0 40px;
  }

  .search_title {
    font-size: 28px;
  }

  .search_form_area input {
    font-size: 18px;
  }

  .search_section {
    flex-direction: column;
    gap: 32px;
    padding: 56px 0;
  }

  .search_section_head_area {
    flex-basis: auto;
    gap: 12px;
  }

  .search_product_grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .search_row_title {
    font-size: 20px;
  }

  .search_row_text {
    font-size: 16px;
  }

  .search_results {
    padding-bottom: 80px;
  }

  .search_empty {
    padding-bottom: 80px;
  }

  .search_empty_area h2 {
    font-size: 26px;
  }
}

@media screen and (max-width: 767px) {
  .search_product_grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* two to a row: the preview shows two, never one left alone ("Show all" has the rest) */
  .search_product_grid.is_preview li:nth-child(n + 3) {
    display: none;
  }

  .search_row {
    gap: 20px;
  }

  .search_row_image_area {
    flex-basis: 150px;
    height: 100px;
  }

  .search_row_image_area.is_icon img {
    height: 48px;
  }
}

/* phones: the box and SEARCH on one line, the button down to its arrow; rows stack */
@media screen and (max-width: 575px) {
  .search_head {
    padding: 48px 0 32px;
  }

  .search_title {
    font-size: 26px;
  }

  .search_form_area {
    height: 56px;
  }

  .search_form_wrap {
    margin-top: 24px;
  }

  .search_form_icon,
  .search_form_clear {
    flex-basis: 48px;
  }

  .search_form_area input {
    font-size: 17px;
  }

  .search_form_button.default_button {
    flex-basis: 56px;
    width: 56px;
    max-width: none;
  }

  .search_form_button .default_button_label {
    display: none;
  }

  .search_form_button .default_button_arrow {
    flex-basis: 100%;
    width: 100%;
  }

  .search_meta_area {
    gap: 10px 16px;
    margin-top: 24px;
  }

  .search_popular_list {
    gap: 10px 16px;
  }

  .search_section {
    padding: 44px 0;
  }

  .search_product_grid {
    gap: 36px 16px;
  }

  /* a small picture beside the text; the whole row is the link, so no arrow box */
  .search_row {
    align-items: flex-start;
    gap: 16px;
    padding: 20px 0;
  }

  .search_row_image_area {
    flex-basis: 104px;
    height: 72px;
  }

  .search_row_image_area.is_icon img {
    height: 36px;
  }

  .search_row_text_area {
    gap: 8px;
  }

  .search_row_arrow.arrow_box {
    display: none;
  }

  .search_row_text {
    font-size: 15px;
  }

  .search_row_title {
    font-size: 19px;
  }

  .search_section_more.default_button {
    margin-top: 32px;
  }

  .search_empty_area {
    padding-top: 40px;
  }

  .search_empty_area h2 {
    font-size: 23px;
  }

  .search_empty_actions_area .default_button {
    max-width: none;
  }
}

@media screen and (max-width: 374px) {
  .search_title {
    font-size: 24px;
  }

  .search_count,
  .search_popular_label,
  .search_section_number,
  .search_section_count,
  .search_row_meta {
    font-size: 12px;
  }

  .search_row_title {
    font-size: 17px;
  }

  .search_row_text {
    font-size: 14px;
  }

  .search_row_image_area {
    flex-basis: 84px;
    height: 60px;
  }
}

/* ==========================================================================
   Article (blog.php)
   The left column narrows step by step; below 992 it moves above the article as a folded
   "On this page" row and the share buttons, and the article takes the full width.
     title       36  34  32  30  28  28  26  24
     text H2     30  29  28  27  26  25  24  22
     text H3     24  23  22  21  20  20  19  18
     lead        22  21  20  19  18  18  17  16
     text        18  18  17  17  17  17  16  16
   ========================================================================== */

@media screen and (max-width: 1599px) {
  .blog_article_area {
    gap: 80px;
  }

  .blog_aside_area {
    flex-basis: 340px;
  }

  .blog_title {
    font-size: 34px;
  }

  .article_body h2 {
    font-size: 29px;
  }

  .article_body h3,
  .article_body blockquote p {
    font-size: 23px;
  }

  .article_body .article_lead {
    font-size: 21px;
  }
}

@media screen and (max-width: 1399px) {
  .blog_article_area {
    gap: 60px;
  }

  .blog_aside_area {
    flex-basis: 280px;
  }

  .blog_aside_label,
  .blog_toc_list a,
  .blog_meta,
  .blog_share_note,
  .article_table table,
  .article_body figcaption,
  .article_body blockquote footer,
  .article_body .article_tip .article_tip_label,
  .article_body .article_footer p,
  .article_body ul.article_tags li {
    font-size: 13px;
  }

  .blog_title {
    font-size: 32px;
  }

  .article_body h2 {
    font-size: 28px;
  }

  .article_body h3,
  .article_body blockquote p {
    font-size: 22px;
  }

  .article_body h4 {
    font-size: 19px;
  }

  .article_body p,
  .article_body li,
  .article_body h5 {
    font-size: 17px;
  }

  .article_body h6 {
    font-size: 15px;
  }

  .article_body .article_lead {
    font-size: 20px;
  }

  .blog_faq {
    padding: 90px 0;
  }

  .blog_related {
    padding-bottom: 100px;
  }

  .blog_related .blog_grid {
    margin-top: 56px;
  }
}

@media screen and (max-width: 1199px) {
  .blog_article_area {
    gap: 48px;
  }

  .blog_aside_area {
    flex-basis: 240px;
  }

  .blog_title {
    font-size: 30px;
  }

  .article_body h2 {
    font-size: 27px;
  }

  .article_body h3,
  .article_body blockquote p {
    font-size: 21px;
  }

  .article_body .article_lead {
    font-size: 19px;
  }

  .blog_share_list {
    gap: 8px;
  }

  .blog_share_link {
    width: 44px;
    height: 44px;
  }
}

/* stacked: "On this page" folds into a row above the article, the share buttons beside it */
@media screen and (max-width: 991px) {
  .blog_article {
    padding: 40px 0 80px;
  }

  .blog_article_area {
    flex-direction: column;
    align-items: stretch;
    gap: 40px;
  }

  .blog_aside_area {
    position: static;
    flex-basis: auto;
    gap: 24px;
  }

  /* reading order on a phone: the title and photo first, then "On this page" and sharing,
     then the article (the main column's parts join the stacked column for this) */
  .blog_main_area {
    display: contents;
  }

  .blog_head_area {
    order: 1;
  }

  .blog_featured_area {
    order: 2;
  }

  .blog_aside_area {
    order: 3;
  }

  .blog_main_area .article_body {
    order: 4;
  }

  /* one rhythm: the column's gap spaces the parts, so they drop their own top margins */
  .blog_article_area {
    gap: 28px;
  }

  .blog_featured_area,
  .blog_main_area .article_body {
    margin-top: 0;
  }

  .blog_main_area .article_body {
    margin-top: 8px;
  }

  .blog_toc {
    border-top: 1px solid #DDDDDD;
    border-bottom: 1px solid #DDDDDD;
  }

  .blog_toc summary {
    position: relative;
    padding: 18px 40px 18px 0;
    color: #000000;
    cursor: pointer;
  }

  /* a plus that turns into a minus when open */
  .blog_toc summary::before,
  .blog_toc summary::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 4px;
    width: 16px;
    height: 1.4px;
    background-color: currentColor;
    transition: transform 0.3s ease;
  }

  .blog_toc summary::after {
    transform: rotate(90deg);
  }

  .blog_toc[open] summary::after {
    transform: rotate(0deg);
  }

  .blog_toc_list {
    margin-top: 0;
    border-bottom: 0;
  }

  .blog_share_area {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 20px;
  }

  .blog_share_list {
    margin-top: 0;
  }

  .blog_share_note {
    flex-basis: 100%;
    min-height: 0;
    margin-top: 0;
  }

  .blog_share_note:empty {
    display: none;
  }

  .blog_title {
    font-size: 28px;
  }

  .blog_featured_area {
    margin-top: 28px;
  }

  .article_body {
    margin-top: 32px;
  }

  .article_body h2 {
    margin-top: 40px;
    font-size: 26px;
  }

  .article_body :is(ul, ol, figure, blockquote, aside) + h2 {
    margin-top: 52px;
  }

  .article_body h3,
  .article_body blockquote p {
    font-size: 20px;
  }

  .article_body h3 {
    margin-top: 40px;
  }

  .article_body h4,
  .article_body h5,
  .article_body h6 {
    margin-top: 32px;
  }

  .article_body .article_lead {
    font-size: 18px;
  }

  .blog_faq {
    padding: 80px 0;
  }

  .blog_related {
    padding-bottom: 80px;
  }

  .blog_related .blog_grid {
    margin-top: 48px;
  }
}

@media screen and (max-width: 767px) {
  .article_body h2 {
    font-size: 25px;
  }

  /* the table keeps its columns and scrolls sideways */
  .article_table table {
    min-width: 620px;
  }
}

@media screen and (max-width: 575px) {
  .blog_article {
    padding: 32px 0 64px;
  }

  .blog_article_area {
    gap: 24px;
  }

  .blog_title {
    font-size: 26px;
  }

  .blog_featured_area {
    aspect-ratio: 4 / 3;
  }

  .article_body > * + * {
    margin-top: 16px;
  }

  .article_body h2 {
    margin-top: 36px;
    font-size: 24px;
  }

  .article_body :is(ul, ol, figure, blockquote, aside) + h2 {
    margin-top: 44px;
  }

  .article_body h3,
  .article_body blockquote p {
    font-size: 19px;
  }

  .article_body h3 {
    margin-top: 32px;
  }

  .article_body h4 {
    font-size: 18px;
  }

  .article_body h4,
  .article_body h5,
  .article_body h6 {
    margin-top: 28px;
  }

  .article_body p,
  .article_body li,
  .article_body h5 {
    font-size: 16px;
  }

  .article_body .article_lead {
    font-size: 17px;
  }

  .article_body ul li::before {
    top: 10px;
  }

  .article_body ol li {
    padding-left: 42px;
  }

  .article_body ol li::before {
    top: 15px;
  }

  .article_body blockquote,
  .article_body .article_tip {
    padding-left: 18px;
  }

  .article_body figure img {
    aspect-ratio: 4 / 3;
  }

  .blog_faq {
    padding: 60px 0;
  }

  .blog_related {
    padding-bottom: 64px;
  }

  .blog_related .blog_grid {
    margin-top: 36px;
  }
}

@media screen and (max-width: 374px) {
  .blog_aside_label,
  .blog_toc_list a,
  .blog_meta,
  .article_table table,
  .article_body figcaption,
  .article_body blockquote footer,
  .article_body .article_tip .article_tip_label,
  .article_body .article_footer p,
  .article_body ul.article_tags li {
    font-size: 12px;
  }

  .blog_title {
    font-size: 24px;
  }

  .article_body h2 {
    font-size: 22px;
  }

  .article_body h3,
  .article_body blockquote p {
    font-size: 18px;
  }

  .article_body h4 {
    font-size: 17px;
  }

  .article_body h6 {
    font-size: 14px;
  }

  .article_body .article_lead {
    font-size: 16px;
  }

  .blog_share_link {
    width: 42px;
    height: 42px;
  }
}

/* ==========================================================================
   Footer
   ========================================================================== */

/* nav, labels and the copyright line follow the scale; the details have their own steps
   below so the long email address always keeps to one line */
@media screen and (max-width: 1399px) {
  .footer_nav_area a,
  .footer_label_area {
    font-size: 13px;
  }

  .footer_bottom_area p {
    font-size: 17px;
  }
}

@media screen and (max-width: 991px) {
  .footer_bottom_area p {
    font-size: 16px;
  }
}

@media screen and (max-width: 374px) {
  .footer_nav_area a,
  .footer_label_area {
    font-size: 12px;
  }

  .footer_bottom_area p {
    font-size: 13px;
  }
}

@media screen and (max-width: 1399px) {
  .footer_nav_area ul {
    column-gap: 70px;
  }

  .footer_column_area {
    padding-left: 15px;
    padding-right: 15px;
  }

  .footer_details_area {
    font-size: 18px;
  }
}

/* the longer email address stays on one line in the narrower columns */
@media screen and (min-width: 1400px) and (max-width: 1599px) {
  .footer_column_area {
    padding-left: 20px;
    padding-right: 20px;
  }

  .footer_details_area {
    font-size: 20px;
  }
}

@media screen and (min-width: 992px) and (max-width: 1199px) {
  .footer_column_area {
    padding-left: 10px;
    padding-right: 10px;
  }

  .footer_details_area {
    font-size: 15px;
  }

  .footer_map_button {
    width: 100%;
    min-width: 0;
  }
}

/* no lone "395006" line under a wrapped address */
.footer_address {
  text-wrap: pretty;
}

/* the long address never pushes past its column */
.footer_details_area a[href^="mailto:"] {
  overflow-wrap: anywhere;
}

/* stacked columns: the lines run across between them instead of down */
@media screen and (max-width: 991px) {
  .footer_nav_area {
    height: auto;
    padding: 24px 20px;
  }

  .footer_nav_area ul {
    column-gap: 30px;
  }

  .footer_column_area {
    min-height: 0;
    padding: 40px 20px;
  }

  .footer_column_area.is_middle {
    border-left: 0;
    border-right: 0;
    border-top: 1px solid #9598A1;
    border-bottom: 1px solid #9598A1;
  }

  .footer_details_area {
    margin-top: 24px;
    font-size: 18px;
  }

  .footer_map_button {
    margin-top: 30px;
  }
}

@media screen and (max-width: 575px) {
  .site_footer::before {
    top: 40px;
  }

  .footer_frame_area {
    padding-top: 41px;
  }

  .footer_nav_area ul {
    gap: 4px 28px;
  }

  .footer_map_button {
    min-width: 0;
    width: 100%;
  }

  .footer_column_area {
    padding-left: 10px;
    padding-right: 10px;
  }

  /* scales with the screen so the long email address keeps to one line */
  .footer_details_area {
    font-size: min(16px, 4.1vw);
  }

  .footer_bottom_area p {
    font-size: 14px;
  }
}

/* ==========================================================================
   Component type steps
   Titles inside cards, rows and lists, set in one place so every breakpoint
   steps with the type scale at the top of this file.
     card titles       24  23  22  21  20  20  19  18   (the h3 scale)
     section titles    28  27  26  25  24  23  22  20   (the h2 scale)
     large titles      36  34  32  30  28  28  26  24
     contact lines     22  21  20  19  18  18  17  16   (body_large)
     list text         18  18  17  17  16  16  16  15   (p)
   Product tiles sit two to a row on phones, so their name and line keep the
   smaller phone sizes (17 / 14, then 16 / 13).
   ========================================================================== */

@media screen and (max-width: 1599px) {
  .product_card_name,
  .product_grades_name,
  .download_row_title,
  .accordion_question,
  .solution_index_title,
  .product_row_card_title,
  .solution_walls_item h3,
  .about_plant_facts_area strong,
  .solution_project_facts_area strong {
    font-size: 23px;
  }

  .product_features_list h3,
  .product_stats_list strong,
  .contact_ways_item h3 {
    font-size: 27px;
  }

  .product_hero h1,
  .solution_joint_title h3 {
    font-size: 34px;
  }

  .contact_item_text,
  .contact_map_address {
    font-size: 21px;
  }
}

@media screen and (max-width: 1399px) {
  .product_card_name,
  .product_grades_name,
  .download_row_title,
  .accordion_question,
  .solution_index_title,
  .product_row_card_title,
  .solution_walls_item h3,
  .about_plant_facts_area strong,
  .solution_project_facts_area strong {
    font-size: 22px;
  }

  .product_features_list h3,
  .product_stats_list strong,
  .contact_ways_item h3 {
    font-size: 26px;
  }

  .product_hero h1,
  .solution_joint_title h3 {
    font-size: 32px;
  }

  .contact_item_text,
  .contact_map_address {
    font-size: 20px;
  }

  .product_card_meta,
  .product_steps_list li,
  .product_specs_list dd {
    font-size: 17px;
  }
}

@media screen and (max-width: 1199px) {
  .product_card_name,
  .product_grades_name,
  .download_row_title,
  .accordion_question,
  .solution_index_title,
  .product_row_card_title,
  .solution_walls_item h3,
  .about_plant_facts_area strong,
  .solution_project_facts_area strong {
    font-size: 21px;
  }

  .product_features_list h3,
  .product_stats_list strong,
  .contact_ways_item h3 {
    font-size: 25px;
  }

  .product_hero h1,
  .solution_joint_title h3 {
    font-size: 30px;
  }

  .contact_item_text,
  .contact_map_address {
    font-size: 19px;
  }
}

@media screen and (max-width: 991px) {
  .product_card_name,
  .product_grades_name,
  .download_row_title,
  .accordion_question,
  .solution_index_title,
  .product_row_card_title,
  .solution_walls_item h3,
  .about_plant_facts_area strong,
  .solution_project_facts_area strong {
    font-size: 20px;
  }

  .product_features_list h3,
  .product_stats_list strong,
  .contact_ways_item h3 {
    font-size: 24px;
  }

  .product_hero h1,
  .solution_joint_title h3 {
    font-size: 28px;
  }

  .contact_item_text,
  .contact_map_address {
    font-size: 18px;
  }

  .product_card_meta,
  .product_steps_list li,
  .product_specs_list dd {
    font-size: 16px;
  }
}

@media screen and (max-width: 767px) {
  .product_features_list h3,
  .product_stats_list strong,
  .contact_ways_item h3 {
    font-size: 23px;
  }
}

@media screen and (max-width: 575px) {
  .product_grades_name,
  .download_row_title,
  .accordion_question,
  .solution_index_title,
  .product_row_card_title,
  .solution_walls_item h3,
  .about_plant_facts_area strong,
  .solution_project_facts_area strong {
    font-size: 19px;
  }

  .product_features_list h3,
  .product_stats_list strong,
  .contact_ways_item h3 {
    font-size: 22px;
  }

  .product_hero h1,
  .solution_joint_title h3 {
    font-size: 26px;
  }

  /* the long email address breaks after the @ on phones */
  .contact_item_text,
  .contact_map_address {
    font-size: 17px;
  }

  /* and its domain stays whole: the line scales with the screen */
  .contact_item_text a[href^="mailto:"] {
    font-size: min(17px, 4.15vw);
  }

  .product_card_name {
    font-size: 17px;
  }

  .product_card_meta {
    font-size: 14px;
  }
}

@media screen and (max-width: 374px) {
  .product_grades_name,
  .download_row_title,
  .accordion_question,
  .solution_index_title,
  .product_row_card_title,
  .solution_walls_item h3,
  .about_plant_facts_area strong,
  .solution_project_facts_area strong {
    font-size: 18px;
  }

  .product_features_list h3,
  .product_stats_list strong,
  .contact_ways_item h3 {
    font-size: 20px;
  }

  .product_hero h1,
  .solution_joint_title h3 {
    font-size: 24px;
  }

  .contact_item_text,
  .contact_map_address {
    font-size: 16px;
  }

  .product_card_name {
    font-size: 16px;
  }

  .product_card_meta {
    font-size: 13px;
  }

  .product_steps_list li,
  .product_specs_list dd {
    font-size: 15px;
  }
}

/* sideways rows on touch screens: the phone's own snapping, one card per flick */
@media (hover: none) and (pointer: coarse) {
  .home_blog_list,
  .about_lab_steps_area,
  .solution_scale_list,
  .product_related_list {
    scroll-snap-type: x mandatory;
  }
}

/* phones: the open search runs the full width of the header, over the logo (which fades
   out while it is open), so the words have room. The logo column is 200 wide here, 150 on
   the smallest screens */
@media screen and (max-width: 767px) {
  .header_search_area {
    left: -200px;
    gap: 14px;
    padding: 0 20px;
  }

  .header_logo_area {
    transition: opacity 0.3s ease, visibility 0s linear 0s;
  }

  .site_header.is_search_open .header_logo_area {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0s linear 0.3s;
  }
}

@media screen and (max-width: 575px) {
  .header_search_area {
    left: -150px;
  }
}

/* enquiry pop-up: tighter on tablets; the whole screen on phones */
@media screen and (max-width: 767px) {
  .enquiry_popup_head_area {
    padding: 32px 30px 24px;
  }

  .enquiry_popup_body_area {
    padding: 28px 30px 40px;
  }
}

@media screen and (max-width: 575px) {
  .enquiry_popup_panel {
    width: 100%;
  }

  .enquiry_popup_head_area {
    padding: 24px 20px 20px;
  }

  .enquiry_popup_heading_area h2 {
    font-size: 24px;
  }

  .enquiry_popup_intro {
    font-size: 15px;
  }

  .enquiry_popup_body_area {
    padding: 24px 20px 32px;
  }
}