/*!
Theme Name: creww
Author: D2 Creative
Description: Custom Theme
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: startertheme
*/
hr { box-sizing: content-box; overflow: visible; background-color: #ccc; border: 0; height: 1px; margin-bottom: 0;}
b,strong {font-weight: bolder;}
sub,sup {font-size: 75%;line-height: 0;position: relative;vertical-align: baseline;}
sub {bottom: -0.25em;}
sup {top: -0.5em;}
img {border-style: none;}
summary {display: list-item;}
[hidden] {display: none;}
dfn,cite,em,i {font-style: italic;}
blockquote {margin: 0 1.5em;}
address {margin: 0 0 1.5em;}
dt {font-weight: 700;}
dd {margin: 0 1.5em 1.5em;}
embed,iframe,object {max-width: 100%;}
table {	margin: 0 0 1.5em;	width: 100%;}
.site-main .posts-navigation, .site-main .post-navigation {margin: 0;}
.posts-navigation .nav-links,.post-navigation .nav-links {display: flex;}
.posts-navigation .nav-previous,.post-navigation .nav-previous {flex: 1 0 50%;text-align: right;}
.posts-navigation .nav-next,.post-navigation .nav-next {flex: 1 0 50%;}
.sticky {display: block;}
.updated:not(.published) {display: none;}
.page-links {clear: both;margin: 0 0 1.5em;}
.widget {margin: 0 0 1.5em;}
.widget select {max-width: 100%;}
.wp-caption {margin-bottom: 1.5em;max-width: 100%;}
.wp-caption img[class*="wp-image-"] {display: block;margin-left: auto;margin-right: auto;}
.wp-caption .wp-caption-text {margin: 0.8075em 0;}
.wp-caption-text {text-align: center;}
.gallery {margin-bottom: 1.5em;display: grid;grid-gap: 1.5em;}
.gallery-item {display: inline-block;text-align: center;width: 100%;}
.gallery-columns-2 {grid-template-columns: repeat(2, 1fr);}
.gallery-columns-3 {grid-template-columns: repeat(3, 1fr);}
.gallery-columns-4 {grid-template-columns: repeat(4, 1fr);}
.gallery-columns-5 {grid-template-columns: repeat(5, 1fr);}
.gallery-columns-6 {grid-template-columns: repeat(6, 1fr);}
.gallery-columns-7 {grid-template-columns: repeat(7, 1fr);}
.gallery-columns-8 {grid-template-columns: repeat(8, 1fr);}
.gallery-columns-9 {grid-template-columns: repeat(9, 1fr);}
.gallery-caption {display: block;}

/*
Universal CSS Components (also add to blocks.css)
Https://adamwathan.me/css-utility-classes-and-separation-of-concerns/ 
    Text sizes, colors, and weights
    Border colors, widths, and positions
    Background colors
    Flexbox utilities
    Padding and margin helpers
*/
.fw-thin,.fw-200{font-weight:200}
.fw-light,.fw-300{font-weight:300}
.fw-normal,.fw-400{font-weight:400}
.fw-medium,.fw-500{font-weight:500}
.fw-semi, .fw-600{font-weight:600}
.fw-bold,.fw-700{font-weight:700}

.tt-uc {text-transform: uppercase;}
.tt-lc {text-transform: lowercase}

.ta-c {text-align: center;}

.td-n, .td-n > a {text-decoration: none}
.td-u, .td-u > a {text-decoration: underline}

.m-0 {margin: 0;}
.mt-0 {margin-top: 0;}
.mr-0 {margin-right: 0;}
.mb-0 {margin-bottom: 0;}
.ml-0 {margin-left: 0;}
.mlr-a {margin-left: auto !important; margin-right: auto !important;}

.p-0 {padding: 0 !important} 
.pt-0 {padding-top: 0;}
.pr-0 {padding-right: 0;}
.pb-0 {padding-bottom: 0;}
.pl-0 {padding-left: 0;}
.pl-20 {padding-left: 20px;}
.ptb-0 {padding-top: 0;padding-bottom: 0;}
.plr-0 {padding-left: 0;padding-right: 0;}
.p-10 {padding: 10px}

.flex {display:flex;height: 100%;}
.flex-col {flex-direction: column;}
.flex-jc-space-between, .flex-space-between {justify-content: space-between;}
.flex-jc-start {justify-content: flex-start;}
.flex-jc-center {justify-content: center;}
.flex-jc-end {justify-content: flex-end;}
.flex-ai-start {align-items: flex-start;}
.flex-ai-center {align-items: center !important;}
.flex-ai-end {align-items: flex-end;}
.flex-grow {flex-grow:1;}
.flex-col-stretch .wp-block-column {align-self: stretch;}

.wp-block-group.flex {display: block;height: 100%;}
.wp-block-group.flex .wp-block-group__inner-container {display:flex;height: 100%;}
.wp-block-group.flex-col .wp-block-group__inner-container {flex-direction: column;}
.wp-block-group.flex-jc-space-between .wp-block-group__inner-container, 
.wp-block-group.flex-space-between .wp-block-group__inner-container {justify-content: space-between;}
.wp-block-group.flex-jc-start .wp-block-group__inner-container {justify-content: flex-start;}
.wp-block-group.flex-jc-center .wp-block-group__inner-container {justify-content: center;}
.wp-block-group.flex-jc-end .wp-block-group__inner-container {justify-content: flex-end;}
.wp-block-group.flex-ai-start .wp-block-group__inner-container {align-items: flex-start;}
.wp-block-group.flex-ai-center .wp-block-group__inner-container {align-items: center;}
.wp-block-group.flex-ai-end .wp-block-group__inner-container {align-items: flex-end;}
.wp-block-group.flex-grow .wp-block-group__inner-container {flex-grow:1;}

.no-linebreak {white-space:nowrap;}
.d2-span {white-space: nowrap;} /* span around conent to stop line breaking in awkward places */
.no-bullets {list-style:none;margin-left:0;padding-left:0;}

.br-6 {border-radius: 6px}
.br-10, .br-10 img {border-radius: 10px}
.br-12, .br-12 img {border-radius: 12px}

/*
Display examples
d-xs-none = hide on mobile size
d-none d-xs-block = hide, then show on mobile size
d-none d-lg-block d-xs-none = only show on tablet, then hide on mobile again
*/
.d-none{display:none!important}.d-inline{display:inline!important}.d-inline-block{display:inline-block!important}.d-block{display:block!important}.d-flex{display:-webkit-box!important;display:-ms-flexbox!important;display:flex!important}.d-inline-flex{display:-webkit-inline-box!important;display:-ms-inline-flexbox!important;display:inline-flex!important}
@media only screen and (max-width:1400px) { /* (XL) laptop tweaks */
	.d-xl-none{display:none!important}.d-xl-inline{display:inline!important}.d-xl-inline-block{display:inline-block!important}.d-xl-block{display:block!important}.d-xl-flex{display:-webkit-box!important;display:-ms-flexbox!important;display:flex!important}.d-xl-inline-flex{display:-webkit-inline-box!important;display:-ms-inline-flexbox!important;display:inline-flex!important}
}
@media only screen and (max-width:1024px) { /* (LG) tablet landscape (and below) */
	.d-lg-none{display:none!important}.d-lg-inline{display:inline!important}.d-lg-inline-block{display:inline-block!important}.d-lg-block{display:block!important}.d-lg-flex{display:-webkit-box!important;display:-ms-flexbox!important;display:flex!important}.d-lg-inline-flex{display:-webkit-inline-box!important;display:-ms-inline-flexbox!important;display:inline-flex!important}
}
@media only screen and (max-width:991px) { /* (MD) bootstrap breakpoint (good for a single breakpoint between tablet landscape & portrait) */
	.d-md-none{display:none!important}.d-md-inline{display:inline!important}.d-md-inline-block{display:inline-block!important}.d-md-block{display:block!important}.d-md-flex{display:-webkit-box!important;display:-ms-flexbox!important;display:flex!important}.d-md-inline-flex{display:-webkit-inline-box!important;display:-ms-inline-flexbox!important;display:inline-flex!important}
}
@media only screen and (max-width:781px) { /* (WP) wp columns inline at this point */
  .d-wp-none{display:none!important}.d-wp-inline{display:inline!important}.d-wp-inline-block{display:inline-block!important}.d-wp-block{display:block!important}.d-wp-flex{display:-webkit-box!important;display:-ms-flexbox!important;display:flex!important}.d-wp-inline-flex{display:-webkit-inline-box!important;display:-ms-inline-flexbox!important;display:inline-flex!important}
}
@media only screen and (max-width:768px) { /* (SM) tablet portrait (and below) */
  .d-sm-none{display:none!important}.d-sm-inline{display:inline!important}.d-sm-inline-block{display:inline-block!important}.d-sm-block{display:block!important}.d-sm-flex{display:-webkit-box!important;display:-ms-flexbox!important;display:flex!important}.d-sm-inline-flex{display:-webkit-inline-box!important;display:-ms-inline-flexbox!important;display:inline-flex!important}
}
@media only screen and (max-width:575px) { /* (XS) phone */
  .d-xs-none{display:none!important}.d-xs-inline{display:inline!important}.d-xs-inline-block{display:inline-block!important}.d-xs-block{display:block!important}.d-xs-flex{display:-webkit-box!important;display:-ms-flexbox!important;display:flex!important}.d-xs-inline-flex{display:-webkit-inline-box!important;display:-ms-inline-flexbox!important;display:inline-flex!important}
}
@media print{ /* print only */
  .d-print-none{display:none!important}.d-print-inline{display:inline!important}.d-print-inline-block{display:inline-block!important}.d-print-block{display:block!important}.d-print-table{display:table!important}.d-print-table-row{display:table-row!important}.d-print-table-cell{display:table-cell!important}.d-print-flex{display:-webkit-box!important;display:-ms-flexbox!important;display:flex!important}.d-print-inline-flex{display:-webkit-inline-box!important;display:-ms-inline-flexbox!important;display:inline-flex!important}
}
/* make image within element behave like a cover image */
.with-cover-image, .with-cover-image .wp-block-group__inner-container > * {position: relative;}
.with-cover-image .wp-block-image.the-cover-image,
.with-cover-image .wp-block-image.the-cover-image picture {position: absolute;width: 100%;  height: 100%;  overflow: hidden;}
.with-cover-image .wp-block-image.the-cover-image img {object-fit: cover;  object-position: center;width: 100%;  height: 100%; }

/* General */
.loadeffect,.loadeffectleft,.loadeffectright {opacity: 0;position: relative;translate: 0 13vh;-webkit-transition: translate 1s ease, opacity 1s ease;-moz-transition: translate 1s ease, opacity 1s ease;-o-transition: translate 1s ease, opacity 1s ease;transition: translate 1s ease, opacity 1s ease;}
.loadeffectactive,.loadeffectleftactive,.loadeffectrightactive {opacity: 1;position: relative;translate: 0 0;-webkit-transition: translate 1s ease, opacity 1s ease;-moz-transition: translate 1s ease, opacity 1s ease;-o-transition: translate 1s ease, opacity 1s ease;transition: translate 1s ease, opacity 1s ease;}
.loadeffectgroup > div,.loadeffectgroupleft > div,.loadeffectgroupright > div {opacity: 0;position: relative;translate: 0 13vh;-webkit-transition: translate 1s ease, opacity 1s ease;-moz-transition: translate 1s ease, opacity 1s ease;-o-transition: translate 1s ease, opacity 1s ease;transition: translate 1s ease, opacity 1s ease;}
.loadeffectgroupactive > div,.loadeffectgroupleftactive > div,.loadeffectgrouprightactive > div {opacity: 1;position: relative;translate: 0 0;-webkit-transition: translate 1s ease, opacity 1s ease;-moz-transition: translate 1s ease, opacity 1s ease;-o-transition: translate 1s ease, opacity 1s ease;transition: translate 1s ease, opacity 1s ease;}
.loadeffectleft,.loadeffectgroupleft > div {translate: -13vw 0;}
.loadeffectright,.loadeffectgroupright > div {translate: 13vw 0;}
div:has(.loadeffectright) {overflow: hidden;}

.wp-block-cover {padding:0}
.wp-block-cover.fixed-left > .wp-block-cover__image-background {background-position-x:0!important;} 
.wp-block-cover.fixed-right > .wp-block-cover__image-background {background-position-x:100%!important;} 
.wp-block-cover.fixed-top > .wp-block-cover__image-background {background-position-y:0!important;} 
.wp-block-cover.fixed-bottom > .wp-block-cover__image-background {background-position-y:100%!important;} 



/*
.wp-block-spacer {border:1px dashed magenta;}
[class*="sp-"] { border:1px dashed lime; }
*/


/* ================================================================================================================
   ______           __                  ________________
  / ____/_  _______/ /_____  ____ ___  / ____/ ___/ ___/
 / /   / / / / ___/ __/ __ \/ __ `__ \/ /    \__ \\__ \ 
/ /___/ /_/ (__  ) /_/ /_/ / / / / / / /___ ___/ /__/ / 
\____/\__,_/____/\__/\____/_/ /_/ /_/\____//____/____/  
                                                                                                        
-------------------------------------------------------------------------------------------------------------------
iOS and Android accessibility guidelines effectively assume ~16px minimum
-------------------------------------------------------------------------------------------------------------------

/*
Theme specific CSS Components (also add to blocks.css)
*/

.fs-15 {font-size: 1.5rem}
.fs-16 {font-size: 1.6rem}
.fs-20 {font-size: 2rem}
.fs-22 {font-size: 2.2rem}
.fs-25 {font-size: 2.5rem; letter-spacing: 0.5px}
.fs-27 {font-size: 2.7rem; letter-spacing: 0.5px}
.fs-30 {font-size: 3rem; letter-spacing: 0.5px}
.fs-40 {font-size: 4rem}
.fs-45 {font-size: 4.5rem}
.fs-55 {font-size: 5.5rem}
.fs-60 {font-size: 6rem}
.fs-70 {font-size: 7rem}
.fs-100 {font-size: 10rem}
.fs-120 {font-size: 12rem}
.fs-200 {font-size: 200px}

.ls-20 {letter-spacing: 0.020em;}
.ls-100 {letter-spacing: 0.100em;}
.ls-200 {letter-spacing: 0.200em;}

.gap-10 {gap: 10px}
.gap-20 {gap: 20px}
.gap-100 {gap: 100px}
.gap-150 {gap: 150px}
.rgap-60 {grid-row-gap: 60px}

.lh-07 {line-height: 0.7}
.lh-1 {line-height: 1}
.lh-12 {line-height: 1.2}
.lh-75 {line-height: 0.75}

.c-yellow {color: var(--brand-color-yellow) !important;}
.c-grey-dark {color: var(--brand-color-grey-dark);}
.c-grey-light {color: var(--brand-color-grey-light);}
.c-grey-mid {color: #8E8E8E}
.c-white {color: #FFF}

.bg-white {background: #FFF}
.bg-grey-mid {background: #838383}
.bg-grey-dark {background-color: var(--brand-color-grey-dark); color: #FFF}
.bg-grey-extra-dark {background-color: var(--brand-color-grey-extra-dark); color: #FFF}
.bg-grey-light {background-color: var(--brand-color-grey-light); color: #393939}
.bg-yellow {background-color: var(--brand-color-yellow); color: #393939}

.mw-600 {max-width: 570px}
.mw-800 {max-width: 800px}
.mw-50 {max-width: 50%}
.mw-60 {max-width: 60%}
.mw-70 {max-width: 70%}
.mw-80 {max-width: 80%}
.mw-100 {flex-basis: 100% !important}
.mw-1050 {max-width: 1050px}

.hr-pale {border-top: 0; background-color: #C1C1C1}
.hr-light {border-top: 0; background-color: #676767}
.hr-white {border-top: 0; background-color: #FFF}

.mh-710 {min-height: 710px}
.mh-1100 {min-height: 1100px}


/* panel-pda does top and bottom, left/right handled by contentinner classes */
.panel-pad-xs {padding-top:40px; padding-bottom:40px;}
.panel-pad-sm {padding-top:65px; padding-bottom:65px;}
.panel-pad-md {padding-top:120px; padding-bottom:120px;}
.panel-pad-lg {padding-top:180px; padding-bottom:180px;}
.panel-pad-offset {padding-top:30px; padding-bottom:120px;}
.panel-pad-offset-lg {padding-top:75px; padding-bottom:110px;}
.panel-pad-all {padding:50px;}
.panel-pad-all-lrg {padding: 80px;}

.equation {max-width: 950px; margin: 0 auto; align-items: center !important}
.equation2 {max-width: 1150px; margin: 0 auto; align-items: center !important}
.wsc-col {border: 1px solid var(--brand-color-yellow); padding: 20px; color: var(--brand-color-yellow); border-radius: 10px; font-size: 16px; line-height: 1.2}

.cri {background: url('/wp-content/uploads/2026/08/arrow-down-large.svg') no-repeat center}
.cri p {color: var(--brand-grey-dark)}
.cri .offset-1 {padding-right: 21px}

.home-list p {border-top: 1px solid #C1C1C1; padding: 20px 0; margin: 0; line-height: 1; font-size: 25px; text-align: center}
.home-list p.last {border-bottom: 1px solid #C1C1C1}
.news-home {display: flex; gap: 8px}
.news-home article {width: 33.333%}
.news-home img {border-radius: 12px}
.news-home h3 {font-size: 30px; margin: 20px 0 0; padding-right: 25%}
.news-home h3 a {text-decoration: none}
.news-home p {margin-top: 50px; color: #8E8E8E}

.bg-ww {background: url('/wp-content/uploads/2026/08/ww-lrg-light.svg') no-repeat center}
.graphembed {width: 100%; height: 800px; padding: 0 40px}
.paler .wp-block-cover__image-background {opacity: 0.6}

.project-nav {background: #838383; gap: 10px; padding: 10px; width: 800px; border-radius: 12px; position: fixed; margin: 0 auto; left: 50%; right: 50%; bottom: 30px; transform: translate(-50%, -50%);}
.project-nav p {padding: 5% 10%; font-size: 16px; font-weight: 600; letter-spacing: 0.5px}
.project-nav p a {text-decoration: none;}

.hero-pj {min-height: 960px}
.hero-pj h1 {font-size: 60px; font-weight: 500; margin: 0; line-height: 1.2; text-align: center; color: #FFF; letter-spacing: 1px}
.hero-pj-aro {margin: 20px auto}

.projects-nav {width: 120px; margin: 0 auto; gap: 10px}
.projects-nav-r a, .projects-nav-l a {background: #EFEFEA; padding: 14px 15px 15px; border-radius: 40px; width: 55px; height: 55px; justify-content: center; display: flex !important}
.projects-nav-r a:hover, .projects-nav-l a:hover {background: #FFF}
.projects-nav-l figure {margin: 0 !important}

/* add class "zoom_image" to image to zoom (it appears on the surrounding figure tag) */
.zoom_image  {
  --img-scale: 1;
  --img-scale-transition-duration: 250ms;
  --img-scale-transition-function: ease-in-out;
  overflow: hidden;
}
.zoom_image > picture >img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  scale: var(--img-scale);
  transition:
    scale
    var(--img-scale-transition-duration)
    var(--img-scale-transition-function);
}
.zoom_image:hover > picture >img,
.zoom_image.mactive > picture >img {
  --img-scale: 1.1;
}
/* about us page animation */
.animated-panel, .animated-panel > div {position: relative;height: calc(100vh - 90px);height:calc(65vw + 350px); padding:0;margin: 0;width: 100%;overflow: hidden;}
.animated-panel .ap {transition: all 1s ease-out/*, height 1s ease-in, transform 1s ease-in, translate 1s ease-in*/;}
.animated-panel .ap {transition: all 1.5s cubic-bezier(0,0,0,1);}
.animated-panel .ap2 {transition: all 1s cubic-bezier(0,0,0,1);}
.animated-panel button {position: absolute;top:50%;left:50%;z-index: 10;}
.animated-panel .apc1{min-height:0;width:20vw;height:12vw;position:absolute;left:0;top:10vw;}
.animated-panel .apc2{min-height:0;width:16vw;height:15vw;position:absolute;right:0;top:17.9vw;}
.animated-panel .apc3{min-height:0;width:16vw;height:15vw;position:absolute;left:18%;top:33.5vw;}
.animated-panel .apc4{min-height:0;width:12vw;height:17vw;position:absolute;left:58%;top:42vw;}
.animated-panel .apc5{min-height:0;width:21vw;height:22vw;position:absolute;left:55%;top:0%;}
.animated-panel .apt1 {font-size:2.6rem;font-weight:300;position: absolute;top:5vw; left: 1vw; max-width: 50vw;}
.animated-panel .apt2,
.animated-panel .apt3,
.animated-panel .apt4 {position:absolute;left:-0.05vw;top:14.9vw;font-size:13vw;font-weight:100;color: #FFF;text-transform: uppercase;margin-bottom: 0;}
.animated-panel .apt3{left:auto;top:25.5vw;right:0.8vw}
.animated-panel .apt4{left:auto;top:36.1vw;right:0.4vw}
.animated-panel .aps1,
.animated-panel .aps2 {position:absolute;left:0;top:17vw;background-color: #fff;margin: 0;}
.animated-panel .aps2 {top:49.4vw;}
.animated-panel .ap-lower-content {margin-top:65vw;}
/* before the animation */
.animated-panel.off .apc1{min-height:0;width:20vw;height:12vw;transform: translate(-160%, -10%);}
.animated-panel.off .apc2{min-height:0;width:23vw;height:17vw;transform: translate(150%, -20%);}
.animated-panel.off .apc3{min-height:0;width:20vw;height:18vw;transform: translate(-300%, 300%);}
.animated-panel.off .apc4{min-height:0;width:13vw;height:24vw;transform: translate(350%, 100%);}
.animated-panel.off .apc5{min-height:0;width:15vw;height:24vw;transform: translate(50vw, 0);}
.animated-panel.off .apt2{transform: translate(-90vw, 0);}
.animated-panel.off .apt3{transform: translate(90vw, 0);}
.animated-panel.off .apt4{transform: translate(-110vw, 0);}

@media only screen and (max-width:991px) { /* bootstrap breakpoint (good for a single breakpoint between tablet landscape & portrait) */
	.animated-panel .apt1 {font-size:2.0rem;}
}
@media only screen and (max-width:700px) { /* tablet portrait (and below) */
	.animated-panel .apt1 {font-size: 2rem;max-width: none;font-weight: 500;}
}

/*
.animated-panel .apc1{min-height:0;width:370px;height:227px;position:absolute;top:190px;left:0;}
.animated-panel .apc2{min-height:0;width:382px;height:283px;position:absolute;top:10%;right:10%;}
.animated-panel .apc3{min-height:0;width:311px;height:288px;position:absolute;bottom:10%;left:10%;}
.animated-panel .apc4{min-height:0;width:227px;height:324px;position:absolute;bottom:10%;right:10%;}
.animated-panel .apc5{min-height:0;width:406px;height:423px;position:absolute;top:0%;left:55%;}
.animated-panel .apt1{}
.animated-panel .apt2{}
.animated-panel .apt3{}

.animated-panel.off{}
.animated-panel.off .apc1{min-height:0;width:370px;height:227px;transform: translate(-10%, -10%);}
.animated-panel.off .apc2{min-height:0;width:441px;height:326px;transform: translate(-10%, -10%);}
.animated-panel.off .apc3{min-height:0;width:378px;height:350px;transform: translate(-10%, -10%);}
.animated-panel.off .apc4{min-height:0;width:257px;height:461px;transform: translate(-10%, -10%);}
.animated-panel.off .apc5{min-height:0;width:281px;height:452px;transform: translate(50vw, 0);}
.animated-panel.off .apt1{}
.animated-panel.off .apt2{}
.animated-panel.off .apt3{}
*/



/* Footer */
.site-footer { background: #EFEFEA; display: flex; flex-direction: column; justify-content: space-between; padding: 60px 60px 30px}
.site-footer a {color: #000; text-decoration: none}
.site-footer ul {padding: 0}
.site-footer li {padding: 0; margin: 0 0 5px; line-height: 1.2; list-style: none; font-size: 15px}
.footer-r1 {gap: 35px}
.footer-r1 div {width: 350px}
.footer-r2 {justify-content: space-between; gap: 35px; align-items: flex-end}
.footer-r2-c1 {width: 350px}
.footer-r2-c1 p {font-size: 14px}
.footer-r2-c3 {width: 990px; text-align: right}


@media only screen and (max-width: 1366px) { 
	.main-navigation li {width: 115px; padding: 55px 10px 0; font-size: 15px}
	.site-branding {padding: 6px 20px}
	.mw-600 {max-width: 650px}
	.mw-50 {max-width: 80%}
	.mw-60 {max-width: 80%}
	.mw-80 {max-width: 90%}
	.lh-1 {line-height: 1.2}
	.fs-25 {font-size: 2.1rem}
	.fs-30 {font-size: 2.3rem}
	.fs-40, .fs-45 {font-size: 3.3rem}
	.fs-70 {font-size: 6rem}
	.fs-100 {font-size: 8rem}
	.site-footer {padding: 40px 20px 20px}
	.footer-r1 div {width: 250px}
	.footer-r2-c3 img {width: 350px}
	.gap-150 {gap: 70px}
	.sp-40 {height: 30px !important}
	.sp-60 {height: 50px !important}
	.sp-80 {height: 40px !important}
	.sp-120, .sp-100 {height: 60px !important}
	.sp-150 {height: 100px !important}
	.sp-180, .sp-200 {height: 130px !important}
	.sp-240 {height: 180px !important}
	.sp-350 {height: 200px !important}
	.wsc-col {padding: 15px}
	.hero-pj, .hero-pj .wp-block-cover {min-height: 660px!important}
	.project-nav {width: 60%}
	.project-nav p {font-size: 14px}
	.panel-pad-all-lrg {padding: 50px}
	.mh-710 {min-height: 580px}
}

@media only screen and (max-width:991px) {
  .panel-pad-xs {padding-top:20px;padding-bottom:20px;}
  .panel-pad-sm {padding-top:40px;padding-bottom:40px;}  /* eg round corner boxes */
  .panel-pad-md {padding-top:60px;padding-bottom:60px;}
  .panel-pad-lg {padding-top:80px;padding-bottom:80px;} /* eg quote blocks */
  .panel-pad-offset {padding-top:20px;padding-bottom:40px;}
  .panel-pad-offset-lg {padding-top:40px;padding-bottom:60px;}
  .panel-pad-all {padding:20px;}
  .mobile-width-xs {width:20px!important; height: auto!important;flex-basis: 20px !important;}
  .mobile-width-sm {width:40px!important; height: auto!important;flex-basis: 40px !important;}
  .mobile-width-md {width:60px!important; height: auto!important;flex-basis: 60px !important;}
  .mobile-width-lg {width:80px!important; height: auto!important;flex-basis: 80px !important;}
  .mobile-width-xl {width:100px!important; height: auto!important;flex-basis: 100px !important;}
}

@media only screen and (max-width: 834px) { /* tablet portrait (and below) */
	body {font-size: 1.5rem}
	.fs-20 {font-size: 1.5rem}
	.fs-22, .fs-25 {font-size: 1.65rem}
	.fs-30 {font-size: 1.85rem}
	h1.fs-30 {font-weight: 600}
	.fs-40, .fs-45 {font-size: 2.5rem}
	.fs-60, .fs-70 {font-size: 4.5rem}
	.fs-100 {font-size: 6rem}
	.fs-120 {font-size: 9rem}
	.gap-100 {gap: 50px}
	.gap-150 {gap: 20px}
	.sp-30 {height: 10px !important}
	.sp-70 {height: 40px !important}
	.sp-120, .sp-100 {height: 30px !important}
	.sp-150 {height: 60px !important}
	.sp-300 {height: 160px !important}
	.graphembed {height: 500px}
	.mw-60 {max-width: 90%}
	.mh-400 {min-height: 280px !important}
	.mh-710 {min-height: 470px}
	.mh-1100 {min-height: 800px}
	.panel-pad-all-lrg {padding: 20px}
	.wsc-cols {gap: 10px; padding: 10px}
	.wsc-col {font-size: 15px; padding: 10px}
	.h-a {height: 27px !important}
	.h-b {height: 19px !important}
	.h-c {height: 28px !important}
	.h-d {height: 19px !important}
	.h-e {height: 51px !important}
	.h-f {height: 59px !important}
	.cri-a {flex-basis: 13% !important}
	.cri-b, .cri-c {flex-basis: 18% !important}
	.news-home h3 {font-size: 22px; margin: 10px 0 0; padding-right: 0}
	.news-home p {margin: 10px 0 30px}
    .hero-pj, .hero-pj .wp-block-cover {min-height: 550px !important}
    .hero-pj h1 {font-size: 45px}
    .footer-r2-c1 {width: 450px}
    .projects-nav-r a, .projects-nav-l a {width: 45px; height: 45px}
}

@media only screen and (max-width: 781px) {	
	.gap-10 {gap: 20px}
	.project-nav {display: none !important}
}

@media only screen and (max-width:575px) {	
	.sp-30 {height:15px!important;}
	.sp-40 {height:20px!important;}
	.sp-60, .sp-70 {height:30px!important;}
	.sp-80 {height:40px!important;}
	.sp-100 {height:50px!important;}
	.sp-120 {height:60px!important;}
	.sp-180 {height:80px!important;}
	.sp-200, .sp-240 {height:80px!important;}
	.sp-300, .sp-350 {height:120px !important}
	.sp-600 {height:200px !important}

	.fs-20, .fs-22, .fs-25 {font-size: 1.7rem}
	.fs-27, .fs-30 {font-size: 1.8rem}
	h1.fs-30 {font-size: 2rem}
	.fs-40 {font-size: 2rem}
	.fs-45 {font-size: 2.5rem}
	.fs-60 {font-size: 3rem}
	.fs-70 {font-size: 3.5rem}
	.fs-100 {font-size: 4rem}
	.fs-200 {font-size: 120px}
	
	.gap-100 {gap: 40px}
	.gap-150 {gap: 30px}
	
	.lh-1 {line-height: 1}
	.pp .lh-1 {line-height: 1.25; font-weight: 400}
	.footer-r2-c1, .site-footer li {font-size: 13px; width: auto}
	.footer-r2-c1 p {font-size: 12px}
	.site-footer .flex {display: block}
	.footer-r1 img {margin-bottom: 20px}
	.footer-r2  {display: flex !important; flex-direction: column-reverse; align-items: flex-start;}
	.footer-r2-c3 {width: 100%; text-align: left}
	.footer-r2-c3 img {width: 60%; margin-top: 30px}
	.fw-light, .fw-300 {font-weight: 400}
	.home-list p {padding: 10px 0; font-size: 20px}
	.hero-home {min-height: 30vh !important}
	.equation {width: 150px; gap: 50px!important}
	.equation .sign img, .equation2 .sign img {width: 40px}
	.equation2 {max-width: 180px; gap: 30px}
	.cri {background: url('/wp-content/uploads/2026/08/arrow-down-large-light.svg') no-repeat center; background-position-y: 0px}
	.cri .has-text-align-right, .cri .has-text-align-left {text-align: center}
	.cri .offset-1 {padding-right: 13px}
	.cri .wp-block-columns {gap: 0}
	.cri .fd-cr {flex-direction: column-reverse}
	.wsc-cols {gap: 20px}
	.wsc-cols img {width: 30px}
	.wp-block-columns:not(.is-not-stacked-on-mobile) > .wp-block-column.wsc-col {padding: 10px; font-size: 14px; flex-basis: 44% !important}
	.hero-pj, .hero-pj .wp-block-cover {min-height: 500px!important}
	.hero-pj h1 {font-size: 30px}
	.pj-icon img {width: 35px}
	.mw-60, .mw-70, .mw-600, .mw-800, .mw-50, .mw-60, .mw-80, .mw-1050 {max-width: 100%}
	.home .mw-60 {max-width: 100%}
	.graphembed {width: 100%; height: 600px; padding: 0}
	.contentinnermax {padding: 10px}
	hr.contentinnermax {padding: 0}
	.mh-710 {min-height: 380px}
	.mh-1100 {min-height: 550px}
	.panel-pad-all-lrg {padding: 20px}
	:where(.wp-block-columns.is-layout-flex) {gap: 1em}
	.col-rev {flex-direction: column-reverse}
	.news-home {display: block}
	.news-home article {width: 100%}
	.logos {max-width: 200px; margin: 0 auto; gap: 30px}
	.mob-left figure {float: left !important}
	.video.contentinner-sm {padding: 0}
	.pl-20 {padding-left: 20px}
	.animated-panel {height: auto}
	.ap video, .ap picture {opacity: 0.5}
	.apt2, .apt3, .apt4 {right: auto !important}
	.animated-panel .apt1 {top: 1vw}
	.animated-panel .aps1 {top: 15vw}
	.animated-panel .aps2 {top: 51vw}
	.contentinner1700 {padding: 0}
}