/* ── Homepage background arrows ── */
body.home #content {
  position: relative;
}
body.page-template-template-oway.mobile-menu-open #mobile-menu {
  display: flex !important;
}
#footer-top #inner #foot-3 a:hover{
    color: var(--dark) !important;
}



/* Global form submit button — applies to every form on the site */
form input[type="submit"],
form button[type="submit"],
form button:not([type]),
form .gform_button,
form .wpcf7-submit {
  display: inline-block;
  margin: 0;
  padding: 1rem 2rem;
  background-color: #104126;
  color: #fff;
  font-family: "Montserrat", sans-serif;
  font-size: 1rem;
  font-weight: 400;
  line-height: normal;
  text-align: center;
  text-decoration: none;
  border: 0.125rem solid #104126;
  border-radius: 0.375rem;
  cursor: pointer;
  transition: 0.3s;
  appearance: none;
}

form input[type="submit"]:hover,
form input[type="submit"]:focus,
form button[type="submit"]:hover,
form button[type="submit"]:focus,
form button:not([type]):hover,
form button:not([type]):focus,
form .gform_button:hover,
form .gform_button:focus,
form .wpcf7-submit:hover,
form .wpcf7-submit:focus {
  background-color: #fff;
  color: #104126;
}

form input[type="submit"]:disabled,
form button[type="submit"]:disabled,
form button:not([type]):disabled,
form .gform_button:disabled,
form .wpcf7-submit:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

body.locations-template-default #content #contact-info p a {
	font-weight: 800;
	color: #000;
}
body.locations-template-default #content #contact-info p a:hover{
	color: var(--dark) !important;
}

body.postid-21737 header.header #headerimage {
background-position: 10% center !important;
}


/* TEXT IN HOME HERO HIDDEN */
header #heroimage .swiper-slide .slide_text {display:none !important;}

.desktop-book-now-button {display: none;}
@media (min-width: 768px) {
    .desktop-book-now-button {
		display: block;
        
		border-radius: 6px;
    padding: 1.25rem 2rem;
		
		


        right: 50px;
        bottom: 50px;
   
    position: fixed;
   
    background-color: rgba(16, 65, 38, .65);

		

    text-transform: uppercase;
    text-align: center;
    color: #fff;
    letter-spacing: 2px;
    font-weight: 400;

    font-size: 15px;
		z-index: 4;
		transition: all .3s ease;
}
	.desktop-book-now-button:hover{
		background-color: rgba(16, 65, 38, 1);
		transition: all .3s ease;
	}
	
	.im-services .tier-headers .tier-header {
  word-spacing: 100vw;
}
}

/*#promos-inner #intro .intro-section{background-color: #104126!important;}*/

@media screen and (min-width: 1024px) {
  body.home #promos-inner #intro {
    top: 15px !important;
    padding-top: 0 !important;
  }
}


@media (min-width: 1024px) {
    #footer-top #inner {
        grid-template-columns: 40% 17% 17% 26%;
    }
	
	#foot-2, #foot-3, #foot-4 {
		margin-top: 2.4rem;
	}
}

#foot-1 .foot-column:nth-of-type(2) {
    max-width: 50px;
    margin: 0 auto;
}
	
#foot-1 .foot-column:first-of-type {
    width: 70%;
    margin: 0 auto;
}


@media screen and (max-width: 768px) {
  #footer-bottom {
    padding: 1rem 1rem 5rem 1rem;
  }
	#foot-1 .foot-column:first-of-type {
    width: 100%;
}
}

header #heroimage .swiper-slide .slide_text h2 {
	font-weight: bold;
}

.serv_wrapper > h2.im-services-subhead {
	font-family: "Roboto", sans-serif !important;
}

#heroimage .swiper-slide .slide_text a.button{
	    line-height: 1;
	padding: 0.7rem 2rem !important;
	font-weight: 300 !important;
	font-size: 1.3rem !important;
}

body.home h1 {
  text-transform: none;
  font-weight: 500;
  line-height: 1.1;
  margin-bottom: 0.8rem;
      font-size: 1.3rem;

  @media (min-width: 1024px) {
      font-size: 1.4rem;
  } 
}




body.home #intro h2.intro-title {
    font-weight: bold;
    font-size: 2.5rem;
    @media (min-width: 1024px) {
      font-size: 2.5rem;
      margin-bottom: 2rem;
  } 
}

#promos .promos-container .promo-box:hover .promo-text h2 {
    color: #fff !important;
}

body:not(.home) h1.page-title,
body:not(.home) h2,
#desktop-nav ul li.cta-link a,
#promos .promos-container .promo-box .promo-text h2 {
	font-weight: 500 !important;
}

#teamvalues .careers-card{
	background-color: #2E1203;
	color: #fff;
}

h2#betterthan {
	font-size: 2.5rem;
	
	@media screen and (max-width: 768px) {
		font-size: 1.6rem;
		padding-left: 24px;
		padding-right: 24px;
	}
}
/* services titles, descriptions and prices dark grey color! */
.serv_wrapper .im-service-row.has-description + .im-service-row.serv-desc-row,
    .serv_wrapper .im-service-row.serv-title-row .serv-title,
