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

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

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

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

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

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

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

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

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

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

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

     .main_content_h1_image {
         width: 450px;
     }

     .custom_padding {
         padding: 0 80px;
     }

     .site_menu_panel {
         padding: 50px;
     }

     .site_menu_contact {
         font-size: 13px;
     }

     .site_menu_contact {
         margin-top: 40px;
     }

     .site_menu_secondary {
         margin-top: 30px;
     }

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

     .site_menu_primary a {
         font-size: 34px;
     }

     .site_menu_label {
         font-size: 13px;
     }

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

     .technology_logo_area img {
         height: 30px;
     }

     .default_label {
         font-size: 12px;
     }

     h2 {
         font-size: 40px;
     }

     h3 {
         font-size: 34px;
     }

     p {
         font-size: 14px;
     }
 }

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

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

 /* ==========================================================================
   LAPTOP — 1399px and below
   ========================================================================== */

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

     /* ==========================================================================
       Download page — catalogue grid columns
       ========================================================================== */

     /* the container narrows sharply here, so the gap comes down with it */


     .catalog_grid_area {
         column-gap: 70px;
     }

     /* ==========================================================================
       About page — scale figures
       ========================================================================== */


     .stats_item_area {
         padding-left: 32px;
     }

     .stats_item_area p {
         font-size: 96px;
     }

     /* ==========================================================================
       About page — technology
       ========================================================================== */


     .technology_content_area {
         padding: 64px 56px;
     }

     .technology_header_area h2 {
         max-width: 400px;
     }

     .technology_logo_area>div {
         min-height: 100px;
     }
 }

 @media screen and (min-width: 992px) and (max-width: 1199px) {

     .about_header_area h2 {
         margin-top: 200px;
         font-size: 44px;
     }

     .about_header_area span {
         margin-top: 50px;
         font-size: 14px;
     }

     .about_content_area p {
         margin-top: 70px;
         font-size: 16px;
     }

     .about_content_area a {
         margin-top: 50px;
     }

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

     body.menu-open .site_bottom_nav {
         /* matches the inherited 60px bar height, so the collapse lands square */
         max-width: 60px;
     }

     .site_menu_panel {
         bottom: 135px;
         max-width: 510px;
         padding: 58px 62px 54px;
     }

     .main_content_h1_image {
         width: 440px;
         bottom: 190px;
     }

     .site_menu_label {
         font-size: 16px;
         margin-bottom: 32px;
     }

     .site_menu_primary a {
         font-size: 44px;
     }

     .site_menu_secondary {
         margin-top: 36px;
     }

     .site_menu_secondary a {
         font-size: 19px;
     }

     .site_menu_contact {
         margin-top: 48px;
         font-size: 16px;
     }
 }

 /* ==========================================================================
   TABLET LANDSCAPE — 1199px and below
   ========================================================================== */

 @media screen and (max-width: 1199px) {

     .catalog_grid_area {
         column-gap: 52px;
     }

     /* ==========================================================================
       Blog page — article list
       ========================================================================== */


     .blog_item_area {
         -webkit-column-gap: 36px;
         -moz-column-gap: 36px;
         column-gap: 36px;
     }

     .blog_title_area {
         font-size: 22px;
     }

     /* ==========================================================================
       Blog detail page
       ========================================================================== */


     .article_content_area h2 {
         font-size: 30px;
     }

     .article_related_grid_area {
         -webkit-column-gap: 40px;
         -moz-column-gap: 40px;
         column-gap: 40px;
     }

     /* ==========================================================================
       Contact page
       ========================================================================== */


     .contact_header_area h2 {
         max-width: 520px;
     }

     .contact_field_grid_area {
         -webkit-column-gap: 34px;
         -moz-column-gap: 34px;
         column-gap: 34px;
     }

     .stats_item_area {
         min-height: 380px;
     }

     .stats_item_area > span {
         font-size: 15px;
     }

     .stats_item_area p {
         font-size: 76px;
     }

     .stats_item_area em {
         font-size: 32px;
     }

     /* ---- global type scale ----
       style.css sets the large-display sizes on the bare tags; nothing stepped
       them down before this, so every heading on the site was 48px on a phone */
     h2 {
         font-size: 40px;
     }

     h3 {
         font-size: 30px;
     }

     h4 {
         font-size: 24px;
     }

     /* 120px each side was built for a 1480px container */
     .custom_padding {
         padding: 0 60px;
     }

     /* ---- home ---- */
     .nature_progress_area {
         left: 40px;
         bottom: 40px;
     }

     .sizes_image_area {
         left: 260px;
     }

     .cta_box_area {
         min-height: 440px;
         padding: 0 80px;
     }

     /* ---- about ---- */
     .journey_slider_col {
         --journey-gap: 90px;
     }
 }

 /* ==========================================================================
   TABLET — 991px and below
   ========================================================================== */

 @media screen and (max-width: 991px) {

     .site_menu_panel {
         bottom: 120px;
         max-width: 470px;
         padding: 44px 50px 44px;
     }

     .technology_logo_area img {
         height: 28px;
     }

     .site_menu_label {
         font-size: 15px;
         margin-bottom: 26px;
     }

     .site_menu_primary a {
         font-size: 38px;
     }

     .journey_section {
         padding-top: 0;
     }

     .site_menu_secondary {
         margin-top: 28px;
     }

     .site_menu_secondary a {
         font-size: 17px;
     }

     .site_menu_contact {
         margin-top: 38px;
         padding: 14px;
         font-size: 14px;
     }

     .about_intro_header_area {
         padding-top: 0;
     }

     .about_intro_content_area {
         margin-top: 40px;
     }

     .about_media_section.section-padding {
         padding-top: 0;
     }

     /* Below lg the grid stacks, so the image spans the full viewport and the
       desktop offsets that positioned the headline column collapse. */


     .about_section {
         padding-bottom: 80px;
     }

     .about_intro_header_area h2 {
         margin-top: 24px;
     }

     .about_image_col {
         width: 100%;
         padding-right: 15px;
         padding-left: 15px;
     }

     .about_image_area img {
         height: auto;
     }

     .about_header_area span {
         margin-top: 56px;
     }

     .about_header_area h2 {
         margin-top: 24px;
     }

     .about_content_area img {
         margin-top: 48px;
     }

     .about_content_area p {
         margin-top: 32px;
     }

     .about_content_area a {
         margin-top: 40px;
     }

     /* ==========================================================================
       Export page — world map
       ========================================================================== */


     /* the columns stack, so the copy sits above a full-width map */
     .export_map_header_area {
         margin-bottom: 40px;
     }

     .export_marker_area em {
         font-size: 10px;
     }

     /* ==========================================================================
       Export page — country list
       ========================================================================== */


     /* two columns, so each needs clearance from the pair beneath it */
     .export_list_group_area {
         margin-bottom: 60px;
     }

     .export_list_area {
         margin-top: 50px;
     }

     /* ==========================================================================
       Export page — enquiry form
       ========================================================================== */


     /* the offset drops away with the grid, so the form runs full width */
     .export_form_area {
         margin-top: 60px;
     }

     .export_field_area {
         margin-bottom: 38px;
     }

     /* ==========================================================================
       Download page — catalogue library
       ========================================================================== */


     .catalog_filter_area,
     .blog_filter_area {
         margin: 36px 0 50px;
     }

     /* the offset drops with the grid, so the search sits under the filter */
     .catalog_search_area {
         margin-top: 30px;
     }

     .catalog_grid_area {
         row-gap: 60px;
     }

     .catalog_grid_area {
         grid-template-columns: repeat(2, 1fr);
         column-gap: 50px;
     }

     /* the filter columns stack, so the search needs clearance from the select */
     .blog_search_area {
         margin-top: 30px;
     }

     .blog_filter_area {
         margin-bottom: 28px;
     }

     .blog_result_area {
         margin-bottom: 26px;
     }

     .blog_more_area {
         margin-top: 18px;
     }

     .blog_item_area {
         grid-template-columns: 36% 1fr;
         -webkit-column-gap: 28px;
         -moz-column-gap: 28px;
         column-gap: 28px;
         padding: 36px 0;
     }

     .blog_title_area {
         margin-top: 16px;
         font-size: 20px;
     }

     /* Below lg the columns stack, so the contents becomes a panel above the
       article rather than a sidebar beside it — sticky would pin it over the text
       it is meant to introduce. */


     .article_toc_area {
         position: static;
         margin-bottom: 50px;
         padding: 24px 26px;
         border: 1px solid #DDDDDD;
     }

     .article_toc_area summary {
         display: block;
         font-family: 'Aeonik Mono', monospace;
         font-size: 13px;
         letter-spacing: 0.16em;
         text-transform: uppercase;
         color: #2C2927;
         cursor: pointer;
     }

     .article_toc_area[open] summary {
         margin-bottom: 18px;
     }

     /* the panel is the only thing on screen while open, so the running rule
       down the side no longer means anything */
     .article_toc_area a {
         padding-left: 0;
         border-left: 0;
     }

     .article_toc_area a.is-active {
         color: #2C2927;
     }

     .article_crumb_area {
         margin-bottom: 34px;
     }

     .article_crumb_area em {
         max-width: 22ch;
     }

     .article_header_area h1 {
         max-width: none;
     }

     .article_header_area p {
         font-size: 18px;
     }

     .article_share_area {
         margin-top: 40px;
     }

     .article_content_area {
         max-width: none;
         font-size: 17px;
     }

     .article_content_area h2 {
         margin: 56px 0 20px;
         font-size: 27px;
     }

     .article_content_area h3 {
         margin: 40px 0 14px;
         font-size: 21px;
     }

     .article_content_area blockquote {
         margin: 38px 0;
         font-size: 21px;
     }

     .article_content_area figure {
         margin: 40px 0;
     }

     .article_foot_area {
         max-width: none;
         margin-top: 50px;
     }

     .article_related_grid_area {
         grid-template-columns: repeat(2, 1fr);
         -webkit-column-gap: 34px;
         -moz-column-gap: 34px;
         column-gap: 34px;
         margin-top: 44px;
     }

     .contact_header_area h2 {
         max-width: none;
     }

     /* the columns stack, so the form needs clearance from the details above it */
     .contact_body_area {
         margin-top: 60px;
     }

     .contact_form_area {
         margin-top: 70px;
     }

     .contact_list_area {
         margin-top: 44px;
     }

     /* ==========================================================================
       Contact page — map
       ========================================================================== */


     /* the block runs the full viewport width once the grid stacks */
     .contact_map_col {
         --col: 100%;
     }

     .contact_map_area {
         aspect-ratio: 3 / 2;
     }

     /* two across from here down — four stacked blocks this tall would run for
       several screens */


     .stats_list_area {
         margin-top: 60px;
         row-gap: 60px;
     }

     .stats_item_area {
         min-height: 260px;
         padding-left: 26px;
     }

     .stats_item_area p {
         font-size: 62px;
     }

     /* the split stops working once the panel is too narrow for two logos abreast */


     .technology_section {
         grid-template-columns: 1fr;
     }

     /* the image keeps a definite ratio now that the panel no longer sets the
       row height for it */
     .technology_image_area {
         aspect-ratio: 16 / 10;
     }

     .technology_content_area {
         padding: 70px 40px;
     }

     .technology_header_area h2 {
         max-width: none;
     }

     /* ---- global type and rhythm ---- */
     h2 {
         font-size: 34px;
     }

     h3 {
         font-size: 27px;
     }

     h4 {
         font-size: 22px;
     }

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

     .custom_padding {
         padding: 0 15px;
     }

     .sizes_title_area h4 {
         color: #2C2927;
     }

     /* a full-height hero costs a whole screen before any content appears */
     .main_top_header_image_area {
         height: 80vh;
         height: 80svh;
     }

     /* ---- home: philosophy ---- */
     /* --col is independent of the col-lg-* class, so once the grid stacks it
       still measured 83.333% and the image stopped short of the edge */
     .philosophy_image_col {
         --col: 100%;
         margin-top: 40px;
     }

     .design_section_header_area h2 {
         margin-top: 20px;
     }

     .design_section_footer_area p {
         max-width: none;
         margin-top: 34px;
     }

     .design_section_footer_area a {
         margin-top: 30px;
     }

     /* ---- home: nature ---- */
     /* 150vh a slide is a long way to scroll on a phone for one change of image */
     .nature_scroll_area {
         height: calc(var(--slides, 2) * 120vh);
     }

     .nature_content_area>div {
         padding-top: 60px;
     }

     .nature_content_area p {
         margin-top: 24px;
     }

     .nature_progress_area {
         left: 24px;
         bottom: 30px;
         gap: 12px;
     }

     .nature_progress_track {
         width: 80px;
     }

     /* ---- home: sizes ---- */
     .sizes_header_area {
         margin-top: 20px;
     }

     .sizes_header_area a {
         margin-top: 30px;
     }

     .sizes_list_area {
         margin-top: 60px;
     }

     .sizes_list_row {
         padding: 28px 0;
     }

     .sizes_title_area {
         margin-bottom: 16px;
     }

     /* both previews are driven by the pointer, which a touch screen does not
       have — they would only ever flash on tap */
     .sizes_image_area,
     .sizes_image_cursor {
         display: none;
     }

     /* ---- home: spaces ---- */
     .spaces_section {
         --spaces-gap: 0px;
     }

     .spaces_left_area {
         padding-right: 0;
     }

     .spaces_right_area {
         padding-left: 0;
         margin-top: 50px;
     }

     .spaces_content_area {
         margin-bottom: 40px;
     }

     .spaces_right_area p {
         max-width: none;
         margin-top: 30px;
     }


     /* ---- about: journey ---- */
     /* The column runs the full viewport width once the grid stacks, so the
       slides sat hard against both screen edges. --journey-gap is what the base
       rule feeds into padding-left, and padding-right is zero there for the
       desktop bleed, so both sides are set here. */
     .journey_slider_col {
         --col: 100%;
         --journey-gap: 15px;
         padding-right: 15px;
         margin-top: 40px;
     }

     .journey_header_area p {
         margin-top: 24px;
     }

     .journey_nav_area {
         gap: 18px;
         margin-top: 40px;
     }

     .journey_nav_button {
         width: 52px;
         height: 52px;
     }

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

     /* ---- about: certificates ---- */
     .certificate_slider_area {
         margin-top: 50px;
     }

     .certificate_image_area {
         padding: 12px;
     }

     /* ---- footer ---- */
     /* the height stays viewport-bound on purpose: footer-menu.js opens the menu
       at 99% visibility, which a footer taller than the screen never reaches */

     /* Moved to the top of the footer. At the bottom there is nothing left to
       occupy: the menu panel opens automatically down here and its lower edge
       lands about where the fixed nav bar begins, so the copyright was pinned
       between the two and the socials ran underneath the bar. The top of the
       footer is clear at every small size — neither the panel nor the bar
       reaches it — and neither has to move to make room. */
     .site_footer_bottom_area {
         top: 40px;
         bottom: auto;
     }

     /* the two columns stack here, so centring reads as deliberate where the
       desktop split (copyright left, socials right) no longer applies */
     .site_footer_bottom_area p {
         text-align: center;
     }

     /* four names on one line overflow a phone rather than wrapping, because a
       flex row does not wrap unless told to */
     .site_footer_social_area {
         flex-wrap: wrap;
         justify-content: center;
         gap: 10px 24px;
         margin-top: 14px;
     }

     /* same --col trap as the philosophy image: once the grid stacks this was
       still measuring 83.333% and stopping short of the edge */
     .about_media_image_col {
         --col: 100%;
     }

     /* four full screens of scrolling for four regions is a lot on a phone */
     .export_map_scroll_area {
         height: calc(var(--groups, 4) * 75vh);
     }

     /* Above the map it collided with the 01 - 04 step readout, so it stays in
        the corner of the map itself — which at world view is open ocean — just
        inset off the edge and a little smaller. */
     .export_map_controls_area {
         right: 6px;
         bottom: 6px;
     }

     .export_map_controls_area button {
         width: 34px;
         height: 34px;
     }


     /* ---- home: cta ----
       Shown on phones and tablets again. It was dropped below tablet on the
       grounds that the site menu carries both of its routes, but the menu has
       to be opened first — this is the only place the two are put in front of
       someone who has just read the page. Sizing for the small screens is at
       the foot of this file. */

     /* ---- export map: use the empty band under the map ----
       The group is absolutely positioned over the canvas, so top:100% puts this
       directly beneath the map; nothing between here and the sticky container
       clips, so it is free to sit in the gap. Opacity is inherited from the
       group, which means it crossfades with the markers for free. */
     .export_map_names_area {
         display: block;
         position: absolute;
         top: 100%;
         left: 0;
         width: 100%;
         margin: 26px 0 0;
         font-family: 'Geist', sans-serif;
         font-size: 14px;
         font-weight: 300;
         line-height: 1.8;
         text-align: center;
         color: #6D6D6D;
     }

     /* The names list is absolutely positioned, so justify-content: center
       balances the header and map alone and the list hangs into the lower gap —
       which is why the top read as the larger of the two. Reserving its height
       as padding pulls the centred block up by half of it and the two ends even
       out. Also tightens the header's own spacing. */
     .export_map_sticky_area {
         padding-bottom: 120px;
     }

     .export_map_step_area {
         margin-top: 26px;
     }

     .export_map_header_area h2 {
         margin-top: 14px;
     }
 
    .journey_modal_panel_area {
        padding: 44px 34px 40px;
    }

    .journey_modal_panel_area p {
        font-size: 16px;
    }
}

 @media screen and (min-width: 768px) and (max-width: 991px) {

     /* ==========================================================================
       Site header + bottom nav (desktop-first: style.css holds the large-display
       reference look, these breakpoints scale it down for smaller devices)
       ========================================================================== */

     .about_header_area h2 {
         font-size: 46px;
     }

     .site_header {
         padding: 18px 15px;
     }

     .site_header_logo img {
         height: 64px;
     }

     .site_bottom_nav {
         bottom: 30px;
         max-width: 300px;
         height: 50px;
         gap: 16px;
         padding: 0 13px;
     }

     .site_bottom_nav_brand img {
         width: 30px;
     }

     .site_bottom_nav_title {
         font-size: 14px;
     }

     .site_bottom_nav_toggle span {
         width: 20px;
     }

     body.menu-open .site_bottom_nav {
         max-width: 50px;
     }

     .site_menu_panel {
         bottom: 115px;
         max-width: 460px;
         padding: 52px 56px 50px;
     }

     .main_content_h1_image {
         width: 380px;
         bottom: 150px;
     }

     .site_menu_label {
         font-size: 15px;
         margin-bottom: 30px;
     }

     .site_menu_primary a {
         font-size: 40px;
     }

     .site_menu_secondary {
         margin-top: 32px;
     }

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

     .site_menu_contact {
         margin-top: 44px;
         font-size: 15px;
     }
 }

 @media screen and (min-width: 441px) and (max-width: 767px) {

     .about_header_area h2 {
         font-size: 38px;
     }

     .site_header {
         padding: 16px 12px;
     }

     .site_header_logo img {
         height: 52px;
     }

     .site_bottom_nav {
         bottom: 20px;
         max-width: 270px;
         height: 44px;
         gap: 14px;
         padding: 0 12px;
     }

     .site_bottom_nav_brand img {
         width: 30px;
     }

     .site_bottom_nav_title {
         font-size: 12px;
     }

     .site_bottom_nav_toggle span {
         width: 18px;
     }

     body.menu-open .site_bottom_nav {
         max-width: 44px;
     }

     .site_menu_panel {
         bottom: 92px;
         max-width: 380px;
         padding: 42px 44px 40px;
     }

     .main_content_h1_image {
         width: 300px;
         bottom: 120px;
     }

     .site_menu_label {
         font-size: 13px;
         margin-bottom: 24px;
     }

     .site_menu_primary a {
         font-size: 32px;
     }

     .site_menu_secondary {
         margin-top: 26px;
     }

     .site_menu_secondary a {
         font-size: 16px;
     }

     .site_menu_contact {
         margin-top: 36px;
         font-size: 13px;
     }
 }

 /* ==========================================================================
   MOBILE — 575px and below
   ========================================================================== */

 @media screen and (max-width: 575px) {

     .export_marker_area i {
         width: 7px;
         height: 7px;
     }

     .export_marker_area em {
         font-size: 9px;
     }

     .export_list_group_area li {
         gap: 16px;
         margin-bottom: 22px;
     }

     .export_list_group_area li span {
         font-size: 12px;
         letter-spacing: 0.1em;
     }

     .export_check_area {
         gap: 16px;
     }

     .export_check_area label {
         font-size: 14px;
     }

     .export_form_area .default_button {
         width: 100%;
         justify-content: center;
     }

     .catalog_item_area .default_label {
         margin-top: 20px;
         font-size: 13px;
     }

     .catalog_title_area {
         font-size: 16px;
     }

     /* Two covers to a row on phones as well. The gutters come right down with
        the track width — the 50px column gap inherited from the tablet tier
        would eat a third of the row at 360px. */
     .catalog_grid_area {
         grid-template-columns: repeat(2, 1fr);
         column-gap: 28px;
         row-gap: 52px;
     }

     /* a 36% cover is too small to read at this width, so the row stacks */


     .blog_item_area {
         grid-template-columns: 1fr;
         row-gap: 20px;
         padding: 30px 0;
     }

     .blog_title_area {
         margin-top: 12px;
         font-size: 18px;
     }

     /* the count and the reset stop fitting on one line together */


     .blog_result_area {
         flex-direction: column;
         align-items: flex-start;
         gap: 12px;
     }

     .article_content_area {
         font-size: 16px;
         line-height: 1.8;
     }

     .blog_lead_area {
         font-size: 18px;
     }

     .article_content_area h2 {
         margin: 44px 0 18px;
         font-size: 23px;
     }

     .article_content_area h3 {
         font-size: 19px;
     }

     .article_content_area blockquote {
         padding-left: 22px;
         font-size: 19px;
     }

     .article_content_area ul,
     .article_content_area ol {
         padding-left: 20px;
     }

     .article_share_area {
         gap: 16px;
     }

     .article_share_area a,
     .article_share_area button {
         padding: 8px 13px;
         font-size: 11px;
     }

     .article_related_grid_area {
         grid-template-columns: 1fr;
         row-gap: 38px;
     }

     /* the trail would otherwise wrap to three lines on a phone */
     .article_crumb_area em {
         max-width: 100%;
     }

     .article_missing_area {
         padding-top: 40px;
     }

     /* two fields side by side are too narrow to type in at this width */
     .contact_field_grid_area {
         grid-template-columns: 1fr;
         row-gap: 40px;
     }

     .contact_list_area li {
         gap: 20px;
         margin-bottom: 26px;
     }

     .contact_list_area li>img {
         width: 56px;
         height: 56px;
     }

     .contact_intro_area h4,
     .contact_intro_area p {
         font-size: 16px;
     }

     .contact_form_area .default_button {
         width: 100%;
         justify-content: center;
     }

     /* a 15:7 strip is too shallow to read street names on a phone */
     .contact_map_area {
         aspect-ratio: 4 / 3;
     }

     .stats_list_area {
         row-gap: 70px;
     }

     .stats_item_area {
         min-height: 180px;
         padding-left: 18px;
     }

     .stats_item_area > span {
         font-size: 14px;
     }

     /* 17.3M is the widest figure and has to survive a 160px column */
     .stats_item_area p {
         gap: 8px;
         font-size: 48px;
     }

     .stats_item_area em {
         font-size: 18px;
     }

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

     .technology_content_area {
         padding: 50px 20px;
     }

     .technology_header_area p {
         margin-top: 28px;
         font-size: 16px;
     }

     .technology_logo_area>div {
         min-height: 84px;
         padding-right: 12px;
     }

     .technology_logo_area>div:nth-child(even) {
         padding-left: 12px;
     }

     /* ---- global type and rhythm ---- */
     h2 {
         font-size: 28px;
     }

     h3 {
         font-size: 24px;
     }

     h4 {
         font-size: 22px;
     }

     p {
         font-size: 15px;
     }

     .default_label {
         font-size: 12px;
         letter-spacing: 0.12em;
     }

     .default_button {
         gap: 18px;
         padding: 12px 16px;
         font-size: 12px;
         letter-spacing: 0.14em;
     }

     .section-padding {
         padding: 60px 0;
     }



     .main_top_header_image_area {
         height: 70vh;
         height: 70svh;
     }

     /* the container query resolves against a full-width container here, which
       put this back up at ~40px */
     .about_intro_header_area h2 {
         font-size: 28px;
     }

     /* ---- home ---- */
     .nature_content_area>div {
         padding-top: 40px;
     }

     .nature_progress_area {
         left: 20px;
         bottom: 22px;
     }

     .nature_progress_track {
         width: 60px;
     }

     .sizes_list_row {
         padding: 22px 0;
     }

     .sizes_surface_area {
         gap: 8px;
     }

     .sizes_surface_area a {
         padding: 7px 14px;
         font-size: 11px;
     }

     .spaces_right_area {
         margin-top: 36px;
     }


     /* ---- about ---- */
     .journey_nav_button {
         width: 46px;
         height: 46px;
     }

     .journey_nav_area {
         gap: 14px;
     }

     .certificate_slider_area {
         margin-top: 36px;
     }

     /* ---- footer ---- */
     .site_footer_bottom_area {
         top: 28px;
     }

     .site_footer_social_area {
         gap: 8px 18px;
     }

     .site_footer_social_area a {
         font-size: 14px;
     }

     .article_related_title_area {
         font-size: 17px;
     }


     /* Exact 15px each side. The base rule sizes this column as
       calc(--col + --bleed) with a negative margin-right to match, and --bleed
       is calc(50vw - 50%) — 50vw counts the scrollbar where 50% does not, so
       the two stop cancelling and the surplus lands on the right. The width and
       margin are stated plainly here instead, which cannot drift. */
     .journey_slider_col {
         width: 100%;
         margin-right: 0;
         padding-left: 15px;
         padding-right: 15px;
     }

     .export_map_names_area {
         margin-top: 20px;
         font-size: 12.5px;
         line-height: 1.75;
     }

     .export_map_sticky_area {
         padding-bottom: 100px;
     }

     .export_map_step_area {
         margin-top: 22px;
     }
 
    .journey_modal_area {
        padding: 16px;
    }

    .journey_modal_panel_area {
        padding: 40px 24px 32px;
    }

    .journey_modal_close_area {
        top: 16px;
        right: 16px;
        width: 34px;
        height: 34px;
    }

    .journey_modal_panel_area h3 {
        margin-top: 14px;
        padding-right: 30px;
    }

    .journey_modal_panel_area p {
        margin-top: 20px;
        font-size: 15px;
    }
}

 /* ==========================================================================
   SMALL MOBILE — 440px and below
   ========================================================================== */

 @media screen and (max-width: 440px) {



     .about_content_area p {
         font-size: 15px;
     }

     .site_header {
         padding: 14px 10px;
     }

     .site_header_logo img {
         height: 60px;
     }

     .site_bottom_nav {
         bottom: 16px;
         max-width: 260px;
         height: 50px;
         gap: 10px;
         padding: 0 12px;
     }

     .site_bottom_nav_brand img {
         width: 28px;
     }

     .site_bottom_nav_title {
         font-size: 13px;
         letter-spacing: 0.1em;
     }

     .site_bottom_nav_toggle span {
         width: 16px;
     }

     body.menu-open .site_bottom_nav {
         max-width: 50px;
     }

     .site_menu_panel {
         bottom: 80px;
         max-width: 330px;
         padding: 34px 32px 32px;
     }

     .main_content_h1_image {
         width: 280px;
         bottom: 100px;
     }

     .site_menu_label {
         font-size: 12px;
         margin-bottom: 20px;
     }

     .site_menu_primary a {
         font-size: 28px;
     }

     .site_menu_secondary {
         margin-top: 22px;
     }

     .site_menu_secondary a {
         font-size: 14px;
     }

     .site_menu_contact {
         margin-top: 28px;
         padding: 13px;
         font-size: 12px;
     }
 }

 /* ==========================================================================
   TOUCH DEVICES — any screen width
   ========================================================================== */

 /* Both size previews are pointer-driven: the floating frame follows the cursor
   and the in-row slot opens on :hover. Neither survives a tap — the row's
   :hover sticks after the touch, so the image flashes over the surface links
   that are being pressed. Hidden on anything with a touch screen, phones,
   tablets and touch-screen laptops alike, which leaves it a mouse-only
   flourish. The 991px block above already covers small screens; this covers
   the wide ones that are still touched. */
 @media (any-pointer: coarse),
 (hover: none) {

     .sizes_image_area,
     .sizes_image_cursor {
         display: none;
     }
 }

 /* ==========================================================================
   EVENTS
   ========================================================================== */

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

 @media screen and (max-width: 991px) {

     .event_header_area {
         margin-bottom: 40px;
     }

     .event_grid_area {
         gap: 40px 24px;
     }

     .event_grid_area.is_compact {
         grid-template-columns: repeat(2, 1fr);
     }

     .event_detail_head_area {
         padding-bottom: 34px;
         margin-bottom: 34px;
     }

     /* three across turns a photograph into a stamp on a tablet */
     .event_gallery_area {
         grid-template-columns: repeat(2, 1fr);
     }

     .event_lightbox_area {
         gap: 10px;
         padding: 18px;
     }

     .event_lightbox_close {
         top: 16px;
         right: 16px;
     }
 }

 @media screen and (max-width: 575px) {

     /* one column: the card is the content here, not a tile in a grid */
     .event_grid_area,
     .event_grid_area.is_compact {
         grid-template-columns: 1fr;
         gap: 34px;
     }

     .event_gallery_area {
         grid-template-columns: repeat(2, 1fr);
         gap: 8px;
     }

     /* the arrows would crowd the photograph, so swipe and the close button
        carry navigation on a phone */
     .event_lightbox_nav {
         display: none;
     }

     .event_lightbox_figure {
         max-width: 100%;
     }

     .event_lightbox_figure img {
         max-height: 70vh;
     }
 }

