@font-face {
  font-family: LatoR;
  src: url('../fonts/Lato-Medium.woff2') format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: MontserratR;
  src: url('../fonts/Montserrat-Bold.woff2') format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: MontserratR;
  src: url('../fonts/Montserrat-Semi.woff2') format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: MontserratR;
  src: url('../fonts/Montserrat-Medium.woff2') format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: LatoR;
  src: url('../fonts/Lato-Bold.ttf') format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: LatoR;
  src: url('../fonts/Lato-Regular.ttf') format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  --section: 94%;
  --section-width: 73rem;
  --main: #151515;
  --primary: #cc491e;
  --relume-library-lite--rl-white: white;
  --round: 3px;
  --secondary: #343434;
  --secondarywhite: #ffffffe6;
  --line: #d2d2d2;
  --orange-gradient: #ebeeff;
  --smallsection: 60rem;
  --kütüp-library--dim-grey: #6e6e6e;
  --policy-text: #343434;
  --light-green: #ffebca;
  --dark-green: #001f07;
  --relume-library-lite--rl-black: black;
  --kütüp-library--burntsienna: #e76f51;
  --kütüp-library--dark-slate-grey: #264653;
}

.w-layout-grid {
  grid-row-gap: 16px;
  grid-column-gap: 16px;
  grid-template-rows: auto auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  display: grid;
}

.w-layout-vflex {
  flex-direction: column;
  align-items: flex-start;
  display: flex;
}

.w-layout-hflex {
  flex-direction: row;
  align-items: flex-start;
  display: flex;
}

body {
  color: #333;
  font-family: Arial, Helvetica Neue, Helvetica, sans-serif;
  font-size: 14px;
  line-height: 20px;
}

.navbar-logo-left {
  z-index: 2;
  position: sticky;
  top: 0;
}

.navbar-logo-left-container {
  z-index: 5;
  background-color: #0000;
  width: 1030px;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding: 15px 20px;
}

.navbar-logo-left-container.shadow-three {
  background-color: #fff;
  width: 100%;
  margin-bottom: 0;
  padding: 15px 0;
  position: sticky;
  top: 0;
}

.navbar-logo-left-container.shadow-three:where(.w-variant-5ce01ffb-dde1-17b1-308f-68f0c7ba4095) {
  padding-top: 14px;
  padding-bottom: 14px;
}

.container {
  width: var(--section);
  max-width: var(--section-width);
  margin-left: auto;
  margin-right: auto;
}

.navbar-wrapper {
  justify-content: space-between;
  align-items: center;
  display: flex;
}

.navbar-brand:where(.w-variant-5ce01ffb-dde1-17b1-308f-68f0c7ba4095) {
  margin-left: auto;
  margin-right: auto;
}

.nav-menu-two {
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0;
  display: flex;
}

.nav-menu-two:where(.w-variant-5ce01ffb-dde1-17b1-308f-68f0c7ba4095) {
  display: none;
}

.nav-link {
  color: var(--main);
  letter-spacing: 0;
  margin-left: 3px;
  margin-right: 3px;
  padding: 5px 10px;
  font-family: MontserratR, Arial, sans-serif;
  font-size: 16px;
  font-weight: 500;
  line-height: 20px;
  text-decoration: none;
}

.nav-link:hover {
  color: var(--primary);
}

.nav-link:focus-visible, .nav-link[data-wf-focus-visible] {
  outline-offset: 0px;
  border-radius: 4px;
  outline: 2px solid #0050bd;
}

.buttonstyle {
  background-color: var(--primary);
  letter-spacing: -.2px;
  border-radius: 2px;
  padding: 20px;
  font-family: MontserratR, Arial, sans-serif;
  font-size: 18px;
  font-weight: 600;
  box-shadow: 0 2px 8px #63636333;
}

.buttonstyle.herobutton {
  margin-right: auto;
  padding-left: 2.4rem;
  padding-right: 2.4rem;
}

.buttonstyle.herobutton.secondary {
  background-color: var(--relume-library-lite--rl-white);
  color: var(--main);
  box-shadow: none;
  border: 1px solid #d2d2d2;
  padding-top: 19px;
  padding-bottom: 19px;
}

.buttonstyle.herobutton.servicepageitem {
  margin-left: 0;
  padding: 19px 1.2rem;
}

.buttonstyle.form {
  width: 100%;
}

.buttonstyle.finalcta {
  padding-left: 3rem;
  padding-right: 3rem;
}

.buttonstyle.headerbutton {
  padding: 18px 20px;
  font-size: 17px;
}

.body {
  color: var(--main);
  font-family: LatoR, sans-serif;
  font-weight: 500;
}

.image {
  border-top-left-radius: var(--round);
  border-top-right-radius: var(--round);
  border-bottom-left-radius: var(--round);
  border-bottom-right-radius: var(--round);
  object-fit: cover;
  object-position: 50% 30%;
  width: 100%;
  height: 27rem;
  box-shadow: 0 2px 8px #63636333;
}

.image.serviceimg {
  aspect-ratio: 1;
  object-position: 50% 50%;
  height: auto;
}

.image.serviceimg.upper {
  object-position: 50% 30%;
}

.image.serviceimg.upper.ty {
  aspect-ratio: 3 / 2;
}

.image.serviceimg.middle {
  object-position: 50% 42%;
}

.image.serviceimg.middle.ty {
  aspect-ratio: 3 / 2;
}

.image.serviceimg.lilup {
  object-position: 50% 45%;
}

.image.serviceimg.short {
  aspect-ratio: 2;
}

.image.serviceimg.short.low {
  object-position: 50% 69%;
}

.image.serviceimg.ty {
  aspect-ratio: 3 / 2;
  object-position: 50% 43%;
}

.image.galleryimg {
  aspect-ratio: 4 / 3;
  object-position: 50% 50%;
  max-width: none;
  height: auto;
  position: static;
}

.image.galleryimg.galpage {
  aspect-ratio: 3 / 2;
  object-position: 50% 50%;
}

.image.galleryimg.galpage.ll {
  object-position: 50% 62%;
}

.image.galleryimg.middle {
  object-position: 50% 38%;
}

.image.galleryimg.middle.low {
  object-position: 50% 46%;
}

.image.galleryimg.loq {
  object-position: 50% 62%;
}

.image.aboutimg {
  aspect-ratio: 2 / 3;
  object-position: 50% 100%;
  height: auto;
}

.image.aboutimg.home {
  aspect-ratio: 1;
}

.image.servicepage {
  aspect-ratio: 3 / 2;
  object-position: 50% 44%;
  height: auto;
}

.image.servicepage.middle {
  object-position: 50% 42%;
}

.image.servicepage.low {
  object-position: 50% 51%;
}

.image.review-image {
  height: auto;
  box-shadow: none;
  margin-top: 1rem;
}

.image.review-image.ratio {
  aspect-ratio: 4 / 5.15;
}

.grid {
  grid-column-gap: 0rem;
  grid-row-gap: 0rem;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr;
  place-items: center;
}

.flex-block {
  max-width: 30rem;
  padding-top: 6rem;
  padding-bottom: 6rem;
}

.hero {
  text-align: center;
  letter-spacing: -1.7px;
  margin-top: 0;
  font-family: MontserratR, Arial, sans-serif;
  font-size: 3.06rem;
  font-weight: 700;
  line-height: 1.1;
}

.hero.h2 {
  margin-bottom: 2.2rem;
  font-size: 2.4rem;
}

.hero.h2.left {
  text-align: left;
  max-width: 32rem;
  margin-bottom: 1.2rem;
}

.hero.h2.finalcta {
  color: var(--relume-library-lite--rl-white);
  margin-top: 26px;
  margin-bottom: .8rem;
}

.hero.h2.maxwidth {
  max-width: 35rem;
  margin-left: auto;
  margin-right: auto;
}

.hero.h3 {
  text-align: left;
  letter-spacing: -.5px;
  margin-top: 24px;
  margin-bottom: 15px;
  font-size: 1.37rem;
}

