/* 

Outline CSS

This adaptation of Outline is modified to handle older versions of iOS - given resource restrictions for testing,
and also there is khw-specific code herein : khw is currently written in old-school HTML directly!

rem : Use Go Live Server inside VSCode to get hot reload including on CSS changes 

*/


/*
PRIMITIVES 
*/
:root {

   /* FALLBACK FONT STACKS */
   --font_family_sans:arial,-apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif;
   --font_family_serif:Iowan Old Style, Apple Garamond, Baskerville, Times New Roman, Droid Serif, Times, Source Serif Pro, serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
      
   /* Color Palette Custom Props */
   --bg_primary:#818C9E;
   --bg_primary_light:hsl(217, 13%, 76%);
   --bg_primary_dark:hsl(218, 13%, 36%);
   --bg_secondary:#707684;
   --bg_neutral_1:#F5FDFF;
   --bg_neutral_2:#F3F1EC;
   --bg_neutral_1_dark:#b3f0ff;
   --bg_neutral_1_dark:hsl(192, 100%, 94%);
   --bg_accent_1:#433F4D;
   --bg_dark:#253447;/*  --bg_dark:#0F1D31; : pastel version of bg_dark : try w/ other colors */
   --bg_dark_lighter:hsl(215, 53%, 38%);

   /* Nav Props */
   --nav_bar_height:80px;

   
   /* z-index Props */
   --nav_z_index:50;
   --under_nav_z_index:49;
}

/* Primary - cool_grey */
.bg_primary {background:var(--bg_primary);}
.bg_primary_dark {background:var(--bg_primary_dark);}
/* Secondary - slate_grey */
.bg_secondary {background:var(--bg_secondary);}
/* Neutral_1 - alice_blue */
.bg_neutral_1 {background:var(--bg_neutral_1);}
/* Neutral_2 - bone */
.bg_neutral_2 {background:var(--bg_neutral_2);}
/* Dark - oxford_blue */
.bg_dark {background:var(--bg_dark);}
/* Accent_1 - graphite */
.bg_accent_1 {background:var(--bg_accent_1);}
/* transparent - utility */
.bg_transparent {background:transparent !important;}

@media screen and (min-width: 1045px) { 
   .bg_dark_lg {background:var(--bg_dark);}
}

/* 
Z-INDEX UTILITY 
*/
.nav_z_index         {z-index:var(--nav_z_index);}
.under_nav_z_index   {z-index:var(--under_nav_z_index);}



/* 
OUTLINE CSS RESET
*/
*,*::before,*::after {
   -webkit-box-sizing: border-box;
   box-sizing: border-box;
   margin:0;
}
html {
   scroll-behavior: smooth;
}





/* 
HTML ELEMENTS STYLING 
For constrainted testing (no iOS) we are aiming for absolute KISS solution
*/




/*
Nav
we split the nav on breakpoint - 2 separate components
we keep specifity low to not overwrite utility classes like .flex which also target display:
otherwise, use containers and wrapping to split e.g. .flex & .lg_nav class behaviours
*/
.sm_nav {
   display:block;
   height:var(--nav_bar_height);
}
.lg_nav {
   display:none;
   height:var(--nav_bar_height);
}

@media screen and (min-width: 1045px) {
   .sm_nav {
      display:none;
   }
   .lg_nav {
      display:block;
   }
   ul.lg_nav_items_list {
      display:-webkit-box;
      display:-ms-flexbox;
      display:flex;
      -webkit-box-orient:horizontal;
      -webkit-box-direction:normal;
      -ms-flex-direction:row;
      flex-direction:row;
      gap:1rem;
   }
}

/* Nav Height */
section.nav_flex_container {height:var(--nav_bar_height);}

/* logo_block covers sm navbar except hamburger - we overlay in front of descending dropdown */
div.logo_block {
   z-index:50;
   display:-webkit-box;
   display:-ms-flexbox;
   display:flex;
   -webkit-box-align:center;
   -ms-flex-align:center;
   align-items:center;
   -webkit-box-flex:2;
   -ms-flex-positive:2;
   flex-grow:2;
   width:fit-content;
   margin-left:-.5rem;
}
.logo_text {
   font-size:1.75rem;
   font-weight:700;
   color:black;
   white-space: preserve nowrap;
}
a.custom_logo_link {
   text-decoration:none;
}

@media screen and (min-width: 768px) {
   nav div.logo_block {
      visibility:visible;
   }
}
nav div.logo_block a {
   text-decoration:none;
}



/*
SITE NAV
*/
nav {
   display:block;
   position:-webkit-sticky;
   position:sticky;
   top:0;
   z-index:var(--nav_z_index);
   width:100%;
   height:var(--nav_bar_height);
   padding-right:24px;
   padding-left:24px;
   padding-bottom:.25rem;
   user-select:none;
   transition:transform .5s ease-in;
}
nav.site_nav {
   background:var(--bg_accent_1);
}
nav.design_nav {
   position:absolute;
   height:100px;
}
/* place a dimmer bg on nav */
nav.dimmer_bg::before {
   content:'';
   position:absolute;top:0;left:0;z-index:-1;
   width:100%;height:100%;
   background:#1A1A1A;
   opacity:.3;
}

/* 
Mobile dropdown 
*/
nav ul.menu {
   position:absolute;
   z-index:1;
   top:-100vh; /* default - dropdown is hidden - only hamburger is visible */
   left:0;
   display:-webkit-box;
   display:-ms-flexbox;
   display:flex;
   -webkit-box-orient:vertical;
   -webkit-box-direction:normal;
   -ms-flex-direction:column;
   flex-direction:column;
   gap:0rem;
   width:100%;
   height:120vh;
   padding:calc(var(--nav_bar_height) + 2rem) 0 1rem 0;
   padding:7rem 5rem;
   
   /* set dropdown bg color */
   background:var(--bg_dark);

   color:var(--nav_mobile_dropdown_color);
   user-select:none;
   -webkit-transform:translateY(-100vh);
   -ms-transform:translateY(-100vh);
   transform:translateY(-100vh);
   opacity:0;
   -webkit-transition:opacity 3s ease-in-out,-webkit-transform .5s ease-in-out;
   transition:opacity 3s ease-in-out,-webkit-transform .5s ease-in-out;
   -o-transition:transform .5s ease-in-out,opacity 3s ease-in-out;
   transition:transform .5s ease-in-out,opacity 3s ease-in-out;
   transition:transform .5s ease-in-out,opacity 3s ease-in-out,-webkit-transform .5s ease-in-out;
}


nav ul.menu.dropdown_menu a {
   color:white;
}
nav ul.menu.extended_sm_nav_dropdown {
   -webkit-transform:translateY(100vh);
   -ms-transform:translateY(100vh);
   transform:translateY(100vh);
   opacity:1;   
   -webkit-transition:opacity .75s ease-in-out,-webkit-transform .75s ease-in-out;
   transition:opacity .75s ease-in-out,-webkit-transform .75s ease-in-out;
   -o-transition:transform .75s ease-in-out,opacity .75s ease-in-out;
   transition:transform .75s ease-in-out,opacity .75s ease-in-out,-webkit-transform .75s ease-in-out; 
}
img.khw_badge {
   width:60px;
   height:60px;
   border:solid 3px white;
   border-radius:50%;
}

/* mobile menu toggle - rotating toggle_bars */
nav > div.nav_toggle_wrap {
   z-index:50;
   padding:0 1rem 0 0;
   display:-webkit-box;
   display:-ms-flexbox;
   display:flex;
   -webkit-box-align:center;
   -ms-flex-align:center;
   align-items:center;
   width:60px;
   height:var(--nav_bar_height);
   padding:0 1rem 0 0;
   background:var(--khw_bg_neutral_1);
}
nav div.nav_toggle {
   position:relative;
   z-index:3;
   width:100%;
   height:60px;
   cursor:pointer;
}
nav div.nav_toggle .toggle_bar {
   position:absolute;
   top:0;
   width:100%;
   height:5px;
   margin-bottom:5px;
   background:white;
   -webkit-transform:rotate(0);
   -ms-transform:rotate(0);
   transform:rotate(0deg);
   -webkit-transition:.5s ease-in-out;
   -o-transition:.5s ease-in-out;
   transition:.5s ease-in-out;
}
nav div.nav_toggle .toggle_bar:nth-child(1) {top:15px;}
nav div.nav_toggle .toggle_bar:nth-child(2) {
   top:30px;
   left:0;
   opacity:1;
}
nav div.nav_toggle .toggle_bar:nth-child(3) {top:45px;}
nav div.nav_toggle.selected_toggle {
   -webkit-transition:.25s ease-in-out;
   -o-transition:.25s ease-in-out;
   transition:.25s ease-in-out;
}
nav div.nav_toggle.selected_toggle .toggle_bar:nth-child(1) {
   top:30px;
   -webkit-transform:rotate(135deg);
   -ms-transform:rotate(135deg);
   transform:rotate(135deg);
   background:white;
}
nav div.nav_toggle.selected_toggle .toggle_bar:nth-child(2) {
   left:20px;
   width:0;
   opacity:0;
}
nav div.nav_toggle.selected_toggle .toggle_bar:nth-child(3) {
   top:30px;
   -webkit-transform:rotate(-135deg);
   -ms-transform:rotate(-135deg);
   transform:rotate(-135deg);
   background:white;
}

 a.nav_link {
   color:white;
   font-size:1.25rem;
   font-weight:400;
   padding:.5rem 1rem;
   text-decoration:none;
   border-radius:1rem .25rem 1rem .25rem;
   margin:0 .25rem;   
 }
 a.nav_link.selected_nav_link {
   background:var(--bg_neutral_2);
   color:var(--bg_dark);
 }
 a.nav_link:hover {
   background:var(--bg_primary_dark);
   color:white;
 }
 a.nav_link.selected_nav_link {
   background:var(--bg_neutral_2);
   color:var(--bg_dark);
 }
 a.menu_dropdown_link {
   margin:1rem 0 !important;
   border-radius:1rem .25rem 1rem .25rem;
 }
 a.menu_dropdown_link:hover {
   background:var(--bg_neutral_1) !important;
   color:white !important;
 }
 a.menu_dropdown_link.selected_nav_link {
   background:var(--bg_primary) !important;
   color:white !important;
 }
 a.menu_dropdown_link.selected_nav_link:hover {
   color:white !important;
 }
 ul.dropdown_menu li {
   /* we use padding for spacing since testing on iOs 12.x */
   padding:1rem 0;
 }
 a.menu_dropdown_link {
   font-size:1.3rem;
   padding:.5rem !important;
   text-decoration:none;
 }
 a.menu_dropdown_link:hover {
   background:white;
   color:black !important;
 }



a {
   padding:0;
}


ul {
   margin:0;
   padding:0;
   list-style:none;
}
ul.disc_bullets {   
   list-style:disc;
}


section.button_group {
   display:-webkit-box;
   display:-ms-flexbox;
   display:flex;
   -ms-flex-item-align:start;
   align-self:flex-start;
   -ms-flex-wrap:wrap;
   flex-wrap:wrap;
   width:100%;
}


/* 
Our primary 'buttons' 
*/
a.cta_link {
   display:-webkit-box;
   display:-ms-flexbox;
   display:flex;
   -webkit-box-orient:vertical;
   -webkit-box-direction:normal;
   flex-direction:column;
   -webkit-box-pack:center;
   -ms-flex-pack:center;
   justify-content:center;
   -webkit-box-align:center;
   -ms-flex-align:center;
   align-items:center;
   width:fit-content;
   /* simple spacing for iOS 12.x testing */
   margin:0 .75rem 0 0;
   padding:.8rem 1rem .8rem 1rem;
   font-size:1.18rem;
   color:white;
   background:var(--bg_accent_1);
   /* border-radius:.25rem 1rem .25rem 1rem; */
   user-select:none;
   text-align:center;
   -webkit-transition: all .25s ease-in-out, color .25s ease-in-out;
   -o-transition: all .25s ease-in-out, color .25s ease-in-out;
   transition: all .25s ease-in-out, color .25s ease-in-out;
}
a.cta_link.light_border {
   border:solid 1px white;
}
a.cta_link.cta_dark {
   /* background:var(--bg_dark); */
   padding:1rem;
   font-weight:400;
}
a.cta_link:hover {
   background:var(--bg_dark_lighter);
   -webkit-transition: all .25s ease-in-out, color .25s ease-in-out;
   -o-transition: all .25s ease-in-out, color .25s ease-in-out;
   transition: all .25s ease-in-out, color .25s ease-in-out;
}