/* ==========================================================================
   MENU PANEL — short viewports (laptops)
   --------------------------------------------------------------------------
   The panel is anchored to the bottom of the window and grows upward, so what
   decides whether it fits is the viewport's HEIGHT, not its width — and the
   width bands above left 1200px-1399px with no rule at all, so laptops fell
   back to the largest base sizing. On a 1280x720 that put the top of the panel
   116px above the top of the screen.

   Sizing therefore keys off height here. Everything is guarded with
   min-width: 992px so the phone and tablet layouts, which are already right,
   cannot be touched; and the tiers only engage below 860px tall, so the large
   desktops — 1600x900, 1920x1080 — keep exactly the panel they have now.

   Width comes down with height so the panel keeps roughly the portrait
   proportion it has on a big screen instead of squaring off as the type
   shrinks, and each tier caps its own height against its own bottom offset.
   ========================================================================== */

/* The panel is a flex column, so a height cap makes its children shrink rather
   than overflow — which silently squashed the contact button until its label
   was cut in half. Nothing in here may shrink; if space ever runs out the
   panel scrolls instead. */
.site_menu_panel>* {
   flex-shrink: 0;
}

/* --- laptops up to 860px tall ------------------------------------------- */
@media screen and (min-width: 992px) and (max-height: 860px) {
   .site_menu_panel {
      bottom: 128px;
      max-width: 440px;
      max-height: calc(100vh - 152px);
      padding: 42px 48px 38px;
      overflow-y: auto;
      scrollbar-width: none;
   }

   .site_menu_label {
      font-size: 13px;
      margin-bottom: 22px;
   }

   .site_menu_primary a {
      font-size: 31px;
   }

   .site_menu_secondary {
      margin-top: 26px;
   }

   .site_menu_secondary a {
      font-size: 17px;
   }

   .site_menu_contact {
      margin-top: 32px;
      padding: 14px;
      font-size: 14px;
   }
}