.hero.h3.footer {
  margin-top: 0;
}

.hero.herosection {
  text-align: left;
  margin-top: 36px;
  font-size: 2.7rem;
}

.hero.herosection.nowreviews-above {
  margin-top: 0;
}

.hero.herosection.white {
  color: var(--relume-library-lite--rl-white);
}

.hero.h2-5 {
  text-align: left;
  letter-spacing: -1.5px;
  font-size: 1.8rem;
}

.herop {
  color: var(--secondary);
  text-align: left;
  margin-top: .4rem;
  margin-bottom: 2.4rem;
  font-size: 20px;
  line-height: 1.5;
}

.herop.locationpage {
  margin-bottom: .3rem;
}

.herop.left.about-page {
  font-size: 17px;
}

.herop.white {
  max-width: 25rem;
  color: var(--secondarywhite);
}

.hero-section {
  border-bottom: 1px solid var(--line);
  /* --hero-bg lets each page carry its own photo (owner, Sep 9 2026); the
     homepage's own file is the fallback. */
  background-image: linear-gradient(99deg, #000000cf, #000000ba 38%, #fff0 68%), var(--hero-bg, url('../images/hero-portapotty-bg.avif'));
  /* hero-portapotty-bg.avif is the 3024x4032 original cropped to the band this
     section actually shows - 0.20 to 0.76 of the height, centred on the point
     the old 48% anchor picked - then resized to 2400 wide. The crop is centred,
     so the vertical anchor is now 50%. */
  /* --hero-pos keeps the unit in the band when the full-width photo is used
     (the panel only ever crops vertically) */
  background-position: 0 0, var(--hero-pos, 50% 50%);
  background-size: auto, cover;
  width: 100%;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
}

.text-span {
  color: var(--primary);
}

.flex-block-2 {
  grid-column-gap: .7rem;
  grid-row-gap: .7rem;
  margin-right: auto;
}

.section {
  width: var(--section-width);
  max-width: var(--section);
  margin-left: auto;
  margin-right: auto;
  padding-top: 6.5rem;
  padding-bottom: 0;
}

.section.finalcta {
  border: 1px solid var(--line);
  border-radius: var(--round);
  background-color: var(--orange-gradient);
  background-image: linear-gradient(#000000ab, #000000ab), url('../images/portapotty15.avif');
  background-position: 0 0, 50% 20%;
  background-size: auto, cover;
  margin-top: 5rem;
  margin-bottom: 1rem;
  padding-top: 4rem;
  padding-bottom: 4rem;
}

.section.ownpage {
  padding-top: 3rem;
}

.section.serviceitems {
  width: var(--smallsection);
}

.section.thankyoupagefaq {
  padding-bottom: .4rem;
}

.servicegrid {
  grid-column-gap: 1rem;
  grid-row-gap: 1rem;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr;
}

.servicegrid.rs {
  grid-column-gap: 1rem;
  grid-row-gap: 1rem;
  grid-template-columns: 1fr 1fr 1fr;
}

.servicegrid.thankyoupage {
  grid-template-columns: 1fr 1fr 1fr;
}

.p {
  color: var(--secondary);
  padding-right: 0;
  font-size: 19px;
  line-height: 1.6;
}

.p.left {
  max-width: 30rem;
  margin-bottom: 40px;
}

.p.left.center {
  color: var(--secondarywhite);
  text-align: center;
  margin-bottom: 30px;
  margin-left: auto;
  margin-right: auto;
}

.p.left.map {
  margin-bottom: 24px;
}

.p.left.serviceitem {
  margin-top: 10px;
  margin-bottom: 25px;
}

.p.rs {
  margin-bottom: 0;
  font-size: 16.5px;
}

.p.services {
  margin-bottom: 13px;
  font-size: 17px;
}

.p.citylist {
  color: var(--secondary);
  padding-right: 34px;
  font-size: 17px;
  font-weight: 700;
  line-height: 2.7;
}

.serviceimg {
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

.flex-block-3 {
  border: 1px solid var(--line);
  border-radius: var(--round);
  background-color: #fff;
  padding: 1.2rem;
}

.flex-block-3.rs {
  width: 100%;
  padding: 1.4rem;
  position: relative;
}

.gallerygrid {
  grid-column-gap: .8rem;
  grid-row-gap: .8rem;
  grid-template-rows: auto auto;
  grid-template-columns: 1fr 1fr 1fr;
}

.grid-3 {
  grid-column-gap: 6rem;
  grid-row-gap: 6rem;
  grid-template-rows: auto;
  place-items: start;
}

.grid-3.about.aboutpage {
  grid-column-gap: 4rem;
  grid-row-gap: 4rem;
}

.grid-3.privacypolicy {
  grid-column-gap: 2rem;
  grid-row-gap: 2rem;
  grid-template-columns: 1fr;
}

.text-field {
  border-top-left-radius: var(--round);
  border-top-right-radius: var(--round);
  border-bottom-left-radius: var(--round);
  border-bottom-right-radius: var(--round);
  color: var(--main);
  resize: none;
  margin-bottom: 1.5rem;
  font-size: 17px;
  box-shadow: 0 2px 8px #63636333;
}

.text-field:active {
  color: var(--primary);
}

.text-field::placeholder {
  color: #636363;
}

.field-label {
  margin-bottom: 3px;
  font-size: 17px;
  font-weight: 500;
}

.logo {
  width: 12rem;
  margin-left: 0;
}

.footer-light {
  margin-top: 22px;
  padding: 80px 30px 28px;
  position: relative;
}

.footer-light:where(.w-variant-01b5a289-ac54-c464-547e-5395bf3eb7ae) {
  margin-top: 0;
  padding-top: 40px;
}

.footer-wrapper-two {
  justify-content: space-between;
  align-items: flex-start;
  margin-left: auto;
  margin-right: auto;
  display: flex;
}

.footer-wrapper-two:where(.w-variant-01b5a289-ac54-c464-547e-5395bf3eb7ae) {
  display: none;
}

.footer-block-two {
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  display: flex;
}

.footer-divider-two {
  background-color: #e4ebf3;
  width: 100%;
  height: 1px;
  margin-top: 40px;
  margin-bottom: 28px;
}

.footer-divider-two:where(.w-variant-01b5a289-ac54-c464-547e-5395bf3eb7ae) {
  margin-top: 4rem;
  display: none;
}

.reviewcontainer {
  justify-content: flex-start;
  align-items: center;
  margin-top: -8px;
}

.reviewcontainer.heroreview {
  margin-top: 0;
  margin-bottom: 0;
}

.reviewcontainer.rs {
  margin-top: 0;
  margin-bottom: 1rem;
}

.featuredpfp {
  border-radius: 10rem;
  width: 41px;
  margin-top: auto;
  margin-bottom: auto;
}

.featuredpfp.rs {
  width: 41px;
}

.featuredpfp.rs.g {
  border-radius: 0;
}

.flex-block-4 {
  grid-row-gap: 7px;
  margin-left: 8px;
}

.flex-block-4.reviewbox {
  grid-row-gap: 6px;
  margin-left: 8px;
}

.starimg {
  filter: brightness(0) saturate() invert(57%) sepia(90%) saturate(522%) hue-rotate(3deg) brightness(112%) contrast(97%);
  width: 20px;
  margin-top: 0;
  margin-right: 1px;
}

.starimg.rs {
  width: 18px;
}

.featuredreviewstext {
  color: var(--secondary);
  margin-top: 0;
  margin-left: 0;
  font-size: 15px;
  line-height: 1;
  text-decoration: none;
}

.featuredreviewstext.rs {
  color: var(--main);
  margin-left: 1px;
  font-family: MontserratR, sans-serif;
  font-size: 15.5px;
  font-weight: 600;
}

.featuredreviewstext.white {
  color: var(--secondarywhite);
}

.reviewflexholder {
  grid-column-gap: 1.6rem;
  grid-row-gap: 1.6rem;
  grid-template-rows: auto auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  width: fit-content;
  margin-bottom: 0;
  margin-right: auto;
  display: flex;
}

.form-block-2 {
  width: 100%;
  margin-bottom: 0;
}

.fud {
  grid-column-gap: 6px;
  grid-row-gap: 6px;
  justify-content: flex-start;
  align-items: center;
}

.fud.contactpage {
  grid-column-gap: 9px;
  grid-row-gap: 9px;
}

.fudimg {
  filter: brightness(0) saturate() invert(32%) sepia(24%) saturate(4291%) hue-rotate(349deg) brightness(99%) contrast(91%);
  border-radius: 100px;
  width: 18px;
}

.fudtext {
  color: var(--secondary);
  margin-top: 1px;
  font-size: 17px;
}

.fudtext.list {
  margin-top: 0;
  font-size: 18px;
}

.fudtext.white {
  color: var(--secondarywhite);
}

.flex-block-6 {
  grid-column-gap: 1rem;
  grid-row-gap: 1rem;
  margin-top: 1rem;
}

.flex-block-6.form {
  justify-content: center;
  align-items: center;
}

.flex-block-6.form.contactpage {
  grid-column-gap: 1.1rem;
  grid-row-gap: 1.1rem;
  flex-flow: column;
  justify-content: center;
  align-items: flex-start;
  margin-top: 0;
  margin-bottom: 50px;
}

.flex-block-6.finalcta {
  justify-content: center;
  align-items: center;
}

.kutup-large-container {
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  position: relative;
}

.kutup-max-w-width-640px {
  text-align: center;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  max-width: 640px;
  margin-top: 3.3rem;
  margin-left: auto;
  margin-right: auto;
  display: flex;
}

.kutup-faq-content {
  text-align: left;
  padding-top: 20px;
  padding-left: 0;
  padding-right: 20px;
}

.kutup-faq-item {
  perspective-origin: 50% 0;
  transform-origin: 50% 0;
  overflow: hidden;
}

.kutup-stripe-1 {
  background-color: var(--main);
  width: 2px;
  height: 100%;
}

.kutup-stripe-2 {
  background-color: var(--main);
  width: 100%;
  height: 2px;
  position: absolute;
}

.kutup-faq-wrapper {
  cursor: pointer;
  margin-bottom: 10px;
  line-height: 1.6em;
  overflow: hidden;
}

.kutup-faq-componenet {
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
}

.kutup-faq-title-content {
  text-align: left;
  flex: 1;
  padding-top: 20px;
  padding-bottom: 20px;
}

.kutup-faq-title {
  color: var(--main);
  font-size: 19px;
  font-weight: 700;
}

.kutup-faq-icon {
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 40px;
  display: flex;
  position: relative;
}

.kutup-faq-top-part {
  background-color: #fff;
  border-bottom: 1px solid #29335c26;
  align-items: center;
  display: flex;
}

.kutup-faq-plus-icon {
  justify-content: center;
  align-items: center;
  width: 16px;
  height: 16px;
  display: flex;
  position: relative;
}

.link-block {
  display: flex;
}

.link-block.buttonstyle {
  box-shadow: none;
  background-color: #fff;
  padding-left: 15px;
  padding-right: 28px;
  text-decoration: none;
  display: inline-flex;
}

.link-block.buttonstyle.finalcta {
  border: 1px solid #d2d2d2;
  padding-left: 2.5rem;
  padding-right: 2.5rem;
}

.link-block.buttonstyle.finalcta.contact {
  justify-content: center;
  align-items: center;
  width: 100%;
  margin-top: .7rem;
  margin-bottom: 0;
  padding-top: 19px;
  padding-bottom: 19px;
}

.link-block.buttonstyle.header {
  background-color: #fff0;
}

.link-block.buttonstyle.header:hover {
  filter: brightness(0) saturate() invert(32%) sepia(24%) saturate(4291%) hue-rotate(349deg) brightness(99%) contrast(91%);
}

.image-2 {
  width: 1.2rem;
  margin-right: 2px;
}

.phonenumbertext {
  color: var(--main);
  font-size: 17px;
}

.flex-block-7 {
  grid-column-gap: .8rem;
  grid-row-gap: .8rem;
  justify-content: center;
  align-items: center;
}

.reviewcolum {
  grid-column-gap: 1rem;
  grid-row-gap: 1rem;
}

.footer-link-two-2 {
  color: #343434;
  margin-top: 15px;
  font-size: 16px;
  text-decoration: none;
}

.footer-link-two-2:hover {
  color: #1a1b1fbf;
}

.container-5 {
  width: 100%;
  max-width: 45rem;
  margin-left: auto;
  margin-right: auto;
}

.footer-bottom-4 {
  color: var(--policy-text);
  text-align: left;
  justify-content: space-between;
  align-items: center;
  font-weight: 400;
  display: inline-block;
}

.footer-bottom-4:where(.w-variant-01b5a289-ac54-c464-547e-5395bf3eb7ae) {
  text-align: center;
  margin-top: 3rem;
  margin-left: auto;
  margin-right: auto;
  display: block;
}

.list {
  margin-top: -.4rem;
  margin-bottom: 0;
}

.arrowimg {
  filter: brightness(0) saturate() invert(32%) sepia(24%) saturate(4291%) hue-rotate(349deg) brightness(99%) contrast(91%);
  width: 1rem;
}

.link-block-2 {
  grid-column-gap: .25rem;
  grid-row-gap: .25rem;
  color: var(--main);
  justify-content: center;
  align-items: center;
  padding-top: 5px;
  padding-bottom: 5px;
  padding-right: 8px;
  text-decoration: none;
  display: flex;
}

.learnmoretext {
  color: var(--primary);
  font-size: 17px;
  font-weight: 700;
}

.grid-4 {
  grid-template: ". Area"
  / 1fr 1fr;
}

.div-block-3 {
  background-color: #bbb;
  width: 100%;
  height: 1px;
  margin-bottom: 22px;
}

.div-block-3.locationpage {
  margin-top: 2rem;
}

.benefits-section {
  grid-column-gap: 1.6rem;
  grid-row-gap: 1.6rem;
  flex-flow: column;
  display: flex;
}

.servicepageitem {
  grid-column-gap: 2rem;
  grid-row-gap: 2rem;
  grid-template-columns: 1fr;
}

.grid-5 {
  grid-column-gap: 5rem;
  grid-row-gap: 5rem;
  grid-template-rows: auto;
  align-content: start;
}

.contact-container {
  margin-top: -4rem;
  padding-bottom: 4rem;
}

.starcontainer {
  margin-left: -1px;
}

.centerreviewsfinalcta {
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
}

/* Footer profile marks - agency standard (owner, Aug 2026, final):
   35px desktop / 39px at 767px and below, .36rem padding, 1px line border,
   10rem radius, .62rem gap (.83rem at 479px and below), .8rem above.
   Icon only, no label, no hover effect. */
.social-links {
  grid-column-gap: .62rem;
  grid-row-gap: .62rem;
  align-items: center;
  margin-top: .8rem;
  display: flex;
}

@media screen and (max-width: 479px) {
  .social-links {
    grid-column-gap: .83rem;
    grid-row-gap: .83rem;
  }
}

.link-block-3, .link-block-3:hover {
  border: 1px solid var(--line);
  border-radius: 10rem;
  justify-content: center;
  align-items: center;
  width: 35px;
  height: 35px;
  padding: .36rem;
  display: inline-flex;
  opacity: 1;
}

@media screen and (max-width: 767px) {
  .link-block-3, .link-block-3:hover {
    width: 39px;
    height: 39px;
  }
}

.link-block-3 .socialicon {
  object-fit: contain;
  width: 100%;
  height: 100%;
}

.footer-links-bottom {
  flex-flow: row;
  display: flex;
}

.div-block-4 {
  grid-column-gap: 1rem;
  grid-row-gap: 1rem;
  margin-left: auto;
  display: flex;
}

.footerpolicylink {
  color: var(--policy-text);
  text-decoration: none;
}

.reviewsourceimg {
  width: 1.3rem;
  position: absolute;
  right: 1.4rem;
}

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

.section-2 {
  background-color: var(--primary);
}

.text-block-3 {
  width: var(--section);
  max-width: 45rem;
  color: var(--relume-library-lite--rl-white);
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  padding-top: .8rem;
  padding-bottom: .8rem;
  font-size: 16px;
}

.image-7 {
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: 3px;
  width: 100%;
  height: auto;
  box-shadow: 0 2px 12px #00000014;
}

.image-7.mapsection {
  aspect-ratio: 1;
  position: static;
}

.div-block-10 {
  grid-column-gap: 1rem;
  grid-row-gap: 1rem;
  justify-content: center;
  align-items: center;
  margin-top: 5px;
  display: flex;
}

.attribute {
  color: #484848;
  text-align: center;
  margin-top: 2px;
  font-size: .75rem;
}

.image-10 {
  width: 4.5rem;
}

.image-11 {
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: 3px;
  width: 100%;
  height: auto;
  box-shadow: 0 2px 12px #00000014;
}

.image-11.mapsection {
  aspect-ratio: 1;
}

.div-block-11 {
  grid-column-gap: 1rem;
  grid-row-gap: 1rem;
  justify-content: center;
  align-items: center;
  margin-top: 5px;
  display: flex;
}

.image-12 {
  width: 4.5rem;
}

.gridimage {
  grid-column-gap: 6px;
  grid-row-gap: 6px;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  display: grid;
}

.utility-page-wrap {
  justify-content: center;
  align-items: center;
  width: 100vw;
  max-width: 100%;
  height: 100vh;
  max-height: 100%;
  display: flex;
}

.utility-page-content {
  text-align: center;
  flex-direction: column;
  width: 260px;
  display: flex;
}

.div-block-12 {
  grid-column-gap: 1rem;
  grid-row-gap: 1rem;
  justify-content: center;
  align-items: center;
  margin-top: 5px;
  display: flex;
}

.image-13 {
  width: 4.5rem;
}

.div-block-13 {
  grid-column-gap: 1rem;
  grid-row-gap: 1rem;
  justify-content: center;
  align-items: center;
  margin-top: 5px;
  display: flex;
}

.attribute-2 {
  color: #5d5d5d;
  text-align: center;
  margin-top: 2px;
  font-size: .75rem;
}

.image-14 {
  width: 4.5rem;
}

@media screen and (max-width: 991px) {
  .container {
    max-width: 728px;
  }

  .nav-menu-wrapper {
    background-color: #0000;
  }

  .nav-menu-two {
    background-color: #fff;
    flex-flow: row;
    justify-content: space-around;
    align-items: center;
    margin-top: -1px;
    padding: 20px;
    display: flex;
  }

  .nav-link {
    padding-left: 5px;
    padding-right: 5px;
  }

  .buttonstyle.herobutton {
    margin-left: auto;
  }

  .image.aboutimg {
    aspect-ratio: 1;
  }

  .image.serviceherosection {
    display: none;
  }

  .grid {
    grid-column-gap: 2rem;
    grid-row-gap: 2rem;
    grid-template-columns: 1fr;
  }

  .flex-block {
    max-width: 30rem;
    margin-left: auto;
    margin-right: auto;
    padding-top: 5rem;
    padding-bottom: 5rem;
  }

  .hero.h2 {
    font-size: 2.4rem;
  }

  .hero.herosection {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    font-size: 3rem;
  }

  .hero.herosection.nowreviews-above.left {
    text-align: left;
    margin-left: 0;
  }

  .herop {
    text-align: center;
  }

  .herop.left {
    text-align: left;
  }

  .herop.servicepagehero {
    margin-bottom: 0;
  }

  .herop.white {
    margin-left: auto;
    margin-right: auto;
  }

  .hero-section {
    background-image: linear-gradient(#000000ad, #000000ad), url('../images/mobilehero-bg.avif');
    background-position: 0 0, 50%;
    background-size: auto, cover;
  }

  .flex-block-2 {
    margin-left: auto;
    margin-right: auto;
  }

  .section.finalcta {
    padding-left: 2rem;
    padding-right: 2rem;
  }

  .section.serviceitems {
    padding-top: 4rem;
  }

  .servicegrid, .gallerygrid {
    grid-template-columns: 1fr 1fr;
  }

  .grid-3 {
    grid-column-gap: 3rem;
    grid-row-gap: 3rem;
    grid-template-columns: 1fr;
  }

  .footer-wrapper-two {
    flex-wrap: wrap;
  }

  .reviewflexholder {
    margin-left: auto;
  }

  .flex-block-6 {
    margin-left: auto;
    margin-right: auto;
  }

  .flex-block-6.form.contactpage {
    margin-left: 0;
  }

  .container-5 {
    max-width: 728px;
  }

  .menu-button-2 {
    padding: 12px;
  }

  .menu-button-2:where(.w-variant-5ce01ffb-dde1-17b1-308f-68f0c7ba4095) {
    display: none;
  }

  .menu-button-2.w--open {
    color: #222;
    background-color: #fff;
  }

  .icon-2 {
    font-size: 40px;
  }

  .icon-2:where(.w-variant-5ce01ffb-dde1-17b1-308f-68f0c7ba4095) {
    display: none;
  }

  .image-7.mapsection, .image-11.mapsection {
    aspect-ratio: 3 / 2;
  }
}

@media screen and (max-width: 767px) {
  .navbar-logo-left-container {
    max-width: 100%;
  }

  .navbar-logo-left-container.shadow-three:where(.w-variant-5ce01ffb-dde1-17b1-308f-68f0c7ba4095) {
    padding-bottom: 14px;
  }

  .navbar-brand {
    padding-left: 0;
  }

  .nav-menu-two {
    box-shadow: none;
    flex-direction: column;
    padding-top: 0;
  }

  .nav-link {
    padding-top: 10px;
    padding-bottom: 10px;
    display: inline-block;
  }

  .mobile-margin-top-10 {
    margin-top: 10px;
  }

  .buttonstyle.finalcta {
    text-align: center;
    width: 100%;
  }

  .flex-block {
    padding-top: 4rem;
    padding-bottom: 4rem;
  }

  .hero.h2 {
    font-size: 2rem;
  }

  .hero.herosection {
    font-size: 2.7rem;
  }

  .servicegrid, .servicegrid.rs, .servicegrid.thankyoupage {
    grid-template-columns: 1fr;
  }

  .footer-light {
    padding-left: 15px;
    padding-right: 15px;
  }

  .footer-wrapper-two {
    grid-column-gap: 2.4rem;
    grid-row-gap: 2.4rem;
    flex-flow: column;
  }

  .flex-block-6.finalcta {
    flex-flow: column;
  }

  .link-block.buttonstyle.finalcta {
    justify-content: center;
    align-items: center;
    width: 100%;
    padding-left: 0;
    padding-right: 0;
  }

  .flex-block-7 {
    flex-flow: column;
  }

  .footer-bottom-4 {
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
  }

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

  .social-links {
    flex-flow: row;
  }

  .image-7.mapsection, .image-11.mapsection {
    height: auto;
  }
}

@media screen and (max-width: 479px) {
  .navbar-logo-left-container.shadow-three {
    padding-top: 11px;
    padding-bottom: 11px;
  }

  .navbar-logo-left-container.shadow-three:where(.w-variant-5ce01ffb-dde1-17b1-308f-68f0c7ba4095) {
    padding-top: 12px;
    padding-bottom: 12px;
  }

  .container {
    max-width: none;
  }

  .nav-menu-two {
    flex-direction: column;
  }

  .nav-link {
    margin-top: 8px;
    margin-bottom: 8px;
    font-size: 19px;
    font-weight: 600;
  }

  .mobile-margin-top-10 {
    width: 100%;
  }

  .buttonstyle {
    text-align: center;
    width: 100%;
    padding-top: 23px;
    padding-bottom: 23px;
    font-size: 19px;
    font-weight: 700;
  }

  .buttonstyle.herobutton {
    text-align: center;
    width: 100%;
    margin-left: 0;
    margin-right: 0;
    font-size: 20px;
    display: block;
  }

  .buttonstyle.herobutton.secondary {
    display: none;
  }

  .buttonstyle.herobutton.servicepageitem {
    padding-top: 22px;
    padding-bottom: 22px;
  }

  .buttonstyle.finalcta {
    text-align: center;
    width: 100%;
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .buttonstyle.headerbutton {
    padding-top: 26px;
    padding-bottom: 26px;
    font-size: 20px;
  }

  .image.serviceimg {
    box-shadow: none;
  }

  .grid {
    grid-column-gap: 1.5rem;
    grid-row-gap: 1.5rem;
  }

  .flex-block {
    width: var(--section);
    padding-top: 3.6rem;
    padding-bottom: 3.6rem;
  }

  .hero.h2 {
    font-size: 2rem;
  }

  .hero.h3 {
    margin-bottom: 13px;
  }

  .hero.herosection {
    letter-spacing: -2.1px;
    margin: 22px auto 14px;
    font-size: 2.4rem;
  }

  .hero.herosection.white {
    margin-top: 26px;
  }

  .hero.h2-5 {
    margin-top: -3px;
  }

  .herop {
    margin-top: 0;
    margin-bottom: 1.6rem;
  }

  .herop.left.about-page {
    margin-bottom: 0;
    font-size: 19px;
  }

  .flex-block-2 {
    flex-flow: column;
    width: 100%;
  }

  .section {
    padding-top: 4rem;
  }

  .section.finalcta {
    margin-top: 3rem;
    margin-bottom: -2rem;
    padding: 3rem 1.2rem;
  }

  .section.ownpage {
    padding-top: 1.8rem;
  }

  .section.serviceitems {
    padding-top: 2rem;
  }

  .servicegrid, .servicegrid.rs {
    grid-column-gap: .9rem;
    grid-row-gap: .9rem;
  }

  .p {
    font-size: 19px;
  }

  .p.left {
    margin-bottom: 36px;
  }

  .p.left.serviceitem {
    margin-top: 8px;
  }

  .p.rs {
    font-size: 17px;
  }

  .p.services {
    margin-bottom: 16px;
    font-size: 18px;
  }

  .p.citylist {
    letter-spacing: -.3px;
    padding-right: 0;
    font-size: 18px;
  }

  .flex-block-3 {
    padding: 1rem;
  }

  .gallerygrid {
    grid-column-gap: .9rem;
    grid-row-gap: .9rem;
    grid-template-columns: 1fr;
  }

  .grid-3 {
    grid-column-gap: 2rem;
    grid-row-gap: 2rem;
  }

  .grid-3.about, .grid-3.about.aboutpage {
    grid-column-gap: 2.5rem;
    grid-row-gap: 2.5rem;
  }

  .form-2 {
    margin-top: 10px;
  }

  .text-field {
    height: 45px;
    font-size: 18px;
    box-shadow: 0 2px 8px #6363631a;
  }

  .text-field::placeholder {
    color: var(--kütüp-library--dim-grey);
  }

  .field-label {
    height: auto;
    margin-bottom: 9px;
    font-size: 18px;
    line-height: 1.5;
  }

  .logo {
    width: 11.5rem;
  }

  .footer-wrapper-two {
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
  }

  .featuredpfp {
    width: 37px;
  }

  .flex-block-4 {
    grid-row-gap: 6px;
    margin-left: 6px;
  }

  .flex-block-4.reviewbox {
    grid-row-gap: 5px;
  }

  .starimg {
    width: 18px;
    margin-right: 1px;
  }

  .featuredreviewstext {
    letter-spacing: -.15px;
    font-size: 15px;
  }

  .featuredreviewstext.rs {
    font-size: 16px;
  }

  .reviewflexholder {
    grid-column-gap: 1.1rem;
    grid-row-gap: 1.1rem;
  }

  .fud.recurring {
    display: none;
  }

  .fud.contactpage {
    grid-column-gap: .5rem;
    grid-row-gap: .5rem;
  }

  .fudimg {
    width: 20px;
  }

  .fudimg.contact {
    margin-bottom: auto;
  }

  .fudtext {
    font-size: 18px;
  }

  .fudtext.finalcta {
    font-size: 17px;
  }

  .fudtext.list {
    font-size: 19px;
    line-height: 1.3;
  }

  .flex-block-6 {
    flex-flow: column;
    margin-top: 1.1rem;
  }

  .flex-block-6.form {
    flex-flow: column;
  }

  .flex-block-6.form.contactpage {
    grid-column-gap: 2rem;
    grid-row-gap: 2rem;
    margin-top: -.8rem;
    margin-bottom: 28px;
  }

  .flex-block-6.finalcta {
    flex-flow: column;
  }

  .kutup-faq-title {
    font-size: 20px;
  }

  .link-block.buttonstyle.finalcta {
    justify-content: center;
    align-items: center;
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .link-block.buttonstyle.finalcta.contact {
    padding-top: 22px;
    padding-bottom: 22px;
  }

  .image-2 {
    width: 1.35rem;
  }

  .phonenumbertext {
    font-size: 19px;
  }

  .flex-block-7 {
    grid-column-gap: .9rem;
    grid-row-gap: .9rem;
    flex-flow: column;
  }

  .reviewcolum {
    grid-column-gap: .9rem;
    grid-row-gap: .9rem;
  }

  .footer-link-two-2 {
    margin-top: 30px;
    font-size: 18px;
  }

  .container-5 {
    max-width: none;
  }

  .footer-bottom-4 {
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
  }

  .arrowimg {
    width: 1rem;
  }

  .link-block-2 {
    grid-column-gap: 6px;
    grid-row-gap: 6px;
  }

  .learnmoretext {
    letter-spacing: -.2px;
    font-size: 18px;
  }

  .grid-4 {
    grid-column-gap: 0px;
    grid-row-gap: 0px;
    place-items: center start;
    width: 100%;
  }

  .benefits-section {
    grid-column-gap: 2rem;
    grid-row-gap: 2rem;
  }

  .grid-5 {
    grid-column-gap: 4rem;
    grid-row-gap: 4rem;
  }

  .bold-text {
    font-size: 16px;
  }

  .contact-container {
    margin-top: -2.2rem;
  }

  .menu-button-2 {
    margin-right: -12px;
  }

  .icon-2 {
    font-size: 42px;
  }

  .social-links {
    grid-column-gap: .83rem;
    grid-row-gap: .83rem;
  }

  .footer-links-bottom {
    grid-column-gap: 1rem;
    grid-row-gap: 1rem;
    flex-flow: column;
  }

  .div-block-4 {
    flex-flow: column;
    margin-left: 0;
  }

  .text-block-3 {
    padding-top: .6rem;
    padding-bottom: .6rem;
    font-size: 15px;
  }

  .image-7.mapsection, .image-11.mapsection {
    aspect-ratio: 1;
  }

  .gridimage {
    grid-column-gap: 4px;
    grid-row-gap: 4px;
  }
}

#w-node-_994b4334-d931-ad45-909d-87082916562e-01109f10 {
  align-self: center;
}

#w-node-_41787c4d-1241-d50c-e20c-bb39ebc197aa-01109f10, #w-node-_4417ede2-6b78-c90f-8ac2-6942bb6c831c-01109f10, #w-node-_5a4cf96f-b060-ac31-742b-6887ce0ad45a-01109f10, #w-node-_9d4bc380-303c-28c3-4f48-66ee678d7f1b-01109f10 {
  justify-self: center;
}

#w-node-_5afc17e9-2dc3-3a2b-e8a5-04757e07aa37-01109f10, #w-node-_4d0ea11a-81da-0c10-a295-a579dcfd524b-01109f10, #w-node-_14b3f04f-4a58-761b-4011-b081df1c2c68-df1c2c66 {
  align-self: center;
}

#w-node-_14b3f04f-4a58-761b-4011-b081df1c2c74-df1c2c66 {
  grid-area: span 1 / span 1 / span 1 / span 1;
}

#w-node-af9275d1-2913-0005-5188-a97bfe3028c1-df1c2c66, #w-node-ac0bd678-625f-614b-1b98-b68d83339660-8333965e, #w-node-ac0bd678-625f-614b-1b98-b68d83339686-8333965e {
  align-self: center;
}

#w-node-_641e4a77-eab1-fd10-d360-eb0556994279-56994235, #w-node-_641e4a77-eab1-fd10-d360-eb0556994299-56994235 {
  justify-self: center;
}