a.cta_link.light_btn {   
   background:hsl(216, 53%, 25%);
   color:white !important;
}
a.cta_link.light_btn:hover {
   background:hsl(216, 53%, 10%);
}
a.cta_link {
   text-decoration:none;
}

/* a.text_only_link {} */
a.text_only_link:hover {
   text-decoration:underline;
}

 button {
   padding:1rem;
   background:var(--bg_accent_1);
   border:solid 1px #555555;
 }
 button:hover {
   background:var(--bg_dark) !important;
 }
 button.light_btn {
   border:solid 1px white;
 }



/* 
FLEX UTILITIES
*/
.gap_0 {gap:0 !important;}
.gap_\.25, .gap_\.25 {gap:.25rem !important;}
.gap_1\.25, .gap_1\.25 {gap:1.25rem !important;}
.gap_\.5, .gap_0\.5 {gap:.5rem !important;}
.gap_1 {gap:1rem !important;}
.gap_1\.5 {gap:1.5rem !important;}
.gap_2 {gap:2rem !important;}
.gap_3 {gap:3rem !important;}
.gap_4 {gap:4rem !important;}
.gap_5 {gap:5rem !important;}

@media screen and (max-width: 1045px) { 
   .gap_1_sm {gap:1rem !important;}
   .gap_2_sm {gap:2rem !important;}
   .gap_3_sm {gap:3rem !important;}
}



/* 
ANIMATED TILES 
*/

/* GRID */
section.animated_tiles > section {
   display:-ms-grid;
   display:grid;
   /* we get default grid-template-columns from .grid_tiles */
   gap:0;
   margin:0;
   padding:0;
}
/* SINGLE TILE */
section.animated_tiles > section > article.animated_tile {
   position:relative;
   display:-webkit-box;
   display:-ms-flexbox;
   display:flex;
   -ms-flex-pack:distribute;
   justify-content:space-around;
   -webkit-box-align:center;
   -ms-flex-align:center;
   align-items:center;
   padding:1rem;
   overflow:hidden;
   color:white;
   cursor:pointer;
   user-select:none;
}
/* Z-STACK SINGLE TILE LAYERS  */
section.animated_tiles > section > article.animated_tile  > figure      {z-index:1;}
section.animated_tiles > section > article.animated_tile *:not(figure)  {z-index:3;}

/* SINGLE TILE DIMMER */
section.animated_tiles > section > article.animated_tile::before {
   content:'';
   position:absolute;
   top:0;
   left:0;
   z-index:2;
   width:100%;
   height:100%;
   background:black;
   opacity:0;
   -webkit-transition:opacity .75s ease-in-out;
   -o-transition:opacity .75s ease-in-out;
   transition:opacity .75s ease-in-out;
}
section.animated_tiles > section > article.animated_tile:hover::before {
   opacity:0.6;
   -webkit-transition:opacity .5s ease-in-out;
   -o-transition:opacity .5s ease-in-out;
   transition:opacity .5s ease-in-out;
}
/* SINGLE TILE BG IMAGE */
section.animated_tiles > section > article.animated_tile > figure.animated_tile_img {
   width:100% !important;
}
section.animated_tiles > section > article.animated_tile > figure.animated_tile_img > img {
   position:absolute;
   top:0;
   left:0;
   /* 
   full cover in all screen sizes
   one constraint is that the text is likely to stretch the tile height as screen width decreases 
   we've tweaked to cover that
   */
   width:100%;
   min-height:100%;
   -o-object-fit:cover;
   object-fit:cover;
   aspect-ratio: 16/9;
   /* scale on hover */
   -webkit-transform:scale(1.01);
   -ms-transform:scale(1.01);
   transform:scale(1.01);  /* prevents sizing flicker on transform */
   -webkit-transition:1s;
   -o-transition:1s;
   transition:1s;
}
section.animated_tiles > section > article.animated_tile:hover > figure.animated_tile_img > img {
   -webkit-transform:scale(1.2);
   -ms-transform:scale(1.2);
   transform:scale(1.2);
   -webkit-transition:1s;
   -o-transition:1s;
   transition:1s; 
}
/* SINGLE TILE TEXTS */
section.animated_tiles > section > article.animated_tile > section.tile_texts {
   display:-webkit-box;
   display:-ms-flexbox;
   display:flex;
   -webkit-box-orient:vertical;
   -webkit-box-direction:normal;
   -ms-flex-direction:column;
   flex-direction:column;
   gap:0rem;
   min-width:90%;
   text-align:center;
}

/* HIDE/SHOW P AND BUTTON */
section.animated_tiles > section > article.animated_tile > section.tile_texts  p,
section.animated_tiles > section > article.animated_tile > section.tile_texts  button  {
   opacity:0;
   -webkit-transition:opacity .5s ease-in-out;
   -o-transition:opacity .5s ease-in-out;
   transition:opacity .5s ease-in-out;
}
section.animated_tiles > section > article.animated_tile:hover > section.tile_texts  p,
section.animated_tiles > section > article.animated_tile:hover > section.tile_texts  button {
   opacity:1;
   -webkit-transition:opacity .5s ease-in-out;
   -o-transition:opacity .5s ease-in-out;
   transition:opacity .5s ease-in-out;
}
.tile_btn {
   margin:1.5rem auto 1rem auto;
   width:fit-content;
}
/* no hover devices - we always show */
@media (hover: none) {
   section.animated_tiles > section > article.animated_tile > section.tile_texts  p,
   section.animated_tiles > section > article.animated_tile > section.tile_texts  button {
      opacity:1;
   }
}





/* 
COVER_BLOCK
*/

/* large heading over background img - plus optional text & button */
section.cover_block {
   position:relative;
   display:-webkit-box;
   display:-ms-flexbox;
   display:flex;
   min-height:var(--cover_block_height);
   padding:0;
   padding-top:5rem;
   padding-bottom:5rem;
   overflow:hidden;
   color:white;
}
/* img dimmer */
section.cover_block::before {
   content:'';
   position:absolute;
   top:0;
   left:0;
   z-index:1;
   width:110%;
   height:100%;
   background:black;
   opacity:0;
}
section.cover_block:has(div) {
   height:fit-content;
}
section.cover_block p {
   margin:auto 0 auto 0;
}
section.cover_block .bg_img {
   position:absolute;
   top:0;
   left:0;
   z-index:3;
   width:100%;
   height:100%;
   -o-object-fit:cover;
   object-fit:cover;
   background-position:bottom;
}
section.cover_block.zoomie_block .bg_img {
   position:relative;
}
section.cover_block section.text_overlay {
   position:absolute;
   top:0;left:0;
   z-index:4;
   display:-ms-grid;
   display:grid;
   -ms-grid-columns:1fr;
   grid-template-columns:1fr;  
   height:fit-content;
   padding:1rem;
   height:100% !important;
   margin:0;
   padding:0;
   text-align:center;
}
section.cover_block section.text_overlay > section.text_overlay_texts {
   position:absolute;
   top:0;left:6px;
   z-index:2;
   display:-webkit-box;
   display:-ms-flexbox;
   display:flex;
   -webkit-box-orient:vertical;
   -webkit-box-direction:normal;
   flex-direction:column;
   width:fit-content;
   width:1045px;
}
section.cover_block.center p {
   width:100%;
}


/* clip path on homepage Hero Section - depr */
img.bg_img {
   display:block;
   -o-object-position:center right; 
   object-position:center right;
   /* -webkit-clip-path: ellipse(20% 90% at 90% 45%);
   clip-path: ellipse(42% 80% at 90% 50%); */
   -o-object-position:top;
   object-position:top;
}
@media screen and (max-width: 1045px) {
   img.bg_img {
      /* filter:brightness(85%); */
      -webkit-clip-path:unset;
      clip-path:unset;
      filter:brightness(120%);
      height:240px !important;
   }
}

section.text_overlay_texts {
   height:fit-content;
}
section.text_overlay > section.overlay_dimmer {
   position:absolute;
   top:0;left:0;
   width:100%;height:100%;
   z-index:-1;
   background:black;
}
section.p_text.left p {
   text-align:left !important;
}
section.p_text.center > p {
   text-align:center !important;
}

@media screen and (min-width: 768px) and (max-width:1045px) {
   section.cover_block section.text_overlay {
      width:100%;
      margin-top:3rem !important;
   }
   section.cover_block img {
      height:600px !important;
   }
   section.cover_block section.text_overlay h2 {
      position:relative;
      background:none;
   }
   section.cover_block section.text_overlay h2::before {
      content:'';
      position:absolute;
      top:0;left:0;
      z-index:-1;
      opacity:.65;
      width:100%;height:100%;
      background:black;
      margin-top:0;
      color:white !important;
   }
}

@media screen and (min-width: 1045px) {
   section.cover_block section.text_overlay {
      width:870px;
   }
}




/* 
FEATURE BLOCK
two panel block - img on left, text on right (reversible) - stacks on sm
*/
section.feature_block {
   display:-ms-grid;
   display:grid;
   -ms-grid-columns:1fr;
   grid-template-columns:1fr;
   max-width:100%;
}
section.feature_block > section.feature_block_panel {      
   display:-ms-grid;
   display:grid;
   -ms-grid-columns:1fr;
   grid-template-columns:1fr;
   justify-items:flex-start; /* no webkit required */

   /* 
   align center pushes too far down, so we don't use
   -ms-flex-line-pack:center;align-content:center; 
   */
   gap:.5rem;

   min-width:50%;
   height:fit-content;
   padding:0 2rem;
   /* stack in sm - img always at top */
   -webkit-box-ordinal-group:3;
   -ms-flex-order:2;
   order:2;
}
section.feature_block img {
   object-fit:cover;
   object-position:bottom;
   display:block !important;
   line-height:0;
   width:100% !important;
   height:100% !important;
}
section.feature_block.no_img_corners img{
   border-radius:0;
}
section.feature_block p {
   margin:0;
}
section.feature_block.reverse_order > section.feature_block_panel {
   -webkit-box-ordinal-group:3;
   -ms-flex-order:2;
   order:2;
}
@media screen and (min-width: 768px) and (max-width:1300px) {
   section.feature_block.stack_on_md {
      -ms-grid-columns:1fr !important;
      grid-template-columns:1fr !important;
   }
}

@media screen and (min-width: 1045px) {
   section.feature_block {
      -ms-grid-columns:1fr 1fr;
      grid-template-columns:1fr 1fr;
   }
   section.feature_block.reverse_order {
      -webkit-box-orient:horizontal;
      -webkit-box-direction:reverse;
      -ms-flex-direction:row-reverse;
      flex-direction:row-reverse;
   }
   section.feature_block > section.feature_block_panel {
      -webkit-box-ordinal-group:unset;
      -ms-flex-order:unset;
      order:unset;
      padding:1rem 5rem;
      
      /* padding-top:5rem !important; : allow client to set */
      min-height:fit-content !important
   }
   section.feature_block img {
      -webkit-box-ordinal-group:unset;
      -ms-flex-order:unset;
      order:unset;
      padding-bottom:0;
      min-height:100%;
   }
   section.feature_block.asymmetric {
      -ms-grid-columns:1.5fr 1fr;
      grid-template-columns:1.5fr 1fr;
   }
   section.feature_block.asymmetric_reverse {
      -ms-grid-columns:1fr 1.5fr;
      grid-template-columns:1fr 1.5fr;
   }
   section.feature_block.asymmetric_xl {
      -ms-grid-columns:2.5fr 1fr;
      grid-template-columns:2.5fr 1fr;
   }
   section.feature_block.asymmetric_xl_reverse {
      -ms-grid-columns:1fr 2.5fr;
      grid-template-columns:1fr 2.5fr;
   }
}


