img {
border: 0;
}

:root {
--gradient1: #0088cb;
--gradient2: #00ab9b;
--main-color: #0088cb;
}

/* ============================================================
Intro on top (centered, slightly smaller column)
============================================================ */

.intro {
text-align: center;
  padding: 110px 20px 50px;
}

.intro p {
max-width: 560px;
margin: 0 auto;
}

/* ============================================================
Address blocks — CSS (copied from Campo Rasa)
(frame-type / dce-overlay-fw)
============================================================ */

.frame {
position: relative;
}

.frame-type {
margin-bottom: 130px;
}

#content .frame-type .container-fluid {
max-width: 100%;
padding-left: 0;
padding-right: 0;
}

#content .frame.frame-type>.page>.row {
width: 100%;
margin-left: 0;
margin-right: 0;
}

#content .frame-type .text-wrap-2 .text {
margin-left: 95px;
}

#content .frame.frame-type>.page>.row>div {
padding-left: 0;
padding-right: 0;
}

#content .frame-type .bgcolor {
position: relative;
width: 100%;
height: 600px;
margin-top: 50px;
border-radius: 3px;
}

#content .frame-type .bgcolor .img {
position: absolute;
top: -50px;
right: -50px;
max-height: 550px;
z-index: 2;
box-shadow: 0 20px 30px 20px rgba(0, 0, 0, 0.2);
overflow: hidden;
border-radius: 3px;
}

#content .frame-type .position-1 .bgcolor .img {
right: auto;
left: -50px;
}

#content .frame-type .text-container {
padding-top: 100px;
}

#content .frame-type .text-wrap {
height: 550px;
padding-top: 50px;
background-color: #fff;
}

#content .frame-type .text {
margin-left: 180px;
max-width: 400px;
}

.dce-overlay-fw>div.row {
margin-left: 0;
margin-right: 0;
}

.dce-overlay-fw>div.row>div {
padding-left: 0;
padding-right: 0;
}

.dce-overlay-fw .bgcolor img {
transition: all .2s;
}

.dce-overlay-fw .bgcolor img:hover {
transform: scale(1.03);
}

#content .frame-type .text p {
margin: 0 0 10px;
line-height: 1.6em;
}

#content .frame-type .text p strong {
font-weight: 600;
}

a.maplink h3 {
  font-size: 15px;
  letter-spacing: .04em;
  text-transform: uppercase;
}

#content .frame-type .text a.maplink:hover {
text-decoration: underline;
}

/* keep arbitrary photos at the original 636×550 card size, no distortion */
#content .frame-type .bgcolor .img img {
display: block;
width: 636px;
height: 550px;
max-width: 100%;
object-fit: cover;
}

.opening {
text-align: center;
font-weight: 500;
font-size: 22px;
margin: 0;
padding: 30px 20px 90px;
    color: #222;
}

.closing {
  font-family: "Bricolage Grotesque", sans-serif;
  margin-bottom: 20px;
  letter-spacing: 2px;
  font-weight: 300;
}

/* ============================================================
Responsive
============================================================ */
@media screen and (max-width:992px) {
#content .frame-type .text-wrap {
    height: auto;
}

#content .frame-type .text {
    margin-left: 110px;
}

#content .frame-type .position-1 .text {
    margin-left: 0;
}

#content .frame-type .position-1 .text-wrap {
    padding: 70px;
}

.dce-overlay-fw .bgcolor .img {
    max-width: calc(100% - 50px);
    height: auto;
}
}

@media screen and (max-width:768px) {
#content .frame-type .position-1 .text-wrap {
    padding: 0;
    margin: 0;
    align-items: flex-start;
}

#content .frame-type .text {
    max-width: 100%;
    margin: 0;
    padding: 70px;
}

#content .frame-type .bgcolor {
    height: auto;
    padding-bottom: 30px;
}

#content .frame-type .bgcolor .img {
    position: relative;
    top: 30px;
    left: 30px;
    right: auto;
    max-width: calc(100% - 60px);
}

#content .frame-type .position-1 .bgcolor .img {
    left: 30px;
    max-width: calc(100% - 60px);
}

#content .frame-type .bgcolor .img img {
    height: auto;
    width: 100%;
}

#content .frame-type .text-container {
    padding-top: 0;
}
}

/* Gradient band full-width, content in the centered uk-container.
   .bgcolor is the full-bleed band; the photo + text sit inside the centered
   cmp-container on top of it. */

/* Anchor the absolute photo to its centered column, not the full band. */
#content .frame-type .bgcolor .row > div {
    position: relative;
}

/* Re-attach the photo hover (.dce-overlay-fw .bgcolor img no longer
   matches now that .bgcolor wraps the content). */
#content .frame-type .bgcolor .img img {
    transition: all .2s;
}
#content .frame-type .bgcolor .img img:hover {
    transform: scale(1.03);
}

/* Band background: --grad (set inline per block) frames the image side;
   the text side is white. Split only on desktop — when the columns stack
   (<=768px) the whole band shows the gradient (the white .text-wrap still
   backs the text). */
#content .frame-type .bgcolor {
    background: var(--grad);
    /* Clip the BOTTOM (and sides) at the band edge, but leave the TOP open
       so the photo pokes up out of the band. overflow:hidden can't do one
       side only; inset() with a negative top keeps the top uncropped. */
    clip-path: inset(-200px 0px 0px 0px);
}

@media (min-width: 769px) {
    #content .frame-type .position-0 .bgcolor {
        background: var(--grad) left / 50% 100% no-repeat, #fff;
    }
    #content .frame-type .position-1 .bgcolor {
        background: var(--grad) right / 50% 100% no-repeat, #fff;
    }
}