#w-node-f293da61-60d1-df6c-62c4-22eaaaa76729-01109f6e {
  align-self: center;
}

#event.w-node-_5f51dfa0-735f-f251-67c0-3d7842919633-01109f6e {
  align-self: start;
}

#w-node-_5f51dfa0-735f-f251-67c0-3d7842919634-01109f6e {
  align-self: center;
}

#construction.w-node-a479f649-87f1-5cec-6c42-0576152c7a11-01109f6e {
  align-self: start;
}

#w-node-a479f649-87f1-5cec-6c42-0576152c7a22-01109f6e {
  grid-area: span 1 / span 1 / span 1 / span 1;
}

#w-node-a479f649-87f1-5cec-6c42-0576152c7a12-01109f6e {
  align-self: center;
}

#accessible.w-node-fd6e847b-14ce-5243-4c58-2e5d38201f02-01109f6e {
  align-self: start;
}

#w-node-fd6e847b-14ce-5243-4c58-2e5d38201f03-01109f6e {
  grid-area: span 1 / span 1 / span 1 / span 1;
}

#w-node-fd6e847b-14ce-5243-4c58-2e5d38201f04-01109f6e {
  align-self: center;
}

#handwash.w-node-_3c9b0486-3ea7-da97-030d-bd6317f03278-01109f6e {
  align-self: start;
}