/*
STAGGERED FEATURE BLOCK
FeatureBlock with img and text which can be staggered, offset and overlayed
Two child blocks - both absolute - so we need to specify a height for this block.
Issue : on md screens - height can clip text as it wraps to occupy available space.
*/
/* the container functions primarily to occupy the space we need */
section.staggered_feature_block {
   position:relative;
   width:100%;
   min-height:fit-content !important;
   overflow-x:hidden;
   overflow-y:hidden;
}
figure.staggered_feature_block_figure {
   position:static;
   width:100%;
}
section.staggered_feature_block_card {
   position:static;
   width:100%;
   height:fit-content;
   min-height:fit-content !important;
   padding-bottom:2rem;
}
figure.staggered_feature_block_figure > img {
   display:block;
   width:100%;
   -o-object-fit:cover;
   object-fit:cover;
}
/* 
Standard industry ranges use 768px as the cutoff for portrait tablets and large phones, 
and 1024px as the threshold where full desktop and laptop views begin 
*/
@media screen and (min-width: 1045px) {
   /* desktop */
   section.staggered_feature_block {
      visibility:visible;
   }
   figure.staggered_feature_block_figure {
      position:absolute;
      display:block;
   }
   section.staggered_feature_block_card {
      position:absolute;
   }
}



/*  
POSITION UTILITIES
For staggered_feature_block : Uses %s for responsiveness / using site spacing size of steps of size 3
Note : default behaviour is we stack all components in mobile view - hence media query
*/
@media screen and (min-width: 1045px) {
   .top_3 {top:3%;}
   .top_6 {top:6%;}
   .top_9 {top:9%;}
   .top_12 {top:12%;}
   .top_15 {top:15%;}
   .top_18 {top:18%;}
   .top_21 {top:21%;}
   .top_24 {top:24%;}
   .top_30 {top:30%;}
   .top_36 {top:36%;}
   .top_42 {top:42%;}
   .top_45 {top:45%;}

   .left_0 {left:0;}
   .left_3 {left:3%;}
   .left_6 {left:6%;}
   .left_9 {left:9%;}
   .left_12 {left:12%;}
   .left_18 {left:18%;}
   .left_24 {left:24%;}
   .left_30 {left:30%;}

   .right_0 {right:0% !important;}
   .right_3 {right:3% !important;}
   .right_6 {right:6%;}
   .right_9 {right:9%;}
   .right_12 {right:12%;}
   .right_18 {right:18%;}
   .right_24 {right:24%;}
   .right_30 {right:30%;}

   .bottom_3 {bottom:3%;}
   .bottom_6 {bottom:6%;}
   .bottom_9 {bottom:9%;}
   .bottom_12 {bottom:12%;}
   .bottom_18 {bottom:18%;}
   .bottom_24 {bottom:24%;}
   .bottom_30 {bottom:30%;}
}


.min_h_400_px {min-height:400px;}
.max_h_200_px {max-height:200px;}
.max_h_400_px {max-height:400px;}
.max_h_600_px {max-height:600px;}

@media screen and (max-width: 1024px) {
   .obj_pos_top_sm {-o-object-position:top; object-position:top;}
   .obj_pos_bottom_sm {-o-object-position:bottom; object-position:bottom;}
   .obj_pos_center_sm {-o-object-position:center; object-position:center;}
   .obj_pos_left_sm {-o-object-position:left; object-position:left;}
   .obj_pos_right_sm {-o-object-position:right; object-position:right;}
}

@media screen and (min-width: 1024px) {
   .obj_pos_top_lg {-o-object-position:top; object-position:top;}
   .obj_pos_bottom_lg {-o-object-position:bottom; object-position:bottom;}
   .obj_pos_center_lg {-o-object-position:center; object-position:center;}
   .obj_pos_left_lg {-o-object-position:left; object-position:left;}
   .obj_pos_right_lg {-o-object-position:right; object-position:right;}
}



/*
FIGURE
we wrap most imgs in Figure for enabling spacing & behaviours
*/
figure img {
   width:100%;
   -o-object-fit:cover;
   object-fit:cover;
}
section.feature_block2 {
   overflow:hidden;
}
section.feature_block2_panel {
   min-height:100% !important;
   margin:0 ;
   padding:0;
}
figure {
   width:100%;
   overflow:hidden;
   display:block !important;
}
img {
   -o-object-fit:cover;
   object-fit:cover !important;
   object-position:right;
   width:100%;
   max-height:100% !important;
}
section.image_grid {
   display:-webkit-box;
   display:grid;
   -ms-grid-columns:1fr 1fr;
   grid-template-columns:1fr 1fr;
   gap:2rem;
   width:100%;
   margin:0 auto;
   margin-bottom:5rem;
   line-height:1.2rem;
}
img {
   -o-object-fit:cover;
   object-fit:cover;
   width:100%;
   height:100%;
}
@media screen and (min-width: 910px) {
   section.image_grid {
      -ms-grid-columns:1fr 1fr 1fr 1fr;
      grid-template-columns:1fr 1fr 1fr 1fr;
      gap:2rem;
   }
}


/*
FEATURE TILES
retain - used in multiple designs 
superceded by TilesGridContainer? - on-going
*/
/* GRID */
section.feature_tiles > section {
   display:-ms-grid;
   display:grid;
   /* we get default grid-template-columns from .grid_tiles */
   gap:var(--feature_tiles_gap);
}

/* SINGLE TILE */
section.feature_tiles > section > article.feature_tile  {
   display:-webkit-box;
   display:-ms-flexbox;
   display:flex;
   -webkit-box-orient:vertical;
   -webkit-box-direction:normal;
   flex-direction:column;
   gap:0;
   width:100%;
   height:fit-content;
   margin:0;
   padding-bottom:1rem;
   overflow-x:hidden;
   border:solid 1px hsl(0, 0%, 70%);
   border-radius:var(--card_border_radius);
   -webkit-box-shadow:5px 5px 10px -2px rgba(0,0,0,.1);
   box-shadow:5px 5px 10px -2px rgba(0,0,0,.1); 
}
section.feature_tiles.no_tile_borders > section > article.feature_tile {
   border:unset;
   -webkit-box-shadow:unset;
   box-shadow:unset; 
}

section.feature_tiles.default_img_corners > section > article.feature_tile > figure  {
   border-radius:var(--default_corner_border_radius);
}
section.feature_tiles.no_img_corners > section > article.feature_tile > figure  {
   border-radius:0;
}


/* SINGLE TILE TEXTS */
section.feature_tiles > section > article.feature_tile > section.feature_tile_panel {
   display:-webkit-box;
   display:-ms-flexbox;
   display:flex;
   -webkit-box-orient:vertical;
   -webkit-box-direction:normal;
   -ms-flex-direction:column;
   flex-direction:column;
   -webkit-box-pack:start;
   -ms-flex-pack:start;
   justify-content:flex-start;
   -webkit-box-align:start;
   -ms-flex-align:start;
   align-items:flex-start;
   gap:1.5rem;
   margin:0;
   padding:var(--tile_texts_container_padding);
}
section.feature_tiles > section > article.feature_tile > section > button {
   margin:var(--feature_tile_card_btn_margin);
}

section.feature_tiles *.align_start {
   margin-left:0;
   margin-right:auto;
}

/* SINGLE TILE IMAGE */
section.feature_tiles  > section > article.feature_tile > figure.feature_tile_img {
   width:100%;
   height:fix-content;
   max-height:700px;
   overflow:hidden;
   margin-bottom:1rem;
}
/* 
document this clearly herein:
16/9 aspect ratio - as on youtube ::after  :  1280px by 720px
*/
section.feature_tiles  > section > article.feature_tile > figure.feature_tile_img > img {
   /* we fix width since card width will vary depening on screen width and no. cols; height is fixed */
   width:100%;
   height:100%;
   -o-object-fit:cover;
   object-fit:cover;
   aspect-ratio: 16/9; 
   -o-object-position:top left;
   object-position:top left;
   aspect-ratio: 16/9; 
   margin:0;
   padding:0;
}
section.feature_tiles p {
   margin:0;
   padding-top:.5rem;
   /* padding:0; */
}

@media screen and (min-width: 768px) {   
   section.feature_tiles > section {
      -ms-grid-columns:1fr 1fr 1fr;
      grid-template-columns:1fr 1fr 1fr;
   }
}



/* 
.tiles_grid_container
*/
section.tiles_grid_container {
   display:-ms-grid;
   display:grid;
}


.tile_texts_container {
   display:-webkit-box;
   display:-ms-flexbox;
   display:flex;
   -webkit-box-orient:vertical;
   -webkit-box-direction:normal;
   -ms-flex-direction:column;
   flex-direction:column;
   gap:0;
   padding:.5rem;
}
/* we want to control padding in out tiles */
.tile_texts_container > p {
   padding:0;
}
/* SINGLE TILE */
section.tiles_grid_container > section > article.feature_tile  {
   display:-webkit-box;
   display:-ms-flexbox;
   display:flex;
   -webkit-box-orient:vertical;
   -webkit-box-direction:normal;
   flex-direction:column;
   gap:0;
   width:100%;
   height:fit-content;
   margin:0;
   padding-bottom:1rem;
   overflow-x:hidden;
   border:solid 1px hsl(0, 0%, 70%);
   border-radius:var(--card_border_radius);
   -webkit-box-shadow:5px 5px 10px -2px rgba(0,0,0,.1);
   box-shadow:5px 5px 10px -2px rgba(0,0,0,.1); 
}
section.tiles_grid_container.no_tile_borders > section > article.feature_tile {
   border:unset;
   -webkit-box-shadow:unset;
   box-shadow:unset; 
}

section.tiles_grid_container.default_img_corners > section > article.feature_tile > figure  {
   border-radius:var(--default_corner_border_radius);
}
section.tiles_grid_container.no_img_corners > section > article.feature_tile > figure  {
   border-radius:0;
}


/* SINGLE TILE TEXTS */
section.tiles_grid_container > section > article.feature_tile > section.feature_tile_panel {
   display:-webkit-box;
   display:-ms-flexbox;
   display:flex;
   -webkit-box-orient:vertical;
   -webkit-box-direction:normal;
   -ms-flex-direction:column;
   flex-direction:column;
   -webkit-box-pack:start;
   -ms-flex-pack:start;
   justify-content:flex-start;
   -webkit-box-align:start;
   -ms-flex-align:start;
   align-items:flex-start;
   gap:1.5rem;
   margin:0;
   padding:var(--tile_texts_container_padding);
}
section.tiles_grid_container > section > article.feature_tile > section > button {
   margin:var(--feature_tile_card_btn_margin);
}

section.tiles_grid_container *.align_start {
   margin-left:0;
   margin-right:auto;
}

/* SINGLE TILE IMAGE */
section.tiles_grid_container  > section > article.feature_tile > figure.feature_tile_img {
   width:100%;
   height:fix-content;
   max-height:700px;
   overflow:hidden;
   margin-bottom:1rem;
}
/* 
document this clearly herein:
16/9 aspect ratio - as on youtube ::after  :  1280px by 720px
*/
section.tiles_grid_container  > section > article.feature_tile > figure.feature_tile_img > img {
   /* we fix width since card width will vary depening on screen width and no. cols; height is fixed */
   width:100%;
   height:100%;
   -o-object-fit:cover;
   object-fit:cover;
   aspect-ratio: 16/9; 
   -o-object-position:top left;
   object-position:top left;
   aspect-ratio: 16/9; 
   margin:0;
   padding:0;
}
section.tiles_grid_container p {
   margin:0;
   padding-top:.5rem;
   /* padding:0; */
}

@media screen and (min-width: 768px) {   
   section.tiles_grid_container > ul {
      -ms-grid-columns:1fr 1fr 1fr;
      grid-template-columns:1fr 1fr 1fr;
   }
}

article.tile.feature_tile.news_card {
   background:white;
   flex:1;
   width:100%;
   min-width:360px;
   padding:0 0 .75rem;
   /* enforce spacing for older iOS */
   padding:1rem;
}



