/* interior-7 */

/*-- -------------------------- -->
<---      Interior Banner       -->
<--- -------------------------- -*/

/* A light "wall" with the page title on the left and a paint roller on the
   right that has just rolled a fresh stroke across it. */

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  :is(#interior, #interior-3, #interior-5, #interior-7, #interior-9, #interior-11) {
    /* tall enough below the nav (11rem here) for the roller's collar-to-foot span
       (0.57 of its height = 52vw at this width); changes at tablet and desktop */
    min-height: calc(11rem + 1.5rem + 52vw);
    /* top padding clears the fixed navigation */
    padding: var(--interiorPadding) 1rem clamp(3.75rem, 8vw, 6.25rem);
    background-color: #f7f7f7;
    /* with the container's auto margins, this centers the title in any extra height */
    display: flex;
    flex-direction: column;
    position: relative;
    z-index: 1;
    overflow: hidden;
  }
  :is(#interior, #interior-3, #interior-5, #interior-7, #interior-9, #interior-11) .cs-container {
    width: 100%;
    max-width: 80rem;
    margin: auto;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    position: relative;
    z-index: 2;
  }
  :is(#interior, #interior-3, #interior-5, #interior-7, #interior-9, #interior-11) .cs-int-title {
    /* a span, so it needs the heading font set explicitly */
    font-family: var(--headerFont);
    /* 39px - 64px */
    font-size: clamp(2.4375rem, 5.5vw, 4rem);
    font-weight: 700;
    line-height: 1.1em;
    text-align: left;
    /* changes to 55% at tablet, so the roller has the right side */
    max-width: 100%;
    margin: 0;
    color: var(--headerColor);
    position: relative;
  }
  :is(#interior, #interior-3, #interior-5, #interior-7, #interior-9, #interior-11) .cs-int-title:after {
    /* short brand-red rule under the title */
    content: "";
    width: 4rem;
    height: 0.25rem;
    margin-top: 1rem;
    border-radius: 0.25rem;
    background: var(--primary);
    display: block;
  }
  :is(#interior, #interior-3, #interior-5, #interior-7, #interior-9, #interior-11) .cs-roller {
    /* phones: half opacity behind the title (navy on the faded paint is ~10:1) */
    width: 64vw;
    height: auto;
    opacity: 0.5;
    display: block;
    position: absolute;
    right: -4%;
    /* the image runs 18% of its height past the roller head: 0.258 = 0.18 / (1048 / 1501) */
    bottom: calc(0.75rem - 64vw * 0.258);
    z-index: 1;
    pointer-events: none;
  }
  :is(#interior, #interior-3, #interior-5, #interior-7, #interior-9, #interior-11) .cs-roller img {
    width: 100%;
    height: auto;
    display: block;
  }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
  :is(#interior, #interior-3, #interior-5, #interior-7, #interior-9, #interior-11) {
    /* 12rem nav + 2.5rem breathing room + the roller's span (0.57 / 0.698 of its width) */
    min-height: calc(12rem + 2.5rem + 0.8166 * min(32vw, 24rem));
  }
  :is(#interior, #interior-3, #interior-5, #interior-7, #interior-9, #interior-11) .cs-int-title {
    max-width: 55%;
  }
  :is(#interior, #interior-3, #interior-5, #interior-7, #interior-9, #interior-11) .cs-roller {
    /* zoomed out so the grip, frame, and roller head all sit on the banner,
       right of the title (never behind it) */
    width: min(32vw, 24rem);
    opacity: 1;
    right: 2%;
    bottom: calc(1.5rem - min(32vw, 24rem) * 0.258);
  }
}
/* Small Desktop - 1024px */
@media only screen and (min-width: 64rem) {
  :is(#interior, #interior-3, #interior-5, #interior-7, #interior-9, #interior-11) {
    /* the desktop nav is 13rem tall */
    min-height: calc(13rem + 2.5rem + 0.8166 * min(32vw, 24rem));
  }
}
/* Dark Mode */
@media only screen and (min-width: 0rem) {
  body.dark-mode :is(#interior, #interior-3, #interior-5, #interior-7, #interior-9, #interior-11) {
    background-color: var(--medium);
  }
  body.dark-mode :is(#interior, #interior-3, #interior-5, #interior-7, #interior-9, #interior-11) .cs-int-title {
    color: var(--bodyTextColorWhite);
  }
}