.serv_wrapper .im-service-row .im-serv-col.serv-price{
	color: #878884;
}
body:not(.home) #int-promos .promos-container .promo-box:nth-of-type(3),
body:not(.home) #int-promos .promos-container .promo-box:nth-of-type(1){
	margin-right: 0 !important;
}

body:not(.home) #int-promos .promos-container .promo-box:nth-of-type(2) {
	margin-left: 0 !important;
}

body:not(.home) #int-promos {
  background-image: url('/wp-content/uploads/2026/07/subfooter-bg-mobile-square.jpg');
	background-position: center center;
	background-size: cover;
	background-repeat: no-repeat;
	background-color: transparent;
}

@media (min-width: 768px) {
  body:not(.home) #int-promos {
    background-image: url('/wp-content/uploads/2026/06/26-60177817971-SplashImage-P1.jpg');
  }
}

@media (min-width: 1024px) {
    #intro .intro-section {
        width: 90%;
    }
}

#subfooter h2 {
	font-size: 2.5rem;
	font-weight: bold;
}

#foot-3 #contact-info .social_icons-component{
	display: none;
}



#promos .promos-container .promo-box:hover .mask {border-radius: 6px !important; }
#int-promos .promos-container .promo-box:hover .mask {border-radius: 6px !important; }


#mobile-menu .menu-primary-container{
	width: 100%;
}

/* Fix splash z-index so it appears above hero image */
body.home #splash {
  z-index: 10 !important;
}

.im-serv-col.serv-title .new-level {
  font-size: 1rem !important;
  font-weight: 500;
  text-transform: uppercase;
  /* color: #5A6D75 !important; */
  line-height: 1.1;
}

@media (min-width: 40em) {
  .serv_wrapper .im-service-row.serv-title-row,
  .serv_wrapper .im-service-row.serv-title-row.service-has-tiers,
  .serv_wrapper .tier-headers {
    grid-template-columns: 52% !important;
    
  }

  /* .serv_wrapper .im-service-row.serv-title-row.service-has-tiers,
  .serv_wrapper .im-service-row.serv-title-row.service-has-description {
border-bottom: 1px solid var(--primary);
    padding-bottom: 2rem;
  } */
   /* .serv_wrapper .im-service-row.serv-title-row.service-has-tiers,
   .serv_wrapper .im-service-row.serv-title-row.has-description + .serv-desc-row {
  border-bottom: 1px solid var(--primary);
  padding-bottom: 2rem;
} */

.serv_wrapper .im-service-row.serv-title-row.service-has-tiers:not(:has(+ .serv-desc-row)),
.serv_wrapper .serv-desc-row  {
  border-bottom: 1px solid var(--primary);
  padding-bottom: 1.2rem;
  margin-bottom: 1.2rem;
	align-items: center;
}

.serv_wrapper .im-service-row.serv-title-row,
.serv_wrapper .im-service-row.serv-title-row.service-has-tiers,
.serv_wrapper .tier-headers,
.serv_wrapper .im-service-row.serv-desc-row {
  grid-template-columns: 40% !important; /* try 35–45% and see what fits your longest service name */
}


        
}

/* Top-left: flipped so chevrons point RIGHT */
body.home #content::before {
  content: "";
  position: absolute;
  /* top: calc(100vh - 80px); */
  top: -12%;
  left: 0;
  width: 60%;
  height: 60%;
  background-image: url("/wp-content/uploads/2026/07/arrows_arrow1-scaled.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: left;
  /* transform: scaleX(-1);
  filter: brightness(0);
  opacity: 0.3; */
  z-index: 1;
  pointer-events: none;
}

/* Bottom-left: original orientation, chevrons point LEFT, peeks behind subfooter */
body.home #content::after {
  content: "";
  position: absolute;
  bottom: 25%;
  right: 0;
  width: 60%;
  height: 60%;
  background-image: url("/wp-content/uploads/2026/07/arrows_arrow2-scaled.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: right;
  z-index: 1;
  pointer-events: none;
}

#promos .promos-container,
.subfooter-container {
  z-index: 2;
  position: relative;
  background-color: transparent !important;
}
/* ──────────────────────────────── */

/* ── Typography: Roboto (headings) + Montserrat (body) ── */
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "Roboto", sans-serif !important;
}

body,
p,
ul,
ol,
li,
a,
div,
span,
label,
input,
textarea,
select,
button,
table,
td,
th,
caption,
blockquote,
figcaption {
  font-family: "Montserrat", sans-serif !important;
}
/* ──────────────────────────────────────────────────── */

/* ── Top-bar under splash on home page, then restore after splash ends ── */
body.home header #top-bar {
  z-index: 1;
  animation: topbar-zindex-restore 0s 2.25s forwards;
}
@keyframes topbar-zindex-restore {
  to {
    z-index: 45;
  }
}
/* ─────────────────────────────────────────────────────────────────────── */