/*
GRID COLS UTILITIES
@ Animated Tiles / Feature Tiles / .. 
supports underlying grid mechanism & media queries for multiple container blocks
*/
/* Default .grid_tiles is stacked on sm */
section.grid_tiles > section {
   display:-ms-grid;
   display:grid;
   margin:0;
   padding:0;
}
section.grid_tiles > section > article.grid_tile {
   position:relative;
   display:-webkit-box;
   display:-ms-flexbox;
   display:flex;
   -webkit-box-orient:vertical;
   -webkit-box-direction:normal;
   -ms-flex-direction:column;
   flex-direction:column;
   -webkit-box-pack:flex-end;
   -ms-flex-pack:flex-end;
   justify-content:flex-end;
   padding:1rem 2rem;
   overflow:hidden;
}
section.grid_tiles > section > article.grid_tile > figure {
   max-width:100%;
}
section.grid_tiles > section > article.grid_tile > figure > img.grid_tile_img {
   max-width:100%;
}
/* SINGLE TILE BG IMAGE */
section.grid_tiles > section > article.grid_tile > figure.grid_tile_img > img {
   position:absolute;
   top:0;
   left:0;
   /* 
   full cover in all screen sizes
   one constraint is that the text is likely to stretch the tile height as screen width decreases 
   we've tweaked to cover that
   */
   width:100%;
   max-width:150%;
   min-height:100%;
   -o-object-fit:cover;
   object-fit:cover;
   aspect-ratio: 16/9;
   /* scale on hover */
   -webkit-transform:scale(1.01);
   -ms-transform:scale(1.01);
   transform:scale(1.01);  /* prevents sizing flicker on transform */
   -webkit-transition:1s;
   -o-transition:1s;
   transition:1s;
}
article.grid_tile section.tile_texts *  {
   text-align:left;
   color:white;
   /* bring in front of dimmer */
   z-index:99;
}
/* Tile Dimmer */
section > article.grid_tile::before {
   content:'';
   position:absolute;
   top:0;
   left:0;
   z-index:1;
   width:100%;
   height:100%;
   background:black;
   opacity:0;
   -webkit-transition:opacity .75s ease-in-out;
   -o-transition:opacity .75s ease-in-out;
   transition:opacity .75s ease-in-out;
}
section > article.grid_tile button.tile_btn, 
section > article.grid_tile a.tile_link {
   position:relative;
   z-index:999;
}

/* future : rationalise the following media queries */
@media screen and (min-width: 768px) {   
   /* STACK MULTI COLS ON SM/MD SCREEN WIDTHS - FULL COLS ARE DISPLAYED > 1110PX*/
   section.grid_tiles.cols_1 > section {
      -ms-grid-columns:1fr;
      grid-template-columns:1fr;
   }
   section.grid_tiles.cols_2 > section {
      -ms-grid-columns:1fr 1fr;
      grid-template-columns:1fr 1fr;
   }
   section.grid_tiles.cols_2_asymmetric {
      min-width:100%;
   }
   section.grid_tiles.cols_2_asymmetric > section {
      -ms-grid-columns:2fr 1fr !important;
      grid-template-columns:2fr 1fr !important;
   }
   section.grid_tiles.cols_2_asymmetric_reverse > section {
      -ms-grid-columns:1fr 2fr!important;
      grid-template-columns:1fr 2fr !important;
   }
   section.grid_tiles.cols_4 > section {
      -ms-grid-columns:1fr 1fr;
      grid-template-columns:1fr 1fr;
   }
   section.grid_tiles.cols_5 > section {
      -ms-grid-columns:1fr 1fr;
      grid-template-columns:1fr 1fr;
   }
   section.grid_tiles:not(.cols_1,.cols_2,.cols_4,.cols_5) > section {
      -ms-grid-columns:1fr 1fr;
      grid-template-columns:1fr 1fr;
   }
}
@media screen and (min-width: 768px) {  
   /* STACK MULTI COLS ON SM/MD SCREEN WIDTHS - FULL COLS ARE DISPLAYED > 1110PX*/
   section.grid_tiles.cols_5 > section {
      -ms-grid-columns:1fr 1fr ;
      grid-template-columns:1fr 1fr ;
   }

   /* to prevent single tiles appearing on bottom row we widen title tile */
   article.title_tile {
      grid-column:1/3;
      min-height:100% !important;
   }
}
@media screen and (min-width: 910px) {
   /* STACK MULTI COLS ON SM/MD SCREEN WIDTHS - FULL COLS ARE DISPLAYED > 1110PX*/
   section.grid_tiles.cols_2 > section {
      -ms-grid-columns:1fr 1fr;
      grid-template-columns:1fr 1fr;
   }
   /* section.grid_tiles.cols_2_asymmetric {
      min-width:100%;
   }
   section.grid_tiles.cols_2_asymmetric > section {
      -ms-grid-columns:2fr 1fr;
      grid-template-columns:2fr 1fr !important;
   }
   section.grid_tiles.cols_2_asymmetric_reverse > section {
      -ms-grid-columns:1fr 2fr;
      grid-template-columns:1fr 2fr !important; 
   }*/
   section.grid_tiles.cols_4 > section {
      -ms-grid-columns:1fr 1fr 1fr;
      grid-template-columns:1fr 1fr 1fr;
   }
   section.grid_tiles.cols_5 > section {
      -ms-grid-columns:1fr 1fr 1fr;
      grid-template-columns:1fr 1fr 1fr;
   }
   
   /* to prevent single tiles appearing on bottom row we widen title tile */
   article.title_tile {
      grid-column:1/3;
   }
}
@media screen and (min-width: 1045px) {

   section.grid_tiles.cols_5 > section {
      -ms-grid-columns:1fr 1fr 1fr 1fr;
      grid-template-columns:1fr 1fr 1fr 1fr;
   }
}
@media screen and (min-width: 1300px) {
   /* FULL UTILITY COLS CLASSES DISPLAY */
   section.grid_tiles.cols_2 > section {
      -ms-grid-columns:1fr 1fr;
      grid-template-columns:1fr 1fr;
   }
   section.grid_tiles.cols_2_asymmetric {
      min-width:100%;
   }
   section.grid_tiles.cols_2_asymmetric > section {
      -ms-grid-columns:2fr 1fr;
      grid-template-columns:2fr 1fr;
   }
   section.grid_tiles.cols_4 > section {
      -ms-grid-columns:1fr 1fr 1fr 1fr;
      grid-template-columns:1fr 1fr 1fr 1fr;
   }
   section.grid_tiles.cols_5 > section {
      -ms-grid-columns:1fr 1fr 1fr 1fr 1fr;
      grid-template-columns:1fr 1fr 1fr 1fr 1fr;
   }
   section.grid_tiles:not(.cols_1,.cols_2,.cols_4,.cols_5) > section {
      -ms-grid-columns:1fr 1fr 1fr;
      grid-template-columns:1fr 1fr 1fr;
   }
   
   /* to prevent single tiles appearing on bottom row we widen title tile */
   article.title_tile {
      grid-column:1/2;
      /* min-height:unset !important; */
   }
}



/* 
FEATURE TILES 2 : FLEX - experimental
*/
section.tiles_flex_container {
   display:-webkit-box;
   display:-ms-flexbox;
   display:flex;
   -webkit-box-pack: start;
   -ms-flex-pack: start;
   justify-content: flex-start;
   -webkit-box-align:start;
   -ms-flex-align:start;
   align-items:flex-start;
   -ms-flex-wrap:wrap;
   flex-wrap:wrap;
   /* we get default grid-template-columns from .grid_tiles */
   gap:var(--feature_tiles_gap);
   width:100%;
   height:fit-content;
   padding:0;
   margin:0;
}

/* SINGLE TILE */
section.tiles_flex_container > section.tiles_grid > article.feature_tile  {
   display:-webkit-box;
   display:-ms-flexbox;
   display:flex;
   -webkit-box-orient:vertical;
   -webkit-box-direction:normal;
   flex-direction:column;
   gap:0;
   width:100%;
   height:fit-content;
   margin:0;
   padding-bottom:1rem;
   overflow-x:hidden;
   border:solid 1px hsl(0, 0%, 70%);
   border-radius:var(--card_border_radius);
   -webkit-box-shadow:5px 5px 10px -2px rgba(0,0,0,.1);
   box-shadow:5px 5px 10px -2px rgba(0,0,0,.1); 
}
section.tiles_flex_container.no_tile_borders > section.tiles_grid > article.feature_tile {
   border:unset;
   -webkit-box-shadow:unset;
   box-shadow:unset; 
}

section.tiles_flex_container.default_img_corners > section.tiles_grid > article.feature_tile > figure  {
   border-radius:var(--default_corner_border_radius);
}
section.tiles_flex_container.no_img_corners > section.tiles_grid > article.feature_tile > figure  {
   border-radius:0;
}


/* SINGLE TILE TEXTS */
section.tiles_flex_container > section > article.feature_tile > section.feature_tile_panel {
   display:-webkit-box;
   display:-ms-flexbox;
   display:flex;
   -webkit-box-orient:vertical;
   -webkit-box-direction:normal;
   -ms-flex-direction:column;
   flex-direction:column;
   -webkit-box-pack:start;
   -ms-flex-pack:start;
   justify-content:flex-start;
   -webkit-box-align:start;
   -ms-flex-align:start;
   align-items:flex-start;
   gap:1.5rem;
   margin:0;
   padding:var(--tile_texts_container_padding);
}
section.tiles_flex_container > section > article.feature_tile > section > button {
   margin:var(--feature_tile_card_btn_margin);
}

section.tiles_flex_container *.align_start {
   margin-left:0;
   margin-right:auto;
}

/* SINGLE TILE IMAGE */
section.tiles_flex_container  > section > article.feature_tile > figure.feature_tile_img {
   width:100%;
   height:fix-content;
   max-height:700px;
   overflow:hidden;
   margin-bottom:1rem;
}
/* 
document this clearly herein:
16/9 aspect ratio - as on youtube ::after  :  1280px by 720px
*/
section.tiles_flex_container  > section > article.feature_tile > figure.feature_tile_img > img {
   /* we fix width since card width will vary depening on screen width and no. cols; height is fixed */
   width:100%;
   height:100%;
   -o-object-fit:cover;
   object-fit:cover;
   aspect-ratio: 16/9; 
   -o-object-position:top left;
   object-position:top left;
   aspect-ratio: 16/9; 
   margin:0;
   padding:0;
}
section.tiles_flex_container p {
   margin:0;
   padding-top:.5rem;
   /* padding:0; */
}

@media screen and (min-width: 768px) {   
   section.tiles_flex_container > ul {
      -ms-grid-columns:1fr 1fr 1fr;
      grid-template-columns:1fr 1fr 1fr;
   }
}




/* 
OVERLAY TILES
tiles zoom in on hover
*/

/* GRID */
section.overlay_tiles > section {
   display:-ms-grid;
   display:grid;
   /* we get default grid-template-columns from .grid_tiles */
   gap:0;
   margin:0;
   padding:0;
}
/* SINGLE TILE */
section.overlay_tiles > section > article.overlay_tile {
   position:relative;
   display:-webkit-box;
   display:-ms-flexbox;
   display:flex;
   -ms-flex-pack:distribute;
   justify-content:space-around;
   -webkit-box-align:center;
   -ms-flex-align:center;
   align-items:center;
   padding:1rem;
   overflow:hidden;
   color:white;
   cursor:pointer;
   user-select:none;
}
/* Z-STACK SINGLE TILE LAYERS  */
section.overlay_tiles > section > article.overlay_tile  > figure      {z-index:1;}
section.overlay_tiles > section > article.overlay_tile *:not(figure)  {z-index:3;}

/* SINGLE TILE DIMMER */
section.overlay_tiles > section > article.overlay_tile::before {
   content:'';
   position:absolute;
   top:0;
   left:0;
   z-index:2;
   width:100%;
   height:100%;
   background:black;
   opacity:.55;
   -webkit-transition:opacity .75s ease-in-out;
   -o-transition:opacity .75s ease-in-out;
   transition:opacity .75s ease-in-out;
}
section.overlay_tiles > section > article.overlay_tile:hover::before {
   opacity:.4;
   -webkit-transition:opacity .5s ease-in-out;
   -o-transition:opacity .5s ease-in-out;
   transition:opacity .5s ease-in-out;
}

section.overlay_tiles > section > article.overlay_tile > figure.overlay_tile_img {
   min-height:100%;
}
/* SINGLE TILE BG IMAGE */
section.overlay_tiles > section > article.overlay_tile > figure.overlay_tile_img {
   position:absolute;
   top:0;
   left:0;
   /* 
   full cover in all screen sizes
   one constraint is that the text is likely to stretch the tile height as screen width decreases 
   we've tweaked to cover that
   */
   /* width:100%;
   max-width:150%; */
   min-height:100%;
   -o-object-fit:cover;
   object-fit:cover;
   /* aspect-ratio: 16/9; */
   /* scale on hover */
   -webkit-transform:scale(1.01);
   -ms-transform:scale(1.01);
   transform:scale(1.01);  /* prevents sizing flicker on transform */
   -webkit-transition:1s;
   -o-transition:1s;
   transition:1s;

}