#w-node-_3c9b0486-3ea7-da97-030d-bd6317f03279-01109f6e {
  grid-area: span 1 / span 1 / span 1 / span 1;
}

#w-node-_3c9b0486-3ea7-da97-030d-bd6317f0327a-01109f6e, #w-node-f293da61-60d1-df6c-62c4-22eaaaa76729-01109f86 {
  align-self: center;
}

#w-node-_62f0589d-eea0-3cf9-b8da-2fb5e60605f4-01109f86 {
  grid-area: span 1 / span 1 / span 1 / span 1;
}

#w-node-_7bce870e-70ec-a249-fcc3-a0469dca2f74-01109f86, #w-node-f293da61-60d1-df6c-62c4-22eaaaa76729-01109f97, #w-node-f293da61-60d1-df6c-62c4-22eaaaa76739-01109f97, #w-node-f293da61-60d1-df6c-62c4-22eaaaa76729-01109f99, #w-node-f293da61-60d1-df6c-62c4-22eaaaa76729-01109f9a, #w-node-_994b4334-d931-ad45-909d-87082916562e-0fabc4d5 {
  align-self: center;
}

#w-node-_41787c4d-1241-d50c-e20c-bb39ebc197aa-0fabc4d5, #w-node-_4417ede2-6b78-c90f-8ac2-6942bb6c831c-0fabc4d5, #w-node-_5a4cf96f-b060-ac31-742b-6887ce0ad45a-0fabc4d5 {
  justify-self: center;
}