/* ── Admin bar offset: theme header is position:fixed and otherwise sits
   under the always-on-top WP toolbar, hiding the hamburger behind
   "Howdy, [user]" for logged-in users. Real visitors never see this. ── */
body.admin-bar #top-bar {
  top: 32px;
}
@media screen and (max-width: 782px) {
  body.admin-bar #top-bar {
    top: 46px;
  }
}
/* ─────────────────────────────────────────────────────────────────────── */

/* ── Desktop nav / hamburger breakpoint (992px) ──
   display swaps abruptly at the breakpoint by default. The opacity +
   transition + "allow-discrete"/@starting-style rules below let the two
   crossfade smoothly (supported in current Chrome/Safari/Firefox); browsers
   without support just fall back to the original instant swap. */
#desktop-nav {
  display: none;
  opacity: 0;
  transition:
    opacity 0.25s ease,
    display 0.25s ease allow-discrete;
}
#desktop-nav ul {
  display: flex;
  gap: 1.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
  align-items: center;
}
#desktop-nav ul li {
  margin: 0;
}
#desktop-nav ul li a {
  font-family: var(--sans);
  /* font-size: 0.85rem; */
  font-size:  1rem;
  font-weight: 300;
  letter-spacing: 2px;
  /* text-transform: uppercase; */
  color: var(--light);
  text-decoration: none;
  transition: color 0.3s ease;
  white-space: nowrap;

  &.cta-link{
    font-weight: 700;
  }
}
#desktop-nav ul li a:hover {
  color: rgba(255, 255, 255, 0.8);
}
#desktop-nav ul li.current-menu-item > a,
#desktop-nav ul li.current_page_item > a {
  font-weight: 600;
}

/* #menuicon's base transition (all 0.5s ease-out) is declared in index.css
   with higher selector specificity, so it wins the cascade for everything
   except this one !important longhand, which turns on discrete-property
   transitions (needed so "display" can crossfade instead of popping). */
#menuicon {
  transition-behavior: allow-discrete !important;
}

@media (min-width: 992px) {
  #desktop-nav {
    display: flex;
    align-items: center;
    opacity: 1;
  }
  @starting-style {
    #desktop-nav {
      opacity: 0;
    }
  }
  #menuicon {
    display: none !important;
    opacity: 0;
  }
  .scrolled #top-bar .inner #desktop-nav ul li a {
    color: var(--light);
  }
  .scrolled #top-bar .inner #desktop-nav ul li a:hover {
    color: rgba(255, 255, 255, 0.8);
  }
  .scrolled #top-bar .inner #desktop-nav ul li .sub-menu li a {
    color: #000;
  }
  .scrolled #top-bar .inner #desktop-nav ul li .sub-menu li a:hover {
    color: var(--secondary);
  }

  #desktop-nav ul li.menu-item-has-children {
    position: relative;
  }
  #desktop-nav ul li .has-submenu-link {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
  }
  #desktop-nav ul li .submenu-indicator {
    font-size: 0.65em;
    transition: transform 0.3s ease;
  }
  #desktop-nav ul li .submenu-indicator.rotated {
    transform: rotate(180deg);
  }
  #desktop-nav ul li a.is-active-submenu {
    color: rgba(255, 255, 255, 0.8);
  }

  #desktop-nav ul li .sub-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 220px;
    margin: 0;
    padding: 0.5rem 0;
    list-style: none;
    background-color: var(--light);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.15);
    z-index: 50;
  }
  #desktop-nav ul li .sub-menu li {
    width: 100%;
  }
  #desktop-nav ul li .sub-menu li a {
    display: block;
    padding: 0.5rem 1.25rem;
    color: #000;
    text-transform: none;
    letter-spacing: 1px;
    font-size: 0.85rem;
    white-space: nowrap;
    background-color: transparent;
    transition:
      background-color 0.2s ease,
      color 0.2s ease;
  }
  #desktop-nav ul li .sub-menu li a:hover,
  #desktop-nav ul li .sub-menu li a:focus {
    background-color: rgba(0, 0, 0, 0.05);
  }
  #desktop-nav ul li .sub-menu li a:hover {
    color: #000;
  }
}

@media (max-width: 991px) {
  #desktop-nav {
    display: none !important;
    opacity: 0;
  }
  #menuicon {
    display: block !important;
    opacity: 1;
  }
  @starting-style {
    #menuicon {
      opacity: 0;
    }
  }
}
/* ────────────────────────────────────────────────── */

/* ── Center footer columns on mobile (below the 640px grid breakpoint).
   The location blocks, social icons, and footer nav are left-aligned by
   default for the desktop grid layout; center them when stacked on mobile.
   "html body" prefix is just there to out-specificity the existing
   left-align / !important rules in index.css without touching that file. */