/* --- short laptops, 780px and under (1280x720, 1366x768) ---------------- */
@media screen and (min-width: 992px) and (max-height: 780px) {
   .site_menu_panel {
      bottom: 110px;
      max-width: 382px;
      max-height: calc(100vh - 134px);
      padding: 32px 38px 28px;
   }

   .site_menu_label {
      font-size: 12px;
      margin-bottom: 17px;
   }

   .site_menu_primary a {
      font-size: 26px;
   }

   .site_menu_secondary {
      margin-top: 19px;
   }

   .site_menu_secondary a {
      font-size: 15px;
   }

   .site_menu_contact {
      margin-top: 23px;
      padding: 12px;
      font-size: 13px;
   }
}

/* --- very short windows, 660px and under -------------------------------- */
@media screen and (min-width: 992px) and (max-height: 660px) {
   .site_menu_panel {
      bottom: 92px;
      max-width: 342px;
      max-height: calc(100vh - 116px);
      padding: 26px 32px 24px;
   }

   .site_menu_label {
      font-size: 11px;
      margin-bottom: 14px;
   }

   .site_menu_primary a {
      font-size: 22px;
   }

   .site_menu_secondary {
      margin-top: 15px;
   }

   .site_menu_secondary a {
      font-size: 14px;
   }

   .site_menu_contact {
      margin-top: 18px;
      padding: 10px;
      font-size: 12px;
   }
}