@media screen and (max-width: 991px) {
  #w-node-_994b4334-d931-ad45-909d-87082916562e-01109f10, #w-node-_994b4334-d931-ad45-909d-87082916562e-0fabc4d5 {
    grid-area: span 1 / span 1 / span 1 / span 1;
    align-self: center;
  }
}

@media screen and (max-width: 479px) {
  #w-node-_5afc17e9-2dc3-3a2b-e8a5-04757e07aa37-01109f10 {
    grid-area: span 1 / span 1 / span 1 / span 1;
    align-self: center;
  }

  #w-node-_14b3f04f-4a58-761b-4011-b081df1c2c7c-df1c2c66 {
    justify-self: start;
  }

  #w-node-f293da61-60d1-df6c-62c4-22eaaaa76729-01109f6e, #w-node-_5f51dfa0-735f-f251-67c0-3d7842919634-01109f6e, #w-node-a479f649-87f1-5cec-6c42-0576152c7a12-01109f6e, #w-node-fd6e847b-14ce-5243-4c58-2e5d38201f04-01109f6e, #w-node-_3c9b0486-3ea7-da97-030d-bd6317f0327a-01109f6e, #w-node-f293da61-60d1-df6c-62c4-22eaaaa76729-01109f86 {
    grid-area: span 1 / span 1 / span 1 / span 1;
    align-self: center;
  }

  #w-node-_62f0589d-eea0-3cf9-b8da-2fb5e60605fc-01109f86 {
    justify-self: start;
  }

  #w-node-f293da61-60d1-df6c-62c4-22eaaaa76729-01109f97, #w-node-f293da61-60d1-df6c-62c4-22eaaaa76729-01109f99, #w-node-f293da61-60d1-df6c-62c4-22eaaaa76729-01109f9a {
    grid-area: span 1 / span 1 / span 1 / span 1;
    align-self: center;
  }
}