@media (max-width: 639px) {
  #foot-1 .foot-column {
    display: flex;
    justify-content: center;
  }
  html body #footer-top #inner #foot-2,
  html body #footer-top #inner #foot-3,
  html body #footer-top #inner #foot-4 {
    text-align: center;
  }
  html body #footer-top #inner #foot-2 #contact-info p,
  html body #footer-top #inner #foot-3 #contact-info p {
    text-align: center;
  }
  html body #footer-top #inner #foot-2 .social_icons-component,
  html body #footer-top #inner #foot-3 .social_icons-component {
    text-align: center !important;
  }
  html body #footer-top #inner #foot-4 ul {
    padding: 0;
  }
  html body #footer-top #inner #foot-4 ul li,
  html body #footer-top #inner #foot-4 ul li a {
    text-align: center;
  }
}
/* ────────────────────────────────────────────────── */

/*
 * Theme Name: Imaginal Marketing Group
 * Description: Imaginal Marketing Group's custom theme based on Tailwind
 * Author: IMPP
 * Author URI: https://www.imaginalmarketing.com
 * Version: 1.0
*/
/* 
#wpcontent table.fixed {
    table-layout: auto !important;
}

#wpcontent  .fixed{
	position: auto !important;
} */
:root {
  --primary: #878884; /*blue */
  --secondary: #878884; /*gold*/
  --tertiary: #949078; /*brown*/
  --dark: #878884; /*dark green for text on button and in footer*/
  --light: #fff; /*background*/
  --sans: "Montserrat", sans-serif;
}

#int-promos .promos-container .promo-box .promo-box-img .promo-text {
  z-index: 10 !important;
}
#int-promos .promos-container .promo-box .promo-text h2 {
  z-index: 11 !important;
}
#int-promos .promos-container .promo-box:hover .promo-text h2 {
  z-index: 11 !important;
  color: #000 !important;
}

#heroimage .swiper-slide .slide_text a.button,
#promos a.button,
#subfooter a.button {
  padding-top: 1.25rem;
  padding-bottom: 1.25rem;
}
@media (max-width: 639px) {
  #heroimage .swiper-slide .slide_text a.button,
  #promos a.button,
  #subfooter a.button {
    padding-top: 1rem;
    padding-bottom: 1rem;
  }
}
#promos .promo-bg-large {
  background-color: var(--tertiary);
}

#promos .promos-container .promo-box .promo-text h2 {
  font-style: normal;
  letter-spacing: 3px;
}
body:not(.home) #int-promos .promos-container .promo-box .promo-text h2{
	font-weight: 500 !important;
}

body:not(.home) #int-promos .promos-container .promo-box .promo-text h2 {
  font-style: normal !important;
}

#mobile-menu ul.sub-menu li a {
  padding-right: 1.5rem;
}
#int-promos .promos-container .promo-box .promo-text h2 {
  font-size: 1.35rem;
}
body:not(.home) main h2 a:not(.button),
main h2 {
  background-color: transparent !important;
}

body.search article {
  margin-bottom: 2rem;
  border-bottom: 1px solid #000;
  padding-bottom: 2rem;
}
main p.blog-date {
  background-color: transparent !important;
}
body.category header {
  background-color: transparent !important;
}
body:not(.home) main h2 {
  font-size: 1.75rem;
  /* color: var(--secondary); */
}
body:not(.home) main h3 {
  color: #000;
  font-size: 1.5rem;
}

body:not(.home) p.disclaimer {
  font-size: 80%;
  font-style: italic;
  margin-bottom: 1.5rem;
}
body:not(.home) header img.splash-image {
  display: none;
}

body.blog header.header #headerimage,
body.single-post header.header #headerimage,
body.search #headerimage,
body.archive #headerimage {
  background-image: url(/wp-content/uploads/2026/07/26-60177817971-Interior-P1_4_reviews.webp) !important;
  background-position: center left 63% !important;
  background-size: cover;
  background-repeat: no-repeat;

}

blockquote {
  border-left: 1px solid var(--secondary);
  padding-left: 2rem;
  max-width: 650px;
  margin-bottom: 2rem;
}
h5.blockquote-text {
  font-size: 1.25rem;
  line-height: 1.4;
  color: var(--secondary);
}

@media (max-width: 39.9375em) {
  body.blog header.header #headerimage,
  body.single-post header.header #headerimage,
  body.search #headerimage,
  body.archive #headerimage {
    background-position: center left 45%;
  }
}

.gform_wrapper.gravity-theme input[type="color"],
.gform_wrapper.gravity-theme input[type="date"],
.gform_wrapper.gravity-theme input[type="datetime-local"],
.gform_wrapper.gravity-theme input[type="datetime"],
.gform_wrapper.gravity-theme input[type="email"],
.gform_wrapper.gravity-theme input[type="month"],
.gform_wrapper.gravity-theme input[type="number"],
.gform_wrapper.gravity-theme input[type="password"],
.gform_wrapper.gravity-theme input[type="search"],
.gform_wrapper.gravity-theme input[type="tel"],
.gform_wrapper.gravity-theme input[type="text"],
.gform_wrapper.gravity-theme input[type="time"],
.gform_wrapper.gravity-theme input[type="url"],
.gform_wrapper.gravity-theme input[type="week"],
.gform_wrapper.gravity-theme select,
.gform_wrapper.gravity-theme textarea {
  border: 1px solid var(--dark);
}
header #heroimage .swiper-slide.id-91 picture img {
  -o-object-fit: cover;
  object-fit: cover;
  height: 100%;
  width: 100%;
  object-position: 82% 50%;
}