/* interior-8 */
@media only screen and (min-width:0rem){:is(#interior-2, #interior-4, #interior-6, #interior-8, #interior-10, #interior-12){padding:var(--sectionPadding);background-color:#fff;overflow:hidden;position:relative;z-index:1}:is(#interior-2, #interior-4, #interior-6, #interior-8, #interior-10, #interior-12) .cs-container{width:100%;max-width:80rem;margin:auto;display:flex;flex-direction:column;align-items:center;gap:clamp(3rem,6vw,4rem);position:relative}:is(#interior-2, #interior-4, #interior-6, #interior-8, #interior-10, #interior-12) .cs-content{text-align:left;width:100%;max-width:46.125rem;display:flex;flex-direction:column;align-items:flex-start}:is(#interior-2, #interior-4, #interior-6, #interior-8, #interior-10, #interior-12) .cs-content img{width:100%;height:auto;margin:1rem 0;display:block}:is(#interior-2, #interior-4, #interior-6, #interior-8, #interior-10, #interior-12) h2,:is(#interior-2, #interior-4, #interior-6, #interior-8, #interior-10, #interior-12) h3,:is(#interior-2, #interior-4, #interior-6, #interior-8, #interior-10, #interior-12) h4,:is(#interior-2, #interior-4, #interior-6, #interior-8, #interior-10, #interior-12) h5,:is(#interior-2, #interior-4, #interior-6, #interior-8, #interior-10, #interior-12) h6{font-weight:700;text-align:inherit;margin:0 0 1rem 0;color:var(--headerColor)}:is(#interior-2, #interior-4, #interior-6, #interior-8, #interior-10, #interior-12) h2{font-size:2rem;margin-top:2rem}:is(#interior-2, #interior-4, #interior-6, #interior-8, #interior-10, #interior-12) h3{font-size:1.5rem;color:var(--primary)}:is(#interior-2, #interior-4, #interior-6, #interior-8, #interior-10, #interior-12) h4,:is(#interior-2, #interior-4, #interior-6, #interior-8, #interior-10, #interior-12) h5,:is(#interior-2, #interior-4, #interior-6, #interior-8, #interior-10, #interior-12) h6{font-size:1.25rem}:is(#interior-2, #interior-4, #interior-6, #interior-8, #interior-10, #interior-12) .cs-button-solid{margin:0.75rem 0 2rem 1.5rem}:is(#interior-2, #interior-4, #interior-6, #interior-8, #interior-10, #interior-12) .cs-color{color:var(--primary)}:is(#interior-2, #interior-4, #interior-6, #interior-8, #interior-10, #interior-12) p{font-size:var(--bodyFontSize);line-height:1.5em;text-align:inherit;width:100%;margin:0 0 1rem 0;color:var(--bodyTextColor)}:is(#interior-2, #interior-4, #interior-6, #interior-8, #interior-10, #interior-12) p:last-of-type{margin-bottom:2rem}:is(#interior-2, #interior-4, #interior-6, #interior-8, #interior-10, #interior-12) p a{font-size:inherit;line-height:inherit;text-decoration:underline;color:var(--primary)}:is(#interior-2, #interior-4, #interior-6, #interior-8, #interior-10, #interior-12) ol,:is(#interior-2, #interior-4, #interior-6, #interior-8, #interior-10, #interior-12) ul{padding-left:1.5rem;margin:0 0 2rem 0;color:var(--bodyTextColor);display:flex;flex-direction:column;gap:1rem}:is(#interior-2, #interior-4, #interior-6, #interior-8, #interior-10, #interior-12) ul li{list-style:none;color:inherit;position:relative}:is(#interior-2, #interior-4, #interior-6, #interior-8, #interior-10, #interior-12) ul li:before{content:"";width:3px;height:3px;background:currentColor;opacity:1;border-radius:50%;position:absolute;display:block;top:0.625rem;left:-0.75rem}:is(#interior-2, #interior-4, #interior-6, #interior-8, #interior-10, #interior-12) .cs-image-group{font-size:min(1vw,1em);width:33.875em;height:48.3125em;display:none;flex:none;position:relative;z-index:1}:is(#interior-2, #interior-4, #interior-6, #interior-8, #interior-10, #interior-12) .cs-picture{width:33.875em;height:40.4375em;border:1px solid #fff;border-radius:1rem;background-color:#f7f7f7;box-sizing:border-box;overflow:hidden;display:block;position:absolute;top:0;left:0}:is(#interior-2, #interior-4, #interior-6, #interior-8, #interior-10, #interior-12) .cs-picture img{width:100%;height:100%;object-fit:cover;position:absolute;top:0;left:0}:is(#interior-2, #interior-4, #interior-6, #interior-8, #interior-10, #interior-12) .cs-flower{width:22.625em;height:auto;display:block;position:absolute;bottom:-2.375em;right:-3em;z-index:-1;transform:rotate(142deg)}:is(#interior-2, #interior-4, #interior-6, #interior-8, #interior-10, #interior-12) .cs-sense{width:5em;height:auto;position:absolute;top:-0.25em;left:0.625em;transform:rotate(90deg)}:is(#interior-2, #interior-4, #interior-6, #interior-8, #interior-10, #interior-12) .cs-background{display:none}}@media only screen and (min-width:48rem){:is(#interior-2, #interior-4, #interior-6, #interior-8, #interior-10, #interior-12) .cs-container{flex-direction:row;align-items:flex-start}:is(#interior-2, #interior-4, #interior-6, #interior-8, #interior-10, #interior-12) .cs-image-group{display:block;order:-1}:is(#interior-2, #interior-4, #interior-6, #interior-8, #interior-10, #interior-12) .cs-content{margin-left:auto}:is(#interior-2, #interior-4, #interior-6, #interior-8, #interior-10, #interior-12) .cs-background{width:20%;height:100%;display:block;position:absolute;left:0;top:0;z-index:-1}:is(#interior-2, #interior-4, #interior-6, #interior-8, #interior-10, #interior-12) .cs-background img{width:100%;height:100%;opacity:0.2;object-fit:cover;position:absolute;top:0;left:0;z-index:1}}@media only screen and (min-width:81.25rem){:is(#interior-2, #interior-4, #interior-6, #interior-8, #interior-10, #interior-12) .cs-image-group{font-size:inherit;position:absolute;top:0rem;left:-6.25rem}:is(#interior-2, #interior-4, #interior-6, #interior-8, #interior-10, #interior-12) .cs-background{width:50%;margin-right:20.9375rem;left:auto;right:50%}}@media only screen and (min-width:0rem){body.dark-mode :is(#interior-2, #interior-4, #interior-6, #interior-8, #interior-10, #interior-12){background-color:var(--dark)}body.dark-mode :is(#interior-2, #interior-4, #interior-6, #interior-8, #interior-10, #interior-12) .cs-title,body.dark-mode :is(#interior-2, #interior-4, #interior-6, #interior-8, #interior-10, #interior-12) .cs-text,body.dark-mode :is(#interior-2, #interior-4, #interior-6, #interior-8, #interior-10, #interior-12) h2,body.dark-mode :is(#interior-2, #interior-4, #interior-6, #interior-8, #interior-10, #interior-12) h3,body.dark-mode :is(#interior-2, #interior-4, #interior-6, #interior-8, #interior-10, #interior-12) h4,body.dark-mode :is(#interior-2, #interior-4, #interior-6, #interior-8, #interior-10, #interior-12) h5,body.dark-mode :is(#interior-2, #interior-4, #interior-6, #interior-8, #interior-10, #interior-12) h6,body.dark-mode :is(#interior-2, #interior-4, #interior-6, #interior-8, #interior-10, #interior-12) li,body.dark-mode :is(#interior-2, #interior-4, #interior-6, #interior-8, #interior-10, #interior-12) p{color:var(--bodyTextColorWhite)}body.dark-mode :is(#interior-2, #interior-4, #interior-6, #interior-8, #interior-10, #interior-12) .cs-color,body.dark-mode :is(#interior-2, #interior-4, #interior-6, #interior-8, #interior-10, #interior-12) a:not(.cs-button-solid){color:var(--primaryLight)}body.dark-mode :is(#interior-2, #interior-4, #interior-6, #interior-8, #interior-10, #interior-12) p,body.dark-mode :is(#interior-2, #interior-4, #interior-6, #interior-8, #interior-10, #interior-12) li{color:#ebebeb}body.dark-mode :is(#interior-2, #interior-4, #interior-6, #interior-8, #interior-10, #interior-12) .cs-picture{border-color:var(--dark);background-color:var(--dark)}body.dark-mode :is(#interior-2, #interior-4, #interior-6, #interior-8, #interior-10, #interior-12) .cs-flower{filter:brightness(50%)}body.dark-mode :is(#interior-2, #interior-4, #interior-6, #interior-8, #interior-10, #interior-12) .cs-sense{filter:brightness(150%)}body.dark-mode :is(#interior-2, #interior-4, #interior-6, #interior-8, #interior-10, #interior-12) .cs-background{background-color:var(--medium);filter:brightness(70%)}body.dark-mode :is(#interior-2, #interior-4, #interior-6, #interior-8, #interior-10, #interior-12) .cs-background img{opacity:0.1}}