@font-face {
  font-family: 'LatoR';
  src: url('../fonts/Lato-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'MontserratR';
  src: url('../fonts/Montserrat-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'MontserratR';
  src: url('../fonts/Montserrat-Semi.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'MontserratR';
  src: url('../fonts/Montserrat-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'LatoR';
  src: url('../fonts/Lato-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'LatoR';
  src: url('../fonts/Lato-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* =========================================================================
   STICKY CALL BAR - added Sep 8 2026 on the owner's instruction.

   Transcribed BY HAND from the starter's StickyCallBar.astro; starter code is
   never imported on this path. What came across exactly: the fixed frosted bar,
   the max-height + opacity collapse (the ONE reveal confirmed animating on the
   owner's mobile Safari - never a transform slide), the mirrored slide-out
   curve, the 0.55 opacity floor, the 30%-of-viewport trigger, the keyboard
   guard, the true 50/50 split, hidden at >=1024px, 70px of body padding.

   What is THIS SITE'S rather than the starter's: the colours and the button
   metrics. The call button is the site's own white pill (#fff, 1px --line,
   no shadow) and the CTA is the site's flat --primary at the 2px radius every
   .buttonstyle on the page already uses - this build has no button gradient.
   The starter's Bebas ink-bias is 0 here: Montserrat sits normally in the line
   box, so the two paddings are equal at 17.3px.

   Label: the starter's shortenCta was run against this site's primary CTA.
   "Get a Free Quote" is 16 characters, exactly the cap, so it ships whole.
   ========================================================================= */
.sticky-call {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: 90;
  display: flex;
  gap: 8px;
  padding: 7px max(9px, env(safe-area-inset-right))
    calc(7px + env(safe-area-inset-bottom)) max(9px, env(safe-area-inset-left));
  background: rgba(255, 255, 255, 0.92);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-top: 1px solid var(--line);
  box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.08);
  /* The height clip IS the reveal. 8rem clears the bar's tallest form. */
  overflow: hidden;
  max-height: 0;
  opacity: 0.55;
  /* max-height alone leaves the block padding and border rendering as a
     ~15px sliver pinned to the bottom edge - collapse them WITH it. */
  padding-block: 0;
  border-top-width: 0;
  /* SLIDE-OUT uses the MIRROR curve (easeInCubic) so the visible slide-out is
     the time-reverse of the visible slide-in: the bar is ~68px tall inside a
     128px animation, so only the first span of the curve is ever seen. */
  transition:
    max-height 0.45s cubic-bezier(0.32, 0, 0.67, 0),
    opacity 0.14s ease-out 0.31s,
    padding 0.45s cubic-bezier(0.32, 0, 0.67, 0),
    border-top-width 0.45s cubic-bezier(0.32, 0, 0.67, 0);
}
.sticky-call--visible {
  max-height: 8rem;
  opacity: 1;
  padding-block: 7px calc(7px + env(safe-area-inset-bottom));
  border-top-width: 1px;
  transition:
    max-height 0.45s cubic-bezier(0.33, 1, 0.68, 1),
    opacity 0.18s ease-out,
    padding 0.45s cubic-bezier(0.33, 1, 0.68, 1),
    border-top-width 0.45s cubic-bezier(0.33, 1, 0.68, 1);
}
.sticky-call__btn {
  /* ALWAYS exactly 50/50. flex:1 alone does not do it - flex items default to
     min-width:auto, which floors each at its own min-content width, so the
     longer label steals space. min-width:0 lets flex-basis:0 govern. */
  flex: 1 1 0;
  min-width: 0;
  /* Content is centred, so inline padding earns nothing and would act as a
     width floor on one side of the split. A transparent border equalises the
     box metrics against the call button's hairline. */
  padding-inline: 0;
  border: 1px solid transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding-top: 17.3px;
  padding-bottom: 17.3px;
  border-radius: 2px;
  font-family: MontserratR, Arial, sans-serif;
  font-weight: 600;
  font-size: 1.05rem;
  letter-spacing: -.2px;
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
}
/* Call = the secondary action: this site's own white pill. */
.sticky-call__btn--call {
  background-color: #fff;
  color: var(--main);
  border-color: var(--line);
}
.sticky-call__btn--call img {
  width: 17px;
  height: 17px;
  flex: 0 0 auto;
}
/* Free quote = the dominant action: the site's own .buttonstyle recipe. */
.sticky-call__btn--quote {
  background-color: var(--primary);
  color: #fff;
  box-shadow: 0 2px 8px #63636333;
}
.sticky-call__btn:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}
/* Hidden on desktop, where the header CTA stays visible. */
@media screen and (min-width: 1024px) {
  .sticky-call { display: none; }
}
/* Keep the fixed bar from covering page content. Scoped with :has so
   /contact, which carries no bar, keeps its own spacing. */
@media screen and (max-width: 1023px) {
  body:has(.sticky-call) { padding-bottom: 70px; }
}

/* Footer service-area column: ONE column at every width (owner, Sep 8 2026).
   It ran two-up on desktop when the list was added, because fourteen city
   links stacked made the footer 781px tall against ~200px for its neighbours.
   The owner has since asked for the single column, so the column is long by
   design and the footer is taller than its other three. */
.footer-areas-grid {
  grid-template-columns: 1fr;
  display: grid;
}

/* Footer reformatted to the starter's shape (owner ask, Sep 8 2026): the bare
   socials block became a brand column carrying the logo, the site's own
   tagline, the socials, and "Get in Touch" underneath — four columns instead
   of five. The logo takes its width from CSS only, with no width/height
   attributes, exactly like the header logo it is copied from. */
.footer-brand {
  grid-row-gap: 1rem;
  max-width: 17rem;
}

.footer-logo {
  width: 11rem;
  max-width: 100%;
  height: auto;
}

.footer-tagline {
  color: inherit;
  margin-top: 0;
  margin-bottom: 0;
  font-size: .95rem;
  line-height: 1.55;
}

.footer-brand .social-links {
  margin-top: .2rem;
}

.footer-contact {
  grid-row-gap: 0;
  margin-top: .4rem;
}

@media screen and (max-width: 991px) {
  .footer-brand {
    max-width: 22rem;
  }
}

/* The export capped the footer at 45rem while every other section runs to the
   site's 73rem container, so four real columns had no room to sit in. The
   starter's footer uses the page container, so this one now does too, laid out
   as a four-column grid instead of flex space-between (which let the columns
   touch). Two-up in the tablet band, stacked on a phone. */
.footer-light .container-5 {
  width: var(--section);
  max-width: var(--section-width);
}

.footer-wrapper-two {
  /* Content-sized tracks spread across the container (owner, Sep 9 2026): with
     fixed fractions the Service Areas column was 305px wide around a 116px city
     list, so the names stopped ~190px short of the right edge. Sized to their
     content and spaced apart, the last column now ends flush with every other
     section. */
  grid-column-gap: 2.5rem;
  grid-row-gap: 2.5rem;
  grid-template-columns: repeat(4, auto);
  justify-content: space-between;
  align-items: start;
  display: grid;
}

.footer-brand {
  /* content-sized tracks would otherwise let the tagline run the full width of
     the brand column and shove the other three together */
  max-width: 21rem;
}

@media screen and (max-width: 991px) {
  .footer-wrapper-two {
    grid-template-columns: 1fr 1fr;
  }
}

@media screen and (max-width: 767px) {
  .footer-wrapper-two {
    grid-template-columns: 1fr;
  }
}

/* Services dropdown in the header, to the starter's Navbar recipe (owner ask,
   Sep 8 2026). Desktop: hovering the item opens the panel and clicking
   "Services" still goes to /services, because the label stays a real link.
   Mobile: the chevron button expands the submenu inside the drawer. The panel
   collapses with max-height + opacity rather than height, the same recipe the
   FAQ and the sticky bar use, so it animates on a phone. */
.nav-dropdown {
  position: relative;
}

.nav-dropdown__row {
  align-items: center;
  display: flex;
}

.nav-dropdown__toggle {
  color: var(--main);
  cursor: pointer;
  background: none;
  border: 0;
  border-radius: 2px;
  align-items: center;
  padding: 8px;
  line-height: 0;
  display: flex;
}

.nav-dropdown__chevron {
  transition: transform .25s ease;
}

.nav-dropdown--open .nav-dropdown__chevron {
  transform: rotate(180deg);
}

.nav-dropdown__menu {
  opacity: 0;
  max-height: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  overflow: hidden;
  transition: max-height .35s ease, opacity .25s ease;
}

.nav-dropdown--open > .nav-dropdown__menu {
  opacity: 1;
  max-height: 26rem;
}

.nav-dropdown__link {
  color: var(--main);
  padding: 9px 14px;
  font-family: MontserratR, Arial, sans-serif;
  font-size: 15px;
  font-weight: 500;
  line-height: 20px;
  text-decoration: none;
  display: block;
}

.nav-dropdown__link:hover {
  color: var(--primary);
}

@media screen and (min-width: 992px) {
  .nav-dropdown__toggle {
    display: none;
  }

  .nav-dropdown__menu {
    background-color: #fff;
    border: 1px solid var(--line);
    border-radius: var(--round);
    min-width: 16rem;
    padding: 6px 0;
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 60;
    box-shadow: 0 12px 30px #0000001f;
  }

  .nav-dropdown:hover > .nav-dropdown__menu,
  .nav-dropdown:focus-within > .nav-dropdown__menu,
  .nav-dropdown--open > .nav-dropdown__menu {
    opacity: 1;
    max-height: 26rem;
  }
}

@media screen and (max-width: 991px) {
  .nav-dropdown {
    flex-direction: column;
    align-items: center;
    width: 100%;
    display: flex;
  }

  .nav-dropdown__menu {
    text-align: center;
    width: 100%;
  }

  .nav-dropdown__link {
    font-size: 16px;
  }
}

/* The starter puts a chevron in the "Services" label itself. The mobile toggle
   button carries the interactive one; this is the desktop's decorative twin,
   so the label reads as a menu without adding a second control. */
.nav-dropdown__labelchevron {
  display: none;
}

@media screen and (min-width: 992px) {
  .nav-dropdown__labelchevron {
    vertical-align: middle;
    margin-left: 6px;
    transition: transform .25s ease;
    display: inline-block;
  }

  .nav-dropdown:hover .nav-dropdown__labelchevron {
    transform: rotate(180deg);
  }
}

/* Footer spacing (owner, Sep 8 2026): every column heading carried a 15px
   bottom margin on top of the 15px top margin each link already brings, so the
   gap under a heading was double the gap between its links. The links own the
   spacing now. "Get in Touch" also sits further below the socials, so it reads
   as its own block rather than a caption for them. */
.hero.h3.footer {
  margin-bottom: 0;
}

.footer-contact {
  margin-top: 1.9rem;
}

/* Map credit links were rendering in the browser's default blue (and purple
   once visited): nothing in the export styles an anchor inside .attribute,
   because the export had no links there. They stay links — the provider's
   terms want the credit clickable — but they read as the fine print they are,
   underlined so the affordance survives without the colour. */
.attribute a,
.attribute-2 a {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

.attribute a:hover,
.attribute-2 a:hover {
  color: var(--primary);
}

/* Location-page service cards carry ONE image (owner, Sep 8 2026); the
   homepage keeps the export's two-up pair. A lone image spans the whole card
   and takes a 3:2 crop — a full-width square would be nearly 800px tall on a
   laptop. :only-child means the homepage pairs can never match this. */
.gridimage:has(> img:only-child) {
  width: 100%;
}

.gridimage > img:only-child {
  aspect-ratio: 4 / 3;
  grid-column: 1 / -1;
}

/* Balanced heading line breaks (owner, Sep 8 2026). Headings were breaking
   wherever the line ran out — "Portable Toilet Services in / Andover" left a
   one-word second line on every location page. text-wrap: balance evens the
   lines out instead. It applies to headings only (browsers cap it at a few
   lines, and it is the wrong tool for body copy), and a browser without it
   just wraps the way it already did. */
.hero,
.hero.h2,
.hero.h3,
.hero.h2-5,
h1, h2, h3 {
  text-wrap: balance;
}

/* Hero sub-headlines and body copy get `pretty` instead: it only pulls a lone
   word off the last line, where `balance` would try to even out a paragraph
   (and browsers stop applying it past a few lines anyway). */
.herop:not(.about-page) {
  text-wrap: balance;
}

.herop.about-page,
.p {
  text-wrap: pretty;
}

/* Why / benefits photos on the new pages (owner, Sep 9 2026). `.image.aboutimg`
   anchors to the BOTTOM (50% 100%) and `.home` only changes the aspect ratio,
   so a portrait photo in a square box was cropped from the bottom up and the
   top of the unit was cut off — which is why these still looked off-centre
   after the photos themselves were re-cut. The homepage's own about photo is
   deliberately bottom-anchored and keeps that. */
.image.aboutimg.home.whyimg {
  object-position: 50% 50%;
}

/* The starter alternates the two sections on a location page: why = photo on
   the right, local = photo on the left. Only once the grid is two columns —
   stacked on a phone the photo stays under its copy either way. */
@media screen and (min-width: 992px) {
  .grid-3.about.imgleft > img {
    order: -1;
  }
}

/* Service and location heroes reuse the homepage hero (owner, Sep 9 2026).
   The homepage's copy column is centred by a Webflow node id; the same two
   rules live here under a class instead, so 22 pages don't carry a copied id. */
.hero-flex {
  align-self: center;
}

@media screen and (max-width: 991px) {
  .hero-flex {
    grid-area: span 1 / span 1 / span 1 / span 1;
    align-self: center;
  }
}

/* Hero copy lines up with every other section (owner, Sep 9 2026). The hero grid
   sat at full viewport width while every other section runs inside .container,
   so the hero text started ~16px left of the rest at 1440px and drifted further
   out the wider the screen got. The BACKGROUND stays full-bleed — only the grid
   inside it is constrained, with the same width tokens .container uses. */
.hero-section .grid {
  width: var(--section);
  max-width: var(--section-width);
  margin-left: auto;
  margin-right: auto;
}

/* .grid centres its items, so the copy column sat another 52px inside the
   container edge. Pin it to the start instead; below 992px the column is
   narrower than the block anyway, so this changes nothing on a phone. */
.hero-section .flex-block {
  justify-self: start;
}

/* Split hero on the service and location pages (owner, Sep 9 2026): copy left,
   photo filling the right half and bleeding to the top, bottom and right edges.
   The homepage keeps its full-bleed background hero, so this is a modifier.
   The panel starts at 50% of the VIEWPORT, which is exactly where the
   container's second column starts — the container is centred — so the photo
   meets the copy column's edge and never overlaps the text. */
.hero-section.split {
  background-image: none;
  position: relative;
  overflow: hidden;
}

.hero-section.split .hero-media {
  background-image: var(--hero-bg);
  background-position: 50% 50%;
  background-size: cover;
  position: absolute;
  inset: 0 0 0 50%;
}

/* Stacked below 992px: the grid is one column, so the photo becomes a normal
   block that still runs edge to edge. */
@media screen and (max-width: 991px) {
  .hero-section.split {
    overflow: visible;
  }

  .hero-section.split .hero-media {
    width: 100vw;
    height: 17rem;
    margin-left: calc(50% - 50vw);
    position: static;
  }
}

/* The export hides the FIRST fud below 480px and keeps the second one, so a
   hero carrying only the first (the owner dropped fud 2 here) had none at all
   on a phone. Keep it on the split heroes. */
.hero-section.split .fud.recurring {
  display: flex;
}

/* Location-page why/local sections (owner, Sep 9 2026):
   - the copy column sat at the top of a row the photo made 536px tall, so it
     read as floating; it is centred against the photo now
   - the paragraph carried a 40px bottom margin with nothing beneath it, which
     put dead space under every one of them */
#why .grid-3.about > .w-layout-vflex,
#local .grid-3.about > .w-layout-vflex {
  align-self: center;
}

#why .grid-3.about p.p.left,
#local .grid-3.about p.p.left {
  margin-bottom: 0;
}

/* Services dropdown links read as nav links (owner, Sep 9 2026): same family,
   size and weight as the row above them, never wrapping onto a second line —
   "Handicapped Accessible Restrooms" was breaking in two — and with a little
   more room between them. */
.nav-dropdown__link {
  white-space: nowrap;
  font-size: 16px;
  line-height: 20px;
  padding-top: 11px;
  padding-bottom: 11px;
}

@media screen and (min-width: 992px) {
  .nav-dropdown__menu {
    min-width: max-content;
    padding-left: 4px;
    padding-right: 4px;
  }

  .nav-dropdown__link {
    padding-left: 16px;
    padding-right: 22px;
  }
}

/* A little more air (owner, Sep 10 2026): the header band was 15px above and
   below the logo row, and the footer link lists were on a 15px rhythm. */
.navbar-logo-left-container.shadow-three {
  padding-top: 22px;
  padding-bottom: 22px;
}

.footer-link-two-2 {
  margin-top: 19px;
}

/* City pills in the location pages' service-area section (owner, Sep 10 2026),
   built to the starter's AreasPage recipe: bordered box, the CONTROL radius
   every button and field on this site uses, a soft shadow, and the export's own
   arrow on the right. Three columns, one per city that has a page; the page's
   own city leads without an arrow because it does not link to itself. */
.citypills {
  grid-column-gap: .6rem;
  grid-row-gap: .6rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 1.5rem;
  display: grid;
}

.citywrap {
  border: 1px solid var(--line);
  border-radius: var(--round);
  background-color: #fff;
  justify-content: space-between;
  align-items: center;
  gap: .5rem;
  padding: .55rem .8rem;
  text-decoration: none;
  display: flex;
  box-shadow: 0 1px 3px #63636326;
}

.citywrap:hover {
  border-color: var(--primary);
}

.citywrap--self {
  background-color: #f6f6f6;
}

.citybox {
  color: var(--main);
  letter-spacing: -.2px;
  font-family: MontserratR, Arial, sans-serif;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.2;
}

.citywrap .arrowimg {
  flex: none;
  width: 13px;
}

@media screen and (max-width: 767px) {
  .citypills {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media screen and (max-width: 479px) {
  .citypills {
    grid-template-columns: 1fr;
  }
}

/* The areas page runs its city list full width, so it takes four columns rather
   than the three that suit the half-width section on a location page. */
@media screen and (min-width: 992px) {
  .citypills--wide {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* Ham Lake is served but has no page, so its pill carries no link and no arrow.
   Unlike --self, which greys the box to mean "you are here", a plain entry
   keeps the normal ground: it is a served city, not the current page. */
.citywrap--plain {
  cursor: default;
}