body.blog article.tease-post {
  margin-bottom: 2.5rem;
}

article.post-type-post > img {
  width: 100% !important;
  height: auto !important;
}

.gform_fileupload_rules {
  font-weight: bold;
}

.gform_wrapper.gravity-theme .gform_drop_area {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: 100%;
  padding: 2rem;
  text-align: center;
  background-color: #a3bd00;
  background-color: #fff;
  border: 1px dashed #888;
  border-radius: 4px;
  margin: 0 !important;
}

#sidebar h4 {
  text-align: center !important;
}

body.single img.featured-img {
  max-width: 600px;
}

@media screen and (max-width: 39.9375em) {
  #sidebar ul,
  #sidebar ul li {
    margin-left: 0;
  }
  /* header #heroimage .swiper-slide .slide_text {
    bottom: 12%;
  } */
  #promos-container {
    padding-bottom: 2rem;
  }
  #subfooter h2 {
    padding-right: 3rem;
  }
}
@media (min-width: 64em) {
  #promos .promo-bg-large {
    aspect-ratio: unset !important;
    height: 450px !important;
  }
  #promos .promos-container {
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
  }
  /* 	#foot-2{width: 35% !important;}
	#foot-3{width: 40% !important;}
	#foot-4{width: 15% !important;}
	#foot-5{width: 10% !important;} */
}
@media (max-width: 63.9375em) {
  #footer-top #inner #foot-1 .foot-column img {
    display: block;
  }
}
@media (min-width: 64em) {
  #intro p {
    font-size: 1rem;
  }
  /* #intro .intro-section{width: 62%;} */
  #intro h2 {
    margin-top: 0;
    margin-bottom: 0.5rem;
  }
}
@media (min-width: 1400) {
  #promos .promo-bg-large {
    aspect-ratio: unset !important;
    height: 600px !important;
  }
}

@media (min-width: 1600) {
  #promos .promo-bg-large {
    aspect-ratio: unset !important;
    height: 600px !important;
  }
}

@media (max-width: 39.9375em) {
  #int-promos .promos-container .promo-box:nth-of-type(2),
  #int-promos .promos-container .promo-box:nth-of-type(1),
  #int-promos .promos-container .promo-box:nth-of-type(3) {
    margin-left: 0;
    margin-right: 0;
  }
}

/*To replace blog header
body.blog header.header #headerimage , body.single-post header.header #headerimage, body.category header.header #headerimage, body.search header.header #headerimage, body.archive header.header #headerimage  {
    background-position: center;
	background-image: url() !important;
}*/

#footer-top #inner #foot-3 #contact-info a {

    font-weight: 700;
}


@media screen and (max-width: 768px) {
	@media (max-width: 768px) {
  #oway-ecosystem {
    /* Set this to your mobile header height + desired spacing */
    scroll-margin-top: 90px;
  }
}
	
	
	#footer-top #inner #foot-3  {

    margin-bottom: 2rem !important;
}

	
	body.home #intro h2.intro-title {

    font-size: 1.7rem;
}
	
	#subfooter h2 {
        font-size: 1.7rem;
    }
	#footer-top #inner #foot-2,
	#footer-top #inner #foot-3
	{
    margin-bottom: 0;
		padding-bottom: 0;
}
	#footer-top #inner #foot-2 #contact-info,
	#footer-top #inner #foot-3 #contact-info {
		margin-bottom: 0;
		padding-bottom: 0;
}
	}
}
#headerimage{
	position: relative;
}
#headerimage::after {
    content: "";
    width: 100%;
    height: 150px;
    position: absolute;
    top: 0;
    left: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0));
    z-index: 2;
}




/* Added by bulk-add-css.sh 2026-09-28T19:04:18Z */
.page-template-template-social main .wrapper {
    max-width: 100%;
}


/*mobile video shorter */
@media (max-width: 767px) {
  header #heroimage,
  header #heroimage .swiper,
  header #heroimage .swiper-slide,
  header #heroimage .swiper-slide video {
    height: 70vh;
  }

  header #heroimage .swiper-slide video {
    width: 100%;
    object-fit: cover;
  }
}