section.overlay_tiles > section > article.overlay_tile > figure.overlay_tile_img {
   height:100% !important;
   max-height:unset;
   padding:0 !important;
}
section.overlay_tiles > section > article.overlay_tile:hover > figure.overlay_tile_img {
   /* width:100%; */
   height:100%;
   object-fit:cover;
   margin:0;

}
/* zoom in img on hover */
section.overlay_tiles > section > article.overlay_tile:hover > figure.overlay_tile_img > img {
   -webkit-transform:scale(1.2);
   -ms-transform:scale(1.2);
   transform:scale(1.2);
   -webkit-transition:1s;
   -o-transition:1s;
   transition:1s; 
   object-fit:cover;
}
/* SINGLE TILE TEXTS */
section.overlay_tiles > section > article.overlay_tile > section.tile_texts {
   display:-webkit-box;
   display:-ms-flexbox;
   display:flex;
   -webkit-box-orient:vertical;
   -webkit-box-direction:normal;
   -ms-flex-direction:column;
   flex-direction:column;
   gap:0rem;
   
   width:100%;
   height:100%;
   
   -webkit-box-pack:justify;
   -ms-flex-pack:justify;
   justify-content:space-between;

}

/* HIDE/SHOW P AND BUTTON */
section.overlay_tiles > section > article.overlay_tile > section.tile_texts  p,
section.overlay_tiles > section > article.overlay_tile > section.tile_texts  button  {
   opacity:1;
   -webkit-transition:opacity .5s ease-in-out;
   -o-transition:opacity .5s ease-in-out;
   transition:opacity .5s ease-in-out;
}
section.overlay_tiles > section > article.overlay_tile:hover > section.tile_texts  p,
section.overlay_tiles > section > article.overlay_tile:hover > section.tile_texts  button {
   opacity:1;
   -webkit-transition:opacity .5s ease-in-out;
   -o-transition:opacity .5s ease-in-out;
   transition:opacity .5s ease-in-out;
}
section.overlay_tiles > section > article.overlay_tile > section.tile_texts > section  * {
   width:100%;
}
/* GENERIC TILE UTILITIES */
/* .tile_title, .tile_text { */
   /* max-width:92%; */
   /* padding:0; */
/* } */
.tile_btn {
   margin:1.5rem auto 1rem auto;
   width:fit-content;
}

/* no hover on device - just show always */
@media (hover: none) {
   section.overlay_tiles > section > article.overlay_tile > section.tile_texts  p,
   section.overlay_tiles > section > article.overlay_tile > section.tile_texts  button {
      opacity:1;
   }
}




/* 
UTILITIES 
*/
.mobile_stack_1 {-webkit-box-ordinal-group:2;-ms-flex-order:1;order:1;}
.mobile_stack_2 {-webkit-box-ordinal-group:3;-ms-flex-order:2;order:2;}
.mobile_stack_3 {-webkit-box-ordinal-group:4;-ms-flex-order:3;order:3;}
.mobile_stack_4 {-webkit-box-ordinal-group:5;-ms-flex-order:4;order:4;}

@media screen and (min-width: 1045px) {
   .mobile_stack_1, .mobile_stack_2, .mobile_stack_3, .mobile_stack_4 {
      -webkit-box-ordinal-group:unset;-ms-flex-order:unset;order:unset;
   }
}


/* 
CARD 
*/

article.card {
   display:-webkit-box;
   display:-ms-flexbox;
   display:flex;
   -webkit-box-orient:vertical;
   -webkit-box-direction:normal;
   -ms-flex-direction:column;
   flex-direction:column;
   margin:0 !important;
   padding:0 !important;
   cursor:pointer;
   text-align:left;
}
article.card > figure {
   overflow:hidden;
   /* height:200px; */
}
article.card > figure > img {
   display:block;
   -o-object-fit:cover;
   object-fit:cover;
}
article section.panel {
   display:-webkit-box;
   display:-ms-flexbox;
   display:flex;
   -webkit-box-orient:vertical;
   -webkit-box-direction:normal;
   -ms-flex-direction:column;
   flex-direction:column;
   gap:0;
   width:100%;
   align-self:flex-start;

}
article.dynamic_card {
   display:-ms-grid;
   display:grid;
   -ms-grid-rows:1fr;
   grid-template-rows:1fr;
   gap:2rem;
   width:100%;
   height:fit-content;
   margin:0;
   padding:0;
   cursor:pointer;
}

article.dynamic_card > figure {
   overflow:hidden;
   margin:0;
}
article.dynamic_card > figure > img {
   -o-object-fit:cover;
   object-fit:cover;
}
article section.panel {
   display:-webkit-box;
   display:-ms-flexbox;
   display:flex;
   -webkit-box-orient:vertical;
   -webkit-box-direction:normal;
   -ms-flex-direction:column;
   flex-direction:column;
   gap:0;gap:0rem;
   width:100%;
}
@media (width < 768px) {
   article.dynamic_card.row_sm {
      /* we incrse text panel to accomodate long titles  */
      -ms-grid-columns:1fr 1.5fr;
      grid-template-columns:1fr 1.5fr;
   }
}
@media (width > 768px) and (width < 1045px) {
   article.dynamic_card.row_md {
      -ms-grid-columns:1fr 1fr;
      grid-template-columns:1fr 1fr;
   }
   article.dynamic_card.col_md {
      -ms-grid-columns:1fr;
      grid-template-columns:1fr;
      flex:1;      /* ensure Card occupies width w/out wrapping unnecessarily */
   }
}
@media (width > 1045px) {
   article.dynamic_card.row_lg {
      -ms-grid-columns:1fr 1fr;
      grid-template-columns:1fr 1fr;
   }
}
section.tiles_flex_container {
   padding:0;
   max-width:100%;
   margin:0;
}
section.tile_list {
   display:-webkit-box;
   display:-ms-flexbox;
   display:flex;
   -ms-flex-wrap:wrap;
   flex-wrap:wrap;
   width:100%;
}



/*
FOOTER
*/
footer {
   background:var(--bg_dark);
   color:white;
   padding:3rem;
   padding-bottom:1rem;
}
footer .footer_panels_container {
   display:-webkit-box;
   display:-ms-flexbox;
   display:flex;
   -webkit-box-orient:vertical;
   -webkit-box-direction:normal;
   -ms-flex-direction:column;
   flex-direction:column;
   -ms-flex-pack:distribute;
   justify-content:space-around;
   gap:3rem;
   margin:0 !important;
   padding:0;
   margin-bottom:2rem !important;
   width:100%;
}
section.footer_panel {
   display:-webkit-box;
   display:-ms-flexbox;
   display:flex;
   -webkit-box-orient:vertical;
   -webkit-box-direction:normal;
   -ms-flex-direction:column;
   flex-direction:column;
    -webkit-box-flex:1;
   -ms-flex-positive:1;
   flex-grow:1;
   gap:2rem;
}
article.footer_panel_card {
   text-align:left;
}
footer ul li {
   padding:.25rem;
}
.footnote {
   width:100%;
   text-align:center;
}
.footnote_items {
   display:-webkit-box;
   display:-ms-flexbox;
   display:flex;
   -webkit-box-orient:vertical;
   -webkit-box-direction:normal;
   -ms-flex-direction:column;
   flex-direction:column;
   -webkit-box-pack:start;
   -ms-flex-pack:start;
   justify-content:flex-start;
   -webkit-box-align:start;
   -ms-flex-align:start;
   align-items:flex-start;
}

@media screen and (min-width: 1045px) {
   footer .footer_panels_container {
      -webkit-box-orient:horizontal;
      -webkit-box-direction:normal;
      -ms-flex-direction:row;
      flex-direction:row;
   }
   .footnote_items {
      -webkit-box-orient:horizontal;
      -webkit-box-direction:normal;
      -ms-flex-direction:row;
      flex-direction:row;
      -webkit-box-pack:center;
      -ms-flex-pack:center;
      justify-content:center;
   }
}

/* footer links */
a.footer_nav_menu_item_link {
   font-size:1.1rem;
   line-height:1.2rem;
   text-decoration:none;
}
a.footer_nav_menu_item_link:hover {
   text-decoration:underline;
   color:white;
}




/* 
FLEX UTILITIES
*/
.flex {
   display:-webkit-box;
   display:-ms-flexbox;
   display:flex !important;
}
.flex_col {
   -webkit-box-orient:vertical;
   -webkit-box-direction:normal;
   -ms-flex-direction:column;
   flex-direction:column !important;
}
.flex_rows {
   -webkit-box-orient:horizontal;
   -webkit-box-direction:normal;
   -ms-flex-direction:row;
   flex-direction:row !important;
}
.flex_wrap {
   -ms-flex-wrap:wrap;
   flex-wrap:wrap;
}
.flex_end {
   -webkit-box-pack:end;
   -ms-flex-pack:end;
   justify-content:flex-end;
}
.space_between {
   -webkit-box-pack:justify;
   -ms-flex-pack:justify;
   justify-content:space-between;
}
.space_around {
   -ms-flex-pack:distribute;
   justify-content:space-around;
}
.justify_start {
   -webkit-box-pack:start;
   -ms-flex-pack:start;
   justify-content:flex-start;
}
.justify_center {
   -webkit-box-pack:center;
   -ms-flex-pack:center;
   justify-content:center;
}
.justify_end {
   -webkit-box-pack:end;
   -ms-flex-pack:end;
   justify-content:flex-end;
}
.justify_between {
   -webkit-box-pack:justify;
   -ms-flex-pack:justify;
   justify-content:space-between;
}
.align_items_start {
   -webkit-box-align:start;
   -ms-flex-align:start;
   align-items:flex-start !important;
}
.align_items,.align_items_center {
   -webkit-box-align:center;
   -ms-flex-align:center;
   align-items:center;
}
.align_items_end {
   -webkit-box-align:end;
   -ms-flex-align:end;
   align-items:flex-end;
}
.align_self_start {
   -ms-flex-item-align:start;
   -ms-grid-row-align:start;
   align-self:start !important;
}
.align_self_center {
   -ms-flex-item-align:center;
   -ms-grid-row-align:center;
   align-self:center;
}
.align_self_end {
   -ms-flex-item-align:end;
   align-self:flex-end !important;
}
.justify_self_end {
   -ms-grid-column-align:end;
   justify-self:end;
}
.grid_span_col_1_3 {
   -ms-grid-column: 1;
   -ms-grid-column-span: 2;
   grid-column: 1 / 3;
}
.flex_1 {
   -webkit-box-flex:1;
   -ms-flex:1 0 0%;
   flex:1 0 0%;
}
.flex_2 {
   -webkit-box-flex:2;
   -ms-flex:2 0 0%;
   flex:2 0 0%;
}



/* 
TRANSITION BEHAVIOURS
*/
.fade_in {
   opacity:0;
   -webkit-transition:opacity .5s ease-in-out;
   -o-transition:opacity .5s ease-in-out;
   transition:opacity .5s ease-in-out;
}
.appear,figure.appear,img.appear,.no_fade_in{
   opacity:1;
   -webkit-transition:opacity .5s ease-in-out;
   -o-transition:opacity .5s ease-in-out;
   transition:opacity .5s ease-in-out;
}
.hide_on_scroll_down {
   -webkit-transform:translateY(-100%);
   transform:translateY(-100%);
   -webkit-transition:-webkit-transform .6s ease-in-out;
   transition:-webkit-transform .6s ease-in-out;
   -o-transition:transform .6s ease-in-out;
   transition:transform .6s ease-in-out, -webkit-transform .6s ease-in-out;
}
.slide_in_right {
   opacity:0;   
   -webkit-transform:translateX(-5%);
   transform:translateX(-5%);
   transition:transform .5s ease-in-out;
   -webkit-transition:opacity .5s ease-in-out;
   -o-transition:opacity .5s ease-in-out;
   transition:opacity .5s ease-in-out;
}
.slide_in_left {
   opacity:0;   
   -webkit-transform:translateX(5%);
   transform:translateX(5%);
   transition:transform .5s ease-in-out;
   -webkit-transition:opacity .5s ease-in-out;
   -o-transition:opacity .5s ease-in-out;
   transition:opacity .5s ease-in-out;
}
.has_slid_in {
   opacity:1;
   -webkit-transform:translateX(0%);
   transform:translateX(0%);
   transition:transform .5s ease-in-out;
}