@media screen and (min-width: 992px) {
   .site_menu_panel::-webkit-scrollbar {
      display: none;
   }
}

/* ==========================================================================
   HOME CTA — phones and tablets
   --------------------------------------------------------------------------
   The section is built for a wide box: content held to the left, the line-mark
   filling the full height of the right-hand side, and 150px of side padding.
   None of that survives a narrow column — the mark ends up drawn straight
   through the heading, and the padding leaves the copy in a gutter — which is
   presumably why it was simply switched off below tablet.

   Nothing here applies above 991px, so the desktop composition is untouched.
   ========================================================================== */

@media screen and (max-width: 991px) {
   .cta_box_area {
      min-height: 380px;
      padding: 0 60px;
   }

   .cta_content_area h2 {
      margin-top: 28px;
   }

   .cta_button_area {
      margin-top: 40px;
   }
}

@media screen and (max-width: 767px) {
   /* Height comes from the content now. Centring 440px of box around three
      short blocks left the copy floating in the middle of a lot of nothing. */
   .cta_box_area {
      min-height: 0;
      align-items: flex-start;
      padding: 44px 40px;
   }

   .cta_content_area {
      width: 100%;
   }

   .cta_content_area h2 {
      margin-top: 18px;
      font-size: 34px;
      line-height: 1.22;
   }

   .cta_button_area {
      gap: 12px;
      margin-top: 30px;
   }

   /* Tucked into the bottom corner and faded back, so it reads as texture
      behind the block rather than a drawing over the words. */
   .cta_icon_area {
      top: auto;
      right: -1px;
      bottom: -1px;
      height: 38%;
      opacity: 0.45;
   }
}