/* ══════════════════════════════════════════════════════════════
   MOBILE ONLY (< 640px): service TITLE → DESCRIPTION → PRICES
   To revert, delete this whole block (down to the END marker).
   How it works: the title row is opened up (display: contents) so
   its title cell and price cells become items of the list, then
   each item gets an order based on its row position:
     title = 3n, description = 3n + 1, prices = 3n + 2
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 39.9375em) {
  .serv_wrapper .im-services {
    display: flex;
    flex-direction: column;
  }
  /* extra classes to out-rank the services plugin's display: grid */
  .serv_wrapper .im-services > .im-service-row.serv-title-row.has-description {
    display: contents;
  }

  /* spacing */
  .serv_wrapper .im-services > .has-description + .serv-desc-row {
    margin-top: 0.25rem;
    margin-bottom: 0.75rem;
  }
  .serv_wrapper .im-services > .im-service-row.serv-title-row.has-description > .serv-price:last-child {
    margin-bottom: 1.5rem;
  }

  .serv_wrapper .im-services > :nth-child(1), .serv_wrapper .im-services > :nth-child(1) > .serv-title { order: 3; }
  .serv_wrapper .im-services > :nth-child(1) > .serv-price { order: 5; }
  .serv_wrapper .im-services > :nth-child(2), .serv_wrapper .im-services > :nth-child(2) > .serv-title { order: 6; }
  .serv_wrapper .im-services > :nth-child(2) > .serv-price { order: 8; }
  .serv_wrapper .im-services > :nth-child(3), .serv_wrapper .im-services > :nth-child(3) > .serv-title { order: 9; }
  .serv_wrapper .im-services > :nth-child(3) > .serv-price { order: 11; }
  .serv_wrapper .im-services > :nth-child(4), .serv_wrapper .im-services > :nth-child(4) > .serv-title { order: 12; }
  .serv_wrapper .im-services > :nth-child(4) > .serv-price { order: 14; }
  .serv_wrapper .im-services > :nth-child(5), .serv_wrapper .im-services > :nth-child(5) > .serv-title { order: 15; }
  .serv_wrapper .im-services > :nth-child(5) > .serv-price { order: 17; }
  .serv_wrapper .im-services > :nth-child(6), .serv_wrapper .im-services > :nth-child(6) > .serv-title { order: 18; }
  .serv_wrapper .im-services > :nth-child(6) > .serv-price { order: 20; }
  .serv_wrapper .im-services > :nth-child(7), .serv_wrapper .im-services > :nth-child(7) > .serv-title { order: 21; }
  .serv_wrapper .im-services > :nth-child(7) > .serv-price { order: 23; }
  .serv_wrapper .im-services > :nth-child(8), .serv_wrapper .im-services > :nth-child(8) > .serv-title { order: 24; }
  .serv_wrapper .im-services > :nth-child(8) > .serv-price { order: 26; }
  .serv_wrapper .im-services > :nth-child(9), .serv_wrapper .im-services > :nth-child(9) > .serv-title { order: 27; }
  .serv_wrapper .im-services > :nth-child(9) > .serv-price { order: 29; }
  .serv_wrapper .im-services > :nth-child(10), .serv_wrapper .im-services > :nth-child(10) > .serv-title { order: 30; }
  .serv_wrapper .im-services > :nth-child(10) > .serv-price { order: 32; }
  .serv_wrapper .im-services > :nth-child(11), .serv_wrapper .im-services > :nth-child(11) > .serv-title { order: 33; }
  .serv_wrapper .im-services > :nth-child(11) > .serv-price { order: 35; }
  .serv_wrapper .im-services > :nth-child(12), .serv_wrapper .im-services > :nth-child(12) > .serv-title { order: 36; }
  .serv_wrapper .im-services > :nth-child(12) > .serv-price { order: 38; }
  .serv_wrapper .im-services > :nth-child(13), .serv_wrapper .im-services > :nth-child(13) > .serv-title { order: 39; }
  .serv_wrapper .im-services > :nth-child(13) > .serv-price { order: 41; }
  .serv_wrapper .im-services > :nth-child(14), .serv_wrapper .im-services > :nth-child(14) > .serv-title { order: 42; }
  .serv_wrapper .im-services > :nth-child(14) > .serv-price { order: 44; }
  .serv_wrapper .im-services > :nth-child(15), .serv_wrapper .im-services > :nth-child(15) > .serv-title { order: 45; }
  .serv_wrapper .im-services > :nth-child(15) > .serv-price { order: 47; }
  .serv_wrapper .im-services > :nth-child(16), .serv_wrapper .im-services > :nth-child(16) > .serv-title { order: 48; }
  .serv_wrapper .im-services > :nth-child(16) > .serv-price { order: 50; }
  .serv_wrapper .im-services > :nth-child(17), .serv_wrapper .im-services > :nth-child(17) > .serv-title { order: 51; }
  .serv_wrapper .im-services > :nth-child(17) > .serv-price { order: 53; }
  .serv_wrapper .im-services > :nth-child(18), .serv_wrapper .im-services > :nth-child(18) > .serv-title { order: 54; }
  .serv_wrapper .im-services > :nth-child(18) > .serv-price { order: 56; }
  .serv_wrapper .im-services > :nth-child(19), .serv_wrapper .im-services > :nth-child(19) > .serv-title { order: 57; }
  .serv_wrapper .im-services > :nth-child(19) > .serv-price { order: 59; }
  .serv_wrapper .im-services > :nth-child(20), .serv_wrapper .im-services > :nth-child(20) > .serv-title { order: 60; }
  .serv_wrapper .im-services > :nth-child(20) > .serv-price { order: 62; }
  .serv_wrapper .im-services > :nth-child(21), .serv_wrapper .im-services > :nth-child(21) > .serv-title { order: 63; }
  .serv_wrapper .im-services > :nth-child(21) > .serv-price { order: 65; }
  .serv_wrapper .im-services > :nth-child(22), .serv_wrapper .im-services > :nth-child(22) > .serv-title { order: 66; }
  .serv_wrapper .im-services > :nth-child(22) > .serv-price { order: 68; }
  .serv_wrapper .im-services > :nth-child(23), .serv_wrapper .im-services > :nth-child(23) > .serv-title { order: 69; }
  .serv_wrapper .im-services > :nth-child(23) > .serv-price { order: 71; }
  .serv_wrapper .im-services > :nth-child(24), .serv_wrapper .im-services > :nth-child(24) > .serv-title { order: 72; }
  .serv_wrapper .im-services > :nth-child(24) > .serv-price { order: 74; }
  .serv_wrapper .im-services > :nth-child(25), .serv_wrapper .im-services > :nth-child(25) > .serv-title { order: 75; }
  .serv_wrapper .im-services > :nth-child(25) > .serv-price { order: 77; }
  .serv_wrapper .im-services > :nth-child(26), .serv_wrapper .im-services > :nth-child(26) > .serv-title { order: 78; }
  .serv_wrapper .im-services > :nth-child(26) > .serv-price { order: 80; }
  .serv_wrapper .im-services > :nth-child(27), .serv_wrapper .im-services > :nth-child(27) > .serv-title { order: 81; }
  .serv_wrapper .im-services > :nth-child(27) > .serv-price { order: 83; }
  .serv_wrapper .im-services > :nth-child(28), .serv_wrapper .im-services > :nth-child(28) > .serv-title { order: 84; }
  .serv_wrapper .im-services > :nth-child(28) > .serv-price { order: 86; }
  .serv_wrapper .im-services > :nth-child(29), .serv_wrapper .im-services > :nth-child(29) > .serv-title { order: 87; }
  .serv_wrapper .im-services > :nth-child(29) > .serv-price { order: 89; }
  .serv_wrapper .im-services > :nth-child(30), .serv_wrapper .im-services > :nth-child(30) > .serv-title { order: 90; }
  .serv_wrapper .im-services > :nth-child(30) > .serv-price { order: 92; }
  .serv_wrapper .im-services > :nth-child(31), .serv_wrapper .im-services > :nth-child(31) > .serv-title { order: 93; }
  .serv_wrapper .im-services > :nth-child(31) > .serv-price { order: 95; }
  .serv_wrapper .im-services > :nth-child(32), .serv_wrapper .im-services > :nth-child(32) > .serv-title { order: 96; }
  .serv_wrapper .im-services > :nth-child(32) > .serv-price { order: 98; }
  .serv_wrapper .im-services > :nth-child(33), .serv_wrapper .im-services > :nth-child(33) > .serv-title { order: 99; }
  .serv_wrapper .im-services > :nth-child(33) > .serv-price { order: 101; }
  .serv_wrapper .im-services > :nth-child(34), .serv_wrapper .im-services > :nth-child(34) > .serv-title { order: 102; }
  .serv_wrapper .im-services > :nth-child(34) > .serv-price { order: 104; }
  .serv_wrapper .im-services > :nth-child(35), .serv_wrapper .im-services > :nth-child(35) > .serv-title { order: 105; }
  .serv_wrapper .im-services > :nth-child(35) > .serv-price { order: 107; }
  .serv_wrapper .im-services > :nth-child(36), .serv_wrapper .im-services > :nth-child(36) > .serv-title { order: 108; }
  .serv_wrapper .im-services > :nth-child(36) > .serv-price { order: 110; }
  .serv_wrapper .im-services > :nth-child(37), .serv_wrapper .im-services > :nth-child(37) > .serv-title { order: 111; }
  .serv_wrapper .im-services > :nth-child(37) > .serv-price { order: 113; }
  .serv_wrapper .im-services > :nth-child(38), .serv_wrapper .im-services > :nth-child(38) > .serv-title { order: 114; }
  .serv_wrapper .im-services > :nth-child(38) > .serv-price { order: 116; }
  .serv_wrapper .im-services > :nth-child(39), .serv_wrapper .im-services > :nth-child(39) > .serv-title { order: 117; }
  .serv_wrapper .im-services > :nth-child(39) > .serv-price { order: 119; }
  .serv_wrapper .im-services > :nth-child(40), .serv_wrapper .im-services > :nth-child(40) > .serv-title { order: 120; }
  .serv_wrapper .im-services > :nth-child(40) > .serv-price { order: 122; }
  .serv_wrapper .im-services > .has-description + .serv-desc-row:nth-child(2) { order: 4; }
  .serv_wrapper .im-services > .has-description + .serv-desc-row:nth-child(3) { order: 7; }
  .serv_wrapper .im-services > .has-description + .serv-desc-row:nth-child(4) { order: 10; }
  .serv_wrapper .im-services > .has-description + .serv-desc-row:nth-child(5) { order: 13; }
  .serv_wrapper .im-services > .has-description + .serv-desc-row:nth-child(6) { order: 16; }
  .serv_wrapper .im-services > .has-description + .serv-desc-row:nth-child(7) { order: 19; }
  .serv_wrapper .im-services > .has-description + .serv-desc-row:nth-child(8) { order: 22; }
  .serv_wrapper .im-services > .has-description + .serv-desc-row:nth-child(9) { order: 25; }
  .serv_wrapper .im-services > .has-description + .serv-desc-row:nth-child(10) { order: 28; }
  .serv_wrapper .im-services > .has-description + .serv-desc-row:nth-child(11) { order: 31; }
  .serv_wrapper .im-services > .has-description + .serv-desc-row:nth-child(12) { order: 34; }
  .serv_wrapper .im-services > .has-description + .serv-desc-row:nth-child(13) { order: 37; }
  .serv_wrapper .im-services > .has-description + .serv-desc-row:nth-child(14) { order: 40; }
  .serv_wrapper .im-services > .has-description + .serv-desc-row:nth-child(15) { order: 43; }
  .serv_wrapper .im-services > .has-description + .serv-desc-row:nth-child(16) { order: 46; }
  .serv_wrapper .im-services > .has-description + .serv-desc-row:nth-child(17) { order: 49; }
  .serv_wrapper .im-services > .has-description + .serv-desc-row:nth-child(18) { order: 52; }
  .serv_wrapper .im-services > .has-description + .serv-desc-row:nth-child(19) { order: 55; }
  .serv_wrapper .im-services > .has-description + .serv-desc-row:nth-child(20) { order: 58; }
  .serv_wrapper .im-services > .has-description + .serv-desc-row:nth-child(21) { order: 61; }
  .serv_wrapper .im-services > .has-description + .serv-desc-row:nth-child(22) { order: 64; }
  .serv_wrapper .im-services > .has-description + .serv-desc-row:nth-child(23) { order: 67; }
  .serv_wrapper .im-services > .has-description + .serv-desc-row:nth-child(24) { order: 70; }
  .serv_wrapper .im-services > .has-description + .serv-desc-row:nth-child(25) { order: 73; }
  .serv_wrapper .im-services > .has-description + .serv-desc-row:nth-child(26) { order: 76; }
  .serv_wrapper .im-services > .has-description + .serv-desc-row:nth-child(27) { order: 79; }
  .serv_wrapper .im-services > .has-description + .serv-desc-row:nth-child(28) { order: 82; }
  .serv_wrapper .im-services > .has-description + .serv-desc-row:nth-child(29) { order: 85; }
  .serv_wrapper .im-services > .has-description + .serv-desc-row:nth-child(30) { order: 88; }
  .serv_wrapper .im-services > .has-description + .serv-desc-row:nth-child(31) { order: 91; }
  .serv_wrapper .im-services > .has-description + .serv-desc-row:nth-child(32) { order: 94; }
  .serv_wrapper .im-services > .has-description + .serv-desc-row:nth-child(33) { order: 97; }
  .serv_wrapper .im-services > .has-description + .serv-desc-row:nth-child(34) { order: 100; }
  .serv_wrapper .im-services > .has-description + .serv-desc-row:nth-child(35) { order: 103; }
  .serv_wrapper .im-services > .has-description + .serv-desc-row:nth-child(36) { order: 106; }
  .serv_wrapper .im-services > .has-description + .serv-desc-row:nth-child(37) { order: 109; }
  .serv_wrapper .im-services > .has-description + .serv-desc-row:nth-child(38) { order: 112; }
  .serv_wrapper .im-services > .has-description + .serv-desc-row:nth-child(39) { order: 115; }
  .serv_wrapper .im-services > .has-description + .serv-desc-row:nth-child(40) { order: 118; }
}
/* ═══════════════ END mobile description-first ═══════════════ */

/* Screens above 1440px: breathing room between tier columns
   (header + matching price cells so they stay aligned) */
@media (min-width: 89.9375em) {
  .serv_wrapper .tier-headers .tier-header:not(:first-child),
  .serv_wrapper .im-service-row.serv-title-row .serv-price {
    padding-left: 0.75rem;
  }
}

/* Mobile: gap between tier label and price so long labels
   ("Creative Director") don't touch the price */
@media (max-width: 39.9375em) {
  .serv_wrapper .im-service-row.serv-title-row .serv-price {
    column-gap: 1rem;
  }
}