.slide_up {
   opacity:0;   
   -webkit-transform:translateY(30%);
   transform:translateY(30%);
   transition:transform .8s ease-in-out;
   -webkit-transition:opacity .8s ease-in-out;
   -o-transition:opacity .8s ease-in-out;
   transition:opacity .8s ease-in-out;
}
.has_slid_up {
   opacity:1;
   -webkit-transform:translateY(0%);
   transform:translateY(0%);
   transition:transform .8s ease-in-out;
}

.slide_down {
   opacity:0;   
   -webkit-transform:translateY(-20%);
   transform:translateY(-20%);
   transition:transform .45s ease-in-out;
   -webkit-transition:opacity .6s ease-in-out;
   -o-transition:opacity .6s ease-in-out;
   transition:transform .7s ease-in-out, opacity .7s ease-in-out;
}
.has_slid_down {
   opacity:1;
   -webkit-transform:translateY(0%);
   transform:translateY(0%);
   transition:transform .45s ease-in-out;
   -webkit-transition:opacity .6s ease-in-out;
   -o-transition:opacity .6s ease-in-out;
   transition:transform .7s ease-in-out, opacity .6s ease-in-out;
}

.swipe_in_right {position:relative;}
.swipe_in_right::before {
   content:'';
   position:absolute;top:0;left:0;width:100%;height:100%;
}
.swipe_in_left {position:relative;}
.swipe_in_left::before {
   content:'';
   position:absolute;top:0;right:0;width:100%;height:100%;
}
.swipe_down {position:relative;}
.swipe_down::before {
   content:'';
   position:absolute;bottom:0;right:0;width:100%;height:100%;
}
.has_swiped_in::before {
   position:absolute;width:0;
   -webkit-transition:width 2s ease-in-out;
   -o-transition:width 2s ease-in-out;
   transition:width 2s ease-in-out;
}
.has_swiped_in.swipe_quick::before {
   position:absolute;width:0;
   -webkit-transition:width 1s ease-in-out;
   -o-transition:width 1s ease-in-out;
   transition:width 1s ease-in-out;
}
.has_swiped_down::before {
   position:absolute;height:0;
   -webkit-transition:height 2.25s ease-in-out;
   -o-transition:height 2.25s ease-in-out;
   transition:height 2.25s ease-in-out;
}

/* BG MODIFIERS FOR SWIPING FOREGROUND */
.swipe_in_left.bg_primary::before,.swipe_in_right.bg_primary::before {background:var(--bg_primary);}
.swipe_in_left.bg_neutral_1::before,.swipe_in_right.bg_neutral_1::before {background:var(--bg_neutral_1);}
.swipe_in_left.bg_neutral_2::before,.swipe_in_right.bg_neutral_2::before {background:var(--bg_neutral_2);}
.swipe_in_left.bg_dark::before,.swipe_in_right.bg_dark::before {background:var(--bg_dark);}

.swipe_down.bg_primary::before {background:var(--bg_primary);}
.swipe_down.bg_neutral_1::before {background:var(--bg_neutral_1);}
.swipe_down.bg_neutral_2::before {background:var(--bg_neutral_2);}
.swipe_down.bg_dark::before {background:var(--bg_dark);}

/* swipe down - we need to remove the bg from figure */
figure.swipe_down.bg_primary {background:none;}
figure.swipe_down.bg_neutral_1 {background:none;}
figure.swipe_down.bg_neutral_2 {background:none;}
figure.swipe_down.bg_dark {background:none;}


/* zoom_in */
.zoom_in {
   -webkit-transform:scale(0);
   -ms-transform:scale(0);
   transform:scale(0);
   -webkit-transition: transform .5s ease;
   -moz-transition: transform .5s ease;
   -ms-transition: transform .5s ease;
   transition: transform .5s ease;
}
.has_zoomed_in {
   -webkit-transform:scale(1);
   -ms-transform:scale(1);
   transform:scale(1);
   -webkit-transition: transform 1s ease;
   -moz-transition: transform 1s ease;
   -ms-transition: transform 1s ease;
   transition: transform 1s ease;
}

/* subtle_zoom_in */
.subtle_zoom_in > img {
   scale:1;
   -webkit-transition:scale 1s ease-in-out;
   -o-transition:scale 1s ease-in-out;
   transition:scale 1s ease-in-out;
}
.subtle_zoomed_in > img,.no_subtle_zoom_in > img {
   scale:1.15;
   -webkit-transition:scale 1s ease-in-out;
   -o-transition:scale 1s ease-in-out;
   transition:scale 1s ease-in-out;
}



/* 
TRANSITION UTILITIES
*/
/* we can stagger side-by-side tiles for cascade effect */
.delay_1 {-webkit-transition-delay:.1s;-o-transition-delay:.1s;transition-delay:.1s;}
.delay_2 {-webkit-transition-delay:.2s;-o-transition-delay:.2s;transition-delay:.2s;}
.delay_3 {-webkit-transition-delay:.3s;-o-transition-delay:.3s;transition-delay:.3s;}
.delay_4 {-webkit-transition-delay:.4s;-o-transition-delay:.4s;transition-delay:.4s;}
.delay_5 {-webkit-transition-delay:.5s;-o-transition-delay:.5s;transition-delay:.5s;}
.delay_6 {-webkit-transition-delay:.6s;-o-transition-delay:.6s;transition-delay:.6s;}
.delay_7 {-webkit-transition-delay:.7s;-o-transition-delay:.7s;transition-delay:.7s;}
.delay_8 {-webkit-transition-delay:.8s;-o-transition-delay:.8s;transition-delay:.8s;}
.delay_9 {-webkit-transition-delay:.9s;-o-transition-delay:.9s;transition-delay:.9s;}
.delay_10 {-webkit-transition-delay:1s;-o-transition-delay:1s;transition-delay:1s;}
.delay_11 {-webkit-transition-delay:1.1s;-o-transition-delay:1.1s;transition-delay:1.1s;}
.delay_12 {-webkit-transition-delay:1.2s;-o-transition-delay:1.2s;transition-delay:1.2s;}
.delay_13 {-webkit-transition-delay:1.3s;-o-transition-delay:1.3s;transition-delay:1.3s;}
.delay_14 {-webkit-transition-delay:1.4s;-o-transition-delay:1.4s;transition-delay:1.4s;}
.delay_15 {-webkit-transition-delay:1.5s;-o-transition-delay:1.5s;transition-delay:1.5s;}
.delay_16 {-webkit-transition-delay:1.6s;-o-transition-delay:1.6s;transition-delay:1.6s;}
.delay_17 {-webkit-transition-delay:1.7s;-o-transition-delay:1.7s;transition-delay:1.7s;}
.delay_18 {-webkit-transition-delay:1.8s;-o-transition-delay:1.8s;transition-delay:1.8s;}

@media screen and (min-width: 1045px) {
   .delay_1_lg {-webkit-transition-delay:.1s;-o-transition-delay:.1s;transition-delay:.1s;}
   .delay_2_lg {-webkit-transition-delay:.2s;-o-transition-delay:.2s;transition-delay:.2s;}
   .delay_3_lg {-webkit-transition-delay:.3s;-o-transition-delay:.3s;transition-delay:.3s;}
   .delay_4_lg {-webkit-transition-delay:.4s;-o-transition-delay:.4s;transition-delay:.4s;}
   .delay_5_lg {-webkit-transition-delay:.5s;-o-transition-delay:.5s;transition-delay:.5s;}
}