/* --- narrow phones ------------------------------------------------------
   Only down here do the buttons go full width. Stacking them any earlier
   stretched each one to nearly 700px at the top of the range, which reads as
   a banner rather than a button; above this they sit side by side at their
   natural width. */
@media screen and (max-width: 575px) {
   .cta_box_area {
      padding: 44px 24px;
   }

   .cta_content_area h2 {
      font-size: 30px;
   }

   .cta_button_area .default_button {
      flex: 1 1 100%;
      justify-content: space-between;
   }
}

/* ==========================================================================
   PRODUCT PAGE ACTIONS — phones
   --------------------------------------------------------------------------
   Two WhatsApp desks doubled the button count on a screen that already
   carries a sticky call to action, so the page arrived as a wall of blocks:
   six controls in the action row and three more pinned to the bottom, with
   Enquire and both WhatsApp lines appearing twice.

   The sticky bar is on screen the whole time, so it keeps WhatsApp and the
   action row lets it go. What is left in the row is the thing the bar does not
   offer: the PDF, the share and the save. Desktop is untouched — the bar does
   not exist above 767px, where the row is the only way to reach WhatsApp.
   ========================================================================== */
@media screen and (max-width: 767px) {
   .product_action_buttons .product_wa_btn {
      display: none;
   }

   /* Enquire is pinned to the bottom of the screen the whole way down the page,
      so the inline copy of it is the same button twice on one screen. What is
      left is a single quiet row of the things the bar does not carry. */
   .product_action_buttons .product_enquire_btn {
      display: none;
   }

   .product_action_buttons .default_button.is_light {
      flex: 1 1 auto;
      justify-content: center;
   }

   /* three across in the sticky bar, so the labels have to give up the word
      "WhatsApp" and some tracking to stay on one line */
   .product_mobile_cta .default_button {
      gap: 8px;
      padding: 12px 10px;
      font-size: 11px;
      letter-spacing: 0.08em;
      white-space: nowrap;
   }
}