/*
SPACING UTILITIES
*/
.m_auto {margin:auto !important;}
.mx_auto {margin-left:auto !important;margin-right:auto !important;}
.mx_3 {margin-left:3rem;margin-right:3rem;}
.ml_\.25 {margin-left:.25rem;}
.ml_1 {margin-left:1rem;}
.ml_2 {margin-left:2rem !important;}
.m_0  {margin:0 !important;}
.m_1  {margin:1rem;}
.m_2  {margin:2rem;}
.m_3  {margin:3rem;}
.mt_4 {margin-top:4rem;}
.mt_5 {margin-top:5rem;}
.mt_6 {margin-top:6rem;}
.mt_7 {margin-top:7rem;}
.mt_9 {margin-top:9rem;}
.mt_0 {margin-top:0 !important;}
.mb_\.5 {margin-bottom:.5rem;}
.mt_\.25 {margin-top:.25rem;}
.mt_\.5 {margin-top:.5rem !important;}
.mt_1 {margin-top:1rem !important;}
.mt_1\.5 {margin-top:1.5rem !important;}
.mt_2 {margin-top:2rem !important;}
.mt_3 {margin-top:3rem !important;}
.mb_0 {margin-bottom:0rem;}
.mb_\.5 {margin-bottom:.5rem !important;}
.mb_1 {margin-bottom:1rem !important;}
.mb_2 {margin-bottom:2rem;}
.mb_3 {margin-bottom:3rem;}
.mb_4 {margin-bottom:4rem;}
.mb_5 {margin-bottom:5rem !important;}
.mb_6 {margin-bottom:6rem;}
.mb_7 {margin-bottom:7rem;}
.mb_9 {margin-bottom:9rem;}
.mb_11 {margin-bottom:11rem;}
.mb_12 {margin-bottom:12rem;}
.px_auto {padding-left:auto;padding-right:auto;text-align:center;}
.px_\.5 {padding-left:.5rem !important;padding-right:.5rem !important;}
.px_1 {padding-left:1rem !important;padding-right:1rem !important;}
.px_1\.5 {padding-left:1.5rem;padding-right:1.5rem;}
.px_2 {padding-left:2rem;padding-right:2rem;}
.px_3 {padding-left:3rem;padding-right:3rem;}
.p_0  {padding:0 !important;}
.p_\.025 {padding:.025rem !important;}
.p_\.5 {padding:.5rem !important;}
.p_1  {padding:1rem !important;}
.p_2  {padding:2rem;}
.p_3  {padding:3rem !important;}
.p_4  {padding:4rem !important;}
.p_5  {padding:5rem !important;}
.pl_0 {padding-left:0;}
.pl_\.25 {padding-left:.25rem;}
.pl_\.5 {padding-left:.5rem;}
.pl_1 {padding-left:1rem !important;}
.pl_2 {padding-left:2rem;}
.pl_3 {padding-left:3rem;}
.pl_4 {padding-left:4rem !important;}
.pl_6 {padding-left:6rem !important;}
.pt_0  {padding-top:0rem !important;}
.pt_\.25  {padding-top:.25rem !important;}
.pt_\.5  {padding-top:.5rem !important;}
.pt_\.75  {padding-top:.75rem !important;}
.pt_1  {padding-top:1rem !important;}
.pt_2  {padding-top:2rem !important;}
.pt_3  {padding-top:3rem !important;}
.pt_4  {padding-top:4rem !important;}
.pt_5  {padding-top:5rem !important;}
.pt_6  {padding-top:6rem;}
.pt_7  {padding-top:7rem !important;}
.pt_9  {padding-top:9rem !important;}
.pb_0  {padding-bottom:0 !important;}
.pb_\.1  {padding-bottom:.1rem !important;}
.pb_\.5  {padding-bottom:.5rem !important;}
.pb_\.75 {padding-bottom:.75rem !important;}
.pb_1  {padding-bottom:1rem;}
.pb_2  {padding-bottom:2rem;}
.pb_3  {padding-bottom:3rem !important;}
.pb_4  {padding-bottom:4rem !important;}
.pb_5  {padding-bottom:5rem !important;}
.pb_6  {padding-bottom:6rem;}
.pb_7  {padding-bottom:7rem !important;}
.pb_9  {padding-bottom:9rem;}
.py_5  {padding-top:5rem;padding-bottom:5rem;}



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


   /*  
   SIZE UTILITIES
   Used in table & desktop viewports
   Default behaviour is we stack all components in mobile view - so 100%
   */
   .w_90 {width:90% !important;}
   .w_80 {width:80% !important;}
   .w_70 {width:70% !important;}
   .w_60 {width:60% !important;}
   .w_55 {width:55% !important;}
   .w_50 {width:50% !important;}
   .w_40 {width:40% !important;}
   .w_30 {width:30% !important;}
   .w_25 {width:25% !important;}

   .h_300_lg {height:300px;}
   .h_350_lg {height:350px;}
   .h_400_lg {height:400px;}
   .h_500_lg {height:500px;}
   .h_600_lg {height:600px;}
   .h_700_lg {height:700px;}
   .h_800_lg {height:800px;}
   .h_900_lg {height:900px;}
   .h_1000_lg {height:1000px;}
   .h_1200_lg {height:1200px;}
   .h_1400_lg {height:1400px;}
   .h_1500_lg {height:1500px;}
   .h_1600_lg {height:1600px;}

   
   .ml_5_lg {margin-left:5rem !important;}
   .mt_\.5_lg {margin-top:.5rem !important;}
   .mt_1_lg {margin-top:1rem !important;}
   .mt_2_lg {margin-top:2rem !important;}
   .mt_3_lg {margin-top:3rem !important;}
   .mt_4_lg {margin-top:4rem !important;}
   .mt_5_lg {margin-top:5rem !important;}
   .mt_7_lg {margin-top:7rem !important;}
   .mt_8_lg {margin-top:8rem !important;}
   .mt_9_lg {margin-top:9rem !important;}
   .mt_11_lg {margin-top:11rem !important;}
   .mb_1_lg {margin-bottom:1rem !important;}
   .mb_2_lg {margin-bottom:2rem !important;}
   .mb_3_lg {margin-bottom:3rem !important;}
   .mb_5_lg {margin-bottom:5rem !important;}
   .ml_3_lg {margin-left:3rem;}
   .p_3_lg {padding:3rem !important;}
   .p_5_lg {padding:5rem !important;}
   .pb_1_lg {padding-bottom:1rem !important;}
   .pb_3_lg {padding-bottom:3rem !important;}
   .pt_1_lg  {padding-top:1rem !important;}
   .pt_2_lg  {padding-top:2rem !important;}
   .pt_3_lg  {padding-top:3rem !important;}
   .pt_4_lg  {padding-top:4rem !important;}
   .pt_5_lg {padding-top:5rem !important;}
   .pt_7_lg {padding-top:7rem !important;}
   .pt_8_lg {padding-top:8rem !important;}
   .pt_9_lg {padding-top:9rem !important;}
   .pl_1_lg  {padding-left:1rem !important;}
   .pl_2_lg  {padding-left:2rem !important;}
   .pl_3_lg  {padding-left:3rem !important;}
   .pl_4_lg  {padding-left:4rem !important;}
   .pl_5_lg  {padding-left:5rem !important;}
   .pl_6_lg  {padding-left:6rem !important;}
   .pl_7_lg  {padding-left:7rem !important;}
   .pl_9_lg  {padding-left:9rem !important;}
   .px_2_lg  {padding-left:2rem !important;padding-right:2rem !important;}
   .px_3_lg  {padding-left:3rem !important;padding-right:3rem !important;}
   .px_4_lg  {padding-left:4rem !important;padding-right:4rem !important;}
   .px_5_lg  {padding-left:5rem !important;padding-right:5rem !important;}
   .px_6_lg  {padding-left:6rem !important;padding-right:6rem !important;}
   .px_7_lg  {padding-left:7rem !important;padding-right:7rem !important;}
   .px_9_lg  {padding-left:9rem !important;padding-right:9rem !important;}
   .px_11_lg  {padding-left:11rem !important;padding-right:11rem !important;}
   .py_3_lg {padding-top:3rem !important;padding-bottom:3rem !important;}
   .py_5_lg {padding-top:5rem !important;padding-bottom:5rem !important;}
   .pl_3_lg {padding-left:3rem !important;}
   .pl_5_lg {padding-left:5rem !important;}
}


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

   .text_center_sm {text-align:center !important;}

   .h_200_sm {height:200px !important;}
   .h_300_sm {height:300px !important;}
   .h_300_sm {height:300px !important;}
   .h_350_sm {height:350px !important;}
   .h_400_sm {height:420px !important;}
   .h_450_sm {height:450px !important;}
   .h_500_sm {height:500px !important;}
   .h_520_sm {height:520px !important;}
   .h_550_sm {height:550px !important;}
   .h_565_sm {height:565px !important;}
   .h_600_sm {height:600px !important;}
   .h_650_sm {height:650px !important;}
   .h_700_sm {height:700px;}
   .h_800_sm {height:800px;}
   .h_900_sm {height:900px;}

   .mx_auto_sm {margin-left:auto;margin-right:auto;}
   .mt_0_sm {margin-top:0rem !important;}
   .mt_1_sm {margin-top:1rem !important;}
   .mt_2_sm {margin-top:2rem !important;}
   .mt_3_sm {margin-top:3rem !important;}
   .mt_5_sm {margin-top:5rem !important;}
   .mt_7_sm {margin-top:7rem !important;}
   .mt_8_sm {margin-top:8rem !important;}
   .mt_9_sm {margin-top:9rem !important;}
   .mt_12_sm {margin-top:12rem;}
   .mt_15_sm {margin-top:15rem;}
   .mt_16_sm {margin-top:16rem;}
   .mt_17_sm {margin-top:17rem;}
   .mt_19_sm {margin-top:19rem;}
   .mt_20_sm {margin-top:20rem;}
   .mb_0_sm {margin-bottom:0rem !important;}
   .mb_1_sm {margin-bottom:1rem !important;}
   .mb_3_sm {margin-bottom:3rem !important;}
   .mb_5_sm {margin-bottom:5rem !important;}

   .px_l_sm {padding-left:1rem !important;padding-right:1rem !important;}
   .pl_0_sm {padding-left:0em !important}
   .pl_1_sm {padding-left:1rem !important}
   .pl_2\.5_sm {padding-left:2.5rem !important}
   .pl_3_sm {padding-left:3rem !important}
   .pt_\.5_sm {padding-top:.5rem !important;}
   .p_\.5_sm {padding:.5rem !important;}
   .p_0_sm {padding:0rem !important;}
   .p_1_sm {padding:1rem !important;}
   .p_2_sm {padding:2rem !important;}
   .p_3_sm {padding:3rem !important;}
   .pt_0_sm  {padding-top:0 !important;}
   .pt_\.5_sm {padding-top:.5rem !important;}
   .pt_1_sm {padding-top:1rem !important;}
   .pt_2_sm {padding-top:2rem !important;}
   .pb_\.5_sm {padding-bottom:.5rem !important;}
   .pb_2_sm {padding-bottom:2rem !important;}
   .pb_3_sm {padding-bottom:3rem !important;}
}

.w_fit {width:fit-content !important;}
.w_100 {width:100%;}
.w_80 {width:80% !important;}
.w_90 {width:90% !important;}
.w_300 {width:300px;}
.h_100 {height:100%;}
.h_200 {height:200px;}
.h_300 {height:300px;}
.h_350 {height:350px;}
.h_400 {height:400px;}
.h_500 {height:500px;}


@media screen and (min-width: 1045px) { 
   .w_fit_lg {width:fit-content !important;}
   .w_100_lg {width:100%;}
}

@media screen and (max-width: 1045px) { 
   .w_100_sm {width:100% !important;}
}


/* 
FONT UTILITIES
*/
.text_white {color:white !important;}
.text_primary {color:var(--bg_primary);}
.text_primary_light {color:var(--bg_primary_light)}
.text_neutral_1 {color:var(--bg_neutral_1);}
.text_neutral_2 {color:var(--bg_neutral_2);}
.text_secondary {color:var(--bg_secondary);}
.text_black, a.text_black {color:black !important;}
.text_grey {color:grey;}
.text_bold {font-weight:700;}
.text_center {text-align:center;}
.bg_white {background:white;}
.lg_text {font-size:1.25rem !important;line-height:1.75rem;}
.text_lg {font-size:1.25rem !important;line-height:1.75rem;}
.text_sm {font-size:.9rem !important;line-height:1rem;}
.text_light_grey {color:hsl(0, 0%, 80%);}
.text_italic {font-style:italic;}
.bg_transparent {background:transparent !important;}
.text_large {font-size:1.2rem;}

.text_balance {text-wrap:balance;}




.sm_only {
   display:block;
}
.sm_no_display {
   display:none;
}

@media screen and (min-width: 1046px) {
   .sm_only {
      display:none;
   }
   .sm_no_display {
      display:block;
   }
}
@media screen and (max-width: 768px) {
   .mobile_no_display {
      display:none !important;
   }
   .mobile_no_visibility {
      visibility:hidden;
   }
   .text_center_sm {
      text-align:center !important;
   }
}



/* 
darken_img_x : dimmer over img = for text over img
we use 'can_darken' to increase specifity while remaining independant of container 
*/
.can_darken.darken_img::before   {opacity:.2 !important;}
.can_darken.darken_img_1::before {opacity:.1 !important;}
.can_darken.darken_img_2::before {opacity:.2 !important;}
.can_darken.darken_img_3::before {opacity:.3 !important;}
.can_darken.darken_img_4::before {opacity:.4 !important;}
.can_darken.darken_img_5::before {opacity:.5 !important;}
article.animated_tile.can_darken.darken_img_1::before {opacity:.1;}
article.animated_tile.can_darken.darken_img_2::before {opacity:.2;}
article.animated_tile.can_darken.darken_img_3::before {opacity:.3;}
article.animated_tile.can_darken.darken_img_4::before {opacity:.4;}
article.animated_tile.can_darken.darken_img_5::before {opacity:.5;}
article.grid_tile.can_darken.darken_img_1::before {opacity:.1;}
article.grid_tile.can_darken.darken_img_2::before {opacity:.2;}
article.grid_tile.can_darken.darken_img_3::before {opacity:.3;}
article.grid_tile.can_darken.darken_img_4::before {opacity:.4;}
article.grid_tile.can_darken.darken_img_5::before {opacity:.5;}

@media screen and (max-width: 1045px) { 
   .can_darken.darken_img_2_sm::before {opacity:.2 !important;}
   .can_darken.darken_img_3_sm::before {opacity:.3 !important;}
   .can_darken.darken_img_4_sm::before {opacity:.4 !important;}
   .can_darken.darken_img_5_sm::before {opacity:.5 !important;}
}

img.bright_80 {filter:brightness(80%);}
img.bright_110 {filter:brightness(110%);}
img.bright_120 {filter:brightness(120%);}
img.bright_140 {filter:brightness(140%);}
img.bright_150 {filter:brightness(150%);}

img.tile_img {
   display:block;
   width:100%;
   -o-object-fit:cover;
   object-fit:cover;
}
img.img_bottom, 
img.tile_img.img_bottom,
figure.tile_figure.feature_tile_img > img.img_bottom {
   -o-object-position:bottom !important; 
   object-position:bottom !important;
}
img.img_center, 
img.tile_img.img_center,
figure.tile_figure.feature_tile_img > img.img_center {
   -o-object-position:center !important; 
   object-position:center !important;
}
img.img_top, 
img.tile_img.img_top,
figure.tile_figure.feature_tile_img > img.img_top {
   -o-object-position:top !important; 
   object-position:top !important;
}
img.img_left, 
img.tile_img.img_left,
figure.tile_figure.feature_tile_img > img.img_left {
   -o-object-position:left !important; 
   object-position:left !important;
}


.display_block {
   display:block;
}
.display_inline {
   display:inline;
}

.hover_underline:hover {
   cursor:pointer;
   text-decoration:underline;
}

/* 
GENERIC POSITIONING UTILITIES
Clients: CoverBlock, HTML Elements
Position elements within a container and for an element itself
.center : has some superfluous rules - won't apply to all clients but excess should be ignored
*/
.center {
   -ms-flex-item-align:center;
   -ms-grid-row-align:center;
   align-self:center;
   -webkit-box-align:center;
   -ms-flex-align:center;
   align-items:center;
   -webkit-box-pack:center;
   -ms-flex-pack:center;
   justify-content:center;
   text-align:center;
   margin-left:auto;
   margin-right:auto;
}
@media screen and (max-width: 1045px) {  
   .center_sm, section.button_group.center_sm {
      -ms-flex-item-align:center;
      -ms-grid-row-align:center;
      align-self:center;
      -webkit-box-align:center;
      -ms-flex-align:center;
      align-items:center;
      -webkit-box-pack:center;
      -ms-flex-pack:center;
      justify-content:center;
      text-align:center;
      margin-left:auto;
      margin-right:auto;
   }
}

section.center > p {
   text-align:center;
}
button.center {
   margin-left:auto;
   margin-right:auto;
}

.left, .start {
   -webkit-box-pack:start;
   -ms-flex-pack:start;
   justify-content:flex-start;
   text-align:left;
   margin-left:auto;
   margin-right:auto;
}
.right, .end {
   -ms-flex-item-align:end;
   align-self:flex-end;
   -webkit-box-align:end ;
   -ms-flex-align:end;
   align-items:flex-end;
   -webkit-box-pack:end;
   -ms-flex-pack:end;
   justify-content:flex-end;
   text-align:right;
}
.left_sm {
   -webkit-box-pack:start !important;
   -ms-flex-pack:start !important;
   justify-content:flex-start !important;
   text-align:left !important;
   margin:auto !important;
}


section.right > p {
   text-align:right;
}
.top {
   -ms-flex-item-align:start;
   align-self:flex-start;
   -webkit-box-align:start;
   -ms-flex-align:start;
   align-items:flex-start;
}
.bottom {
   -ms-flex-item-align:end;
   align-self:flex-end;
   -webkit-box-align:end;
   -ms-flex-align:end;
   align-items:flex-end;
}



/*
   back_to_top
*/
div.back_to_top {
   position:fixed;
   bottom:2rem;
   right:5rem;
   z-index:999999200; 
   background:black;
   width:48px;
   height:48px;
   padding:.35rem .75rem;
   cursor:pointer;
   font-size:1rem;
   font-weight:700;
   opacity:0;
   -webkit-transition:opacity .35s ease-in-out;
   -o-transition:opacity .35s ease-in-out;
   transition:opacity .35s ease-in;
}
div.back_to_top.appear:hover {
   opacity:1;
}
div.back_to_top.appear {
   opacity:.75;   
   -webkit-transition:opacity .5s ease-in-out;
   -o-transition:opacity .5s ease-in-out;
   transition:opacity .5s ease-in;
}

.no_user_select {
   user-select:none;
}


@media screen and (max-width: 768px) {
   section.section_header {
      -webkit-box-orient:vertical;
      -webkit-box-direction:normal;
      -ms-flex-direction:column;
      flex-direction:column; 
      padding:2rem 0 1rem 0 !important;
   }
   section.leading_texts {
      width:90%;
      margin:0 auto !important;
      padding:1rem 0 !important;
   }
   section.section_header p  {
      text-align:center !important;
      width:100%;
      margin:auto;
   }
   section.section_header h1, section.section_header h2 {
      text-align:center !important;
      width:100%;
      margin:auto;
   }
}



/* 
CARDS SECTION : KHW HOMEPAGE
*/
section.card_section {
   position:relative;
   padding:.5rem;

   display:-webkit-box;
   display:-ms-flexbox;
   display:flex;
   -webkit-box-orient:vertical;
   -webkit-box-direction:normal;
   -ms-flex-direction:column;
   flex-direction:column;
   -webkit-box-pack:center;
   -ms-flex-pack:center;
   justify-content:center;
   gap:1rem !important;
   
   width:100%;
   /* max-width:94%; */
   height:fit-content;
   margin:0 auto;
   padding:0;
   
}



/* min widths - we reduce Card & Card title size to fit width */
/* future : review : 1200px for .card_section and .info_card media queries? */
@media screen and (min-width: 1200px) {
   /* section.card_section {
      margin-top:-4rem;
   } */
    
   section.card_section {
      -webkit-box-orient:horizontal;
      -webkit-box-direction:normal;
      -ms-flex-direction:row;
      flex-direction:row;
      gap:1rem !important;
      flex-wrap:wrap;
      padding:2rem 0;
      max-width:100%;
   }

}



/* 
CARDS SECTION : HOMEPAGE : INFO CARD 
*/

article.info_card {
   position:relative;
   -webkit-box-flex:1;
   -ms-flex-positive:1;
   flex-grow:1; 
   justify-content:center !important;
   align-items:center !important;
   gap:0;
   z-index:2;

   max-width:90%;   /* balance width w/ flex-grow */
   height:420px;
   margin:0 auto;
   user-select:none;
   overflow:hidden;
   /* cursor:pointer; */
   border:solid 1px transparent;
   border-radius:0;
   -webkit-box-shadow:7px 7px 10px -2px rgba(0,0,0,.15);
   box-shadow:7px 7px 10px 5x rgba(0,0,0,.15); 
}

/* dim bg image to read text */
article.info_card::before {
   content:'';
   position:absolute;
   top:0;left:0;
   z-index:1;
   width:100%;
   height:100%;
   background:black;
   opacity:.66;   /* dim for mobile/tablet - no overlay bg */
}

/* bg figure/img */
article.info_card figure {
   content:'';
   position:absolute;
   top:0px;left:0;
   width:100%;height:100%;
   z-index:-1;
   -o-object-fit:cover;
   object-fit:cover;
}
article.info_card figure img {
   -o-object-fit:cover !important;
   object-fit:cover !important;
}


/* 
overlay bg
we use a div rather than ::after to allow client to assign bg_color for overlay (on hover) 
*/
article.info_card > div.hover_overlay_bg {
   position:absolute;
   top:0;left:0;
   width:100%;height:100%;
   z-index:-1;
   opacity:0;
   -webkit-transition:opacity .4s ease-in-out;
   -o-transition:opacity .4s ease-in-out;
   transition:opacity .4s ease-in;
}
article.info_card:hover {
   border:solid 1px white;
}

/* text container */
article.info_card > section.info_card_inner_container {
   position:absolute;
   top:0;left:0;
   width:100%;
   height:100%;
   z-index:1;
   padding:1rem 2rem;
   padding-top:2rem;
}
article.info_card h3 {
   font-size:3.5rem !important;
   line-height:3.3rem;
   font-weight:600;
   margin:0 ;
}
article.info_card p.info_card_tagline {
   font-size:1.5rem;
   line-height:1.75rem;
   letter-spacing:.15rem;
   width:100%;
   text-align:left !important;
   text-wrap:balance;
}
article.info_card p {
   -webkit-transition:opacity .4s ease-in-out;
   -o-transition:opacity .4s ease-in-out;
   transition:opacity .4s ease-in;
}
article.info_card * {
   color:white;
}


/* on hover-supporting devices, we hide the text until mouse is over, and insert a bg color over img */
@media (hover: hover) {
   /* mobile - we only require dim for main title - so reduce dimmer */
   article.info_card::before {
      opacity:.4;
   }
   article.info_card:hover > div.hover_overlay_bg {
      opacity:1;
   }
   article.info_card p {
      opacity:0;
   }
   article.info_card:hover p {
      opacity:1;
   }
}


@media screen and (min-width: 910px) {
   article.info_card h3 {
      font-size:4rem !important;
      line-height:3.7rem;
   }
}

/* set a stating width for flex to grow from */
@media screen and (min-width: 1200px) {
   article.info_card {
      width:200px;
   }
}

@media screen and (max-width:1200px) {
   article.info_card {
      height:280px;
      width:100%;
   }
}
@media screen and (max-width:768px) {
   article.info_card {
      height:460px;
      width:100%;
      border:solid 1px white;
   }
}


/*
DESIGNS PAGE
*/

article.project_teaser {
   /* we don't use gap for spacing to allow testing on iOS 12.x - so pad it */
   padding:2rem !important;
}
article.project_teaser > figure {
   border:solid 1px hsl(0, 0%, 92%);
   
   -webkit-box-shadow:7px 7px 10px -2px rgba(0,0,0,.15);
   box-shadow:7px 7px 10px 5x rgba(0,0,0,.15); 
}


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


}


article.package_card {

   display:-webkit-box;
   display:-ms-flexbox;
   display:flex;
   -webkit-box-orient:vertical;
   -webkit-box-direction:normal;
   -ms-flex-direction:column;
   flex-direction:column;
   gap:1rem;
   height:fit-content;
   padding:0 !important;
   background:white;
   border-radius:0 !important;
   -webkit-box-shadow:5px 5px 10px -2px rgba(71, 40, 40, 0.1);
   box-shadow:5px 5px 10px -2px rgba(71, 40, 40, 0.1); 
}

figure.package_card_figure {
   height:220px;
   overflow:hidden;
   
}
img.package_card_img {
   border-radius:0;
   -o-object-fit:cover;
   object-fit:cover;
   width:100%;
}
section.package_card_panel {
   display:-webkit-box;
   display:-ms-flexbox;
   display:flex;
   -webkit-box-orient:vertical;
   -webkit-box-direction:normal;
   -ms-flex-direction:column;
   flex-direction:column;
   gap:.5rem;
   padding:0 1.5rem 2rem 1.5rem;
}
section.package_card_titles {
   visibility:visible;
   margin-top:.15rem;
   display:-webkit-box;
   display:-ms-flexbox;
   display:flex;
   -webkit-box-orient:vertical;
   -webkit-box-direction:normal;
   -ms-flex-direction:column;
   flex-direction:column;
   gap:.25rem;
}
section.package_card_list {
   margin:0.5rem .25rem;
}
section.package_card_text {
   margin:0;
}

ul.bulleted_list {
   display:-webkit-box;
   display:-ms-flexbox;
   display:flex;
   -webkit-box-orient:vertical;
   -webkit-box-direction:normal;
   flex-direction:column;
   gap:.5rem;
   list-style:square;
   font-weight:300;
   padding-left:1rem;
}



/*
CASE STUDIES
*/
/* article.case_study_teaser {
   border:solid 1px blue;
}
  */
.corner_60 {
   border-radius:60px;
}
@media screen and (min-width: 1024px) {

   .corner_60_lg {border-radius:60px;}
   .corner_20_lg {border-radius:20px;}  

   figure.case_study_teaser_figure {
      width:400px;
      height:300px;
   }

}

.shadow {
   -webkit-box-shadow:5px 5px 10px -2px rgba(0,0,0,.1);
   box-shadow:5px 5px 10px -2px rgba(0,0,0,.1); 
}

.min_h_fit {
   min-height:fit-content !important;
}










.dimmer_bg::before,
.dimmer_bg_4::before {
   content:'';
   position:absolute;
   top:0;left:0;
   z-index:-1;
   opacity:.65;
   width:100%;height:100%;
   background:black;
}
.dimmer_bg_4::before {
   opacity:.4;
}

/* 
INSIGHT SECTION (BLOG) 
*/

article.insight_card {
   border:none !important;
   -webkit-box-shadow:none !important;
   box-shadow:none !important;
   user-select:none;
   padding:1rem;
}
article.insight_card:hover {
   background:hsl(0, 0%, 95%);background:var(--bg_neutral_1_dark);
}
a.insight_card_link {
   color:var(--bg_dark) !important;
   text-decoration:none;
   cursor:pointer;
}


.position_relative {position:relative;}

/*
SCOTLAND MAP
*/
figure.scotland_map_figure {
   max-width:600px;
}

section.map_overlay {
   position:absolute;
   top:25%;left:10%;
   width:fit-content;height:fit-content;
   z-index:10;
}
@media screen and (min-width: 1045px) {
   section.map_overlay {
      position:absolute;
      top:40%;right:0%;
      width:fit-content;height:fit-content;
      z-index:10;
   }
}


@media screen and (max-width: 1045px) {
   img.mobile_object_fit_no_cover {
      object-fit:none;
      min-width:600px;
      object-position:center center;margin-left:-120px;
   }
}


table {
   margin:3rem 0rem;
   border-collapse:collapse;
}
table.table_lined_cells td {
   border:solid 1px black;
   padding:.5rem;
}


/* 
MISC UTILITIES
*/
.no_underline {
   text-decoration:none;
}
.opacity_\.5 {
   opacity:.5;
}
.no_wrap {   
   white-space: preserve nowrap;
}
.border_white_6_lg {
   border:solid 6px white;
}
.no_show {
   visibility:hidden;
}