:root {
    --blue:#3f4999;
    --blue-dark:#263172;
    --blue-mid:#5662ad;
	--blue-light:#9aa5e7;
    --lav:#eef0fb;
    --lav2:#f6f7fc;
    --ink:#24304c;
    --muted:#5d667b;
    --line:#dfe3f1;
    --white:#fff;
    --shell:1360px;
	--serif: "Libre Baskerville", Georgia, "Times New Roman", serif;
    --sans:"Open Sans",ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif
}

* {
    box-sizing:border-box
}

html {
    scroll-behavior:smooth
}

body {
    margin:0;
    font-family:var(--sans);
    color:var(--ink);
    background:#fff;
    line-height:1.55
}

img {
    max-width:100%;
    display:block
}

a {
    color:inherit
}

p a {
	color:var(--blue-mid);
	text-decoration: underline;
    text-underline-offset: 2px;
}

p a:hover {
	color:var(--ink);
}
button {
    font:inherit
}

.shell {
    width:min(calc(100% - 56px),var(--shell));
    margin-inline:auto
}

.sr-only {
    position:absolute;
    width:1px;
    height:1px;
    padding:0;
    margin:-1px;
    overflow:hidden;
    clip:rect(0,0,0,0);
    white-space:nowrap;
    border:0
}
.site-logo {
    display: block;
    width: 350px;
    height: auto;
    max-width: 100%;
}
.site-header {
    position:sticky;
    top:0;
    z-index:50;
    transition:box-shadow .3s ease,transform .3s ease
}

.site-header.scrolled {
    box-shadow:0 8px 22px rgba(24,34,87,.12)
}

.brand-band {
    color: white;
    background-image: url("/assets/images/trinity-clinic-cairns-header.jpg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.brand-row {
    min-height:118px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:30px
}

.brand {
    display:flex;
    align-items:center;
    text-decoration:none;
    gap:14px
}

.brand-mark {
    width:55px;
    height:55px;
    border-radius:52% 48% 54% 46%;
    display:grid;
    place-items:center;
    font-family:var(--serif);
    font-weight:700;
    font-size:36px;
    color:white;
    background:linear-gradient(145deg,#9aa5e7,#2d377e);
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.28);
    transform:rotate(-14deg)
}

.brand-copy {
    display:flex;
    flex-direction:column;
    line-height:1
}

.brand-copy strong {
    font-size:32px;
    letter-spacing:-.02em
}

.brand-copy small {
    font-size:14px;
    letter-spacing:.34em;
    margin-top:9px
}

.tagline {
    font-size:24px;
    font-weight:400
}

.nav-band {
    background:#fff
}

.nav-row {
    min-height:62px;
    display:flex;
    align-items:center;
    justify-content:space-between
}

.desktop-nav {
    display:flex;
    gap:34px
}

.desktop-nav a {
    position:relative;
    text-decoration:none;
    font-weight:700;
    padding:20px 0;
    color:#30395d
}

.desktop-nav a::after {
    content:"";
    position:absolute;
    left:0;
    right:0;
    bottom:7px;
    height:2px;
    background:var(--blue);
    transform:scaleX(0);
    transform-origin:left;
    transition:transform .25s ease
}

.desktop-nav a:hover::after,
.desktop-nav a.active::after {
    transform:scaleX(1)
}

.desktop-nav a.active {
    color:var(--blue)
}

.menu-toggle {
    display:none;
    border:0;
    background:transparent;
    width:46px;
    height:46px;
    padding:10px;
    cursor:pointer
}

.menu-toggle span:not(.sr-only) {
    display:block;
    height:2px;
    background:var(--blue-dark);
    margin:5px 0
}

.drawer-overlay {
    position:fixed;
    inset:0;
    background:rgba(20,28,65,.42);
    z-index:80;
    opacity:0;
    pointer-events:none;
    transition:.3s
}

.off-canvas {
    position:fixed;
    z-index:90;
    top:0;
    right:0;
    height:100%;
    /*width:min(86vw,420px);*/
	width:100%;
    background:#fff;
    transform:translateX(102%);
    transition:transform .35s cubic-bezier(.2,.7,.2,1);
    padding:84px 36px 34px;
    box-shadow:-16px 0 35px rgba(16,22,60,.2)
}

body.menu-open {
    overflow:hidden
}

body.menu-open .drawer-overlay {
    opacity:1;
    pointer-events:auto
}

body.menu-open .off-canvas {
    transform:none
}

.drawer-close {
    position:absolute;
    right:24px;
    top:22px;
    border:0;
    background:none;
    font-size:44px;
    line-height:1;
    color:var(--blue-dark);
    cursor:pointer
}

.off-canvas nav {
    display:grid;
    gap:4px
}

.off-canvas nav a {
    text-decoration:none;
    padding:14px 0;
    border-bottom:1px solid var(--line);
    font-size:22px;
    font-family:var(--serif)
}

.off-canvas nav a.active {
    color:var(--blue);
    font-weight:700
}

.drawer-contact {
    margin-top:38px;
    display:grid;
    gap:14px;
    font-size:18px
}

.drawer-contact strong {
    margin-bottom: 2px;
}

.drawer-contact a {
    display: block;
    min-height: 44px;
    padding: 8px 0;
    text-decoration: none;
    color: var(--blue);
}

h1,
h2,
h3 {
    font-family:var(--serif);
    color:var(--blue-mid);
    line-height:1.08;
    margin:0 0 .55em
}

h1 {
    font-size:clamp(46px,5.8vw,70px);
    font-weight:400
}

h2 {
    font-size:clamp(34px,3vw,50px);
    font-weight:500
}

h3 {
    font-size:clamp(23px,2vw,31px);
    font-weight:500
}

.eyebrow {
    text-transform:uppercase;
    letter-spacing:.16em;
    font-size:13px;
    font-weight:800;
    color:var(--blue)
}

.lead {
    font-size:clamp(18px,1.6vw,23px);
    line-height:1.55
}

.prose {
    max-width:820px
}

.prose p {
    font-size:18px;
    line-height:1.75
}

.small {
    font-size:14px;
    color:var(--muted)
}

.btn {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:48px;
    padding:0 24px;
    border:1px solid var(--blue);
    border-radius:4px;
    text-decoration:none;
    font-weight:700;
    transition:.25s;
	color:var(--blue);
}

.btn.primary {
    background:var(--blue);
    color:white
}

.btn:hover {
    transform:scale(1.04);
	background-color:var(--blue-light);
	color:var(--white);
}

/*.btn.primary:hover {
    background:var(--blue-dark)
}*/
a.btn.primary.meet-the-team-button {
    padding: 50px 100px;
    background-color: #f2f3ff;
    border-color: #cdd0f0;
    color: var(--blue);
    font-size: 20px;
}
a.btn.primary.meet-the-team-button:hover {
    transform: scale(1.04);
	background-color:var(--blue-light);
	color:var(--white);
}
.reveal {
    opacity:0;
    transform:translateY(28px);
    transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.2,1)
}

.reveal.from-left {
    transform:translateX(-30px)
}

.reveal.from-right {
    transform:translateX(30px)
}

.reveal.is-visible {
    opacity:1;
    transform:none
}

.stagger>* {
    opacity:0;
    transform:translateY(20px);
    transition:opacity .65s ease,transform .65s ease
}

.stagger.is-visible>* {
    opacity:1;
    transform:none
}

.stagger.is-visible>*:nth-child(2) {
    transition-delay:.08s
}

.stagger.is-visible>*:nth-child(3) {
    transition-delay:.16s
}

.stagger.is-visible>*:nth-child(4) {
    transition-delay:.24s
}

.stagger.is-visible>*:nth-child(5) {
    transition-delay:.32s
}

.stagger.is-visible>*:nth-child(6) {
    transition-delay:.40s
}

.stagger.is-visible>*:nth-child(7) {
    transition-delay:.48s
}

.stagger.is-visible>*:nth-child(8) {
    transition-delay:.56s
}

.hero {
    position: relative;
    background: #f8f9ff;
    overflow: hidden;
}

.hero-grid {
    display:grid;
    grid-template-columns:max(28px,calc((100vw - var(--shell))/2)) minmax(0,calc(var(--shell) * .43)) minmax(0,1fr);
    min-height:545px
}

.hero-copy {
    grid-column: 2;
    position: relative;
    z-index: 3;
    padding: 70px 56px 70px 0;
    align-self: center;
}

.hero-copy h1 {
    max-width:650px
}

.hero-copy .lead {
    max-width:540px
}

.hero-actions {
    display:flex;
    gap:18px;
    flex-wrap:wrap;
    margin-top:30px
}

.hero-image {
    grid-column: 3;
    position: relative;
    z-index: 1;
    overflow: hidden;
    min-height: 545px;
}

.hero-image img {
    width:100%;
    height:100%;
    object-fit:cover
}

.hero-image::before {
    content:"";
    position:absolute;
    z-index:2;
    inset:0 auto 0 0;
    width:30%;
    background:linear-gradient(90deg,#f8f9ff,transparent)
}

.feature-strip {
    padding:38px 0 36px
}

.feature-box {
    border:none;
    display:grid;
    grid-template-columns:repeat(3,1fr);
    background:#fff
}

.feature {
    padding:30px 34px;
    display:grid;
    grid-template-columns:72px 1fr;
    gap:18px;
    align-items:start
}

/*.feature+.feature {
    border-left:1px solid var(--line)
}*/

.icon-ring {
    width:64px;
    height:64px;
    border-radius:50%;
    background:#eef0ff;
    color:var(--blue);
    display:grid;
    place-items:center;
    font-size:28px
}

.feature p {
    margin:5px 0 12px;
    color:var(--muted)
}
article.feature:hover {
    transform: scale(1.08);
}

.text-link {
    color:var(--blue);
    font-weight:700;
    text-decoration:none
}

.help-section {
    position: relative;
    background: #f8f9ff;
    overflow: hidden;
}

.help-grid {
    display: grid;
    grid-template-columns:
        max(28px, calc((100vw - var(--shell)) / 2))
        minmax(0, var(--shell))
        minmax(0, 1fr);
    min-height: 440px;
}

.help-copy {
    grid-column: 2;
    grid-row: 1;
    position: relative;
    z-index: 3;
    padding: 52px 50px 48px 0;
}

.help-copy-inner {
    width: 72%;
}
.help-image {
    grid-column: 2 / 4;
    grid-row: 1;
    position: relative;
    z-index: 1;
    justify-self: end;
    width: 64%;
    min-height: 440px;
    overflow: hidden;
}
.help-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: right center;
}


.help-image::before {
    content: "";
    position: absolute;
    z-index: 2;
    inset: 0 auto 0 0;
    width: 55%;
    background: linear-gradient(
        90deg,
        #f8f9ff 0%,
        rgba(248, 249, 255, 0.98) 18%,
        rgba(248, 249, 255, 0.90) 35%,
        rgba(248, 249, 255, 0.65) 55%,
        rgba(248, 249, 255, 0.30) 75%,
        rgba(248, 249, 255, 0) 100%
    );
    pointer-events: none;
}
.condition-grid {
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:26px 34px;
    margin:28px 0 34px
}

.condition {
    display: grid;
    grid-template-columns: 54px 1fr;
    gap: 14px;
    align-items: center;
    font-weight: 700;
    color: var(--blue-dark);
}

.condition-icon {
    display: block;
    width: 48px;
    height: 48px;
    object-fit: contain;
}



.team-strip {
    padding:65px 0;
    border-top:1px solid var(--line);
    border-bottom:1px solid var(--line)
}

.team-row {
    display:grid;
    grid-template-columns:1fr 0.5fr;
    align-items:center;
    gap:60px;
		padding-right:250px;
}

.team-row p {
    max-width:620px;
    margin-bottom:0
}
.visit-info {
    display: flex;
    align-items: flex-start;
    gap: 28px;
}

.visit-icon {
    width: 70px;
    height: 70px;
    flex: 0 0 70px;
    border-radius: 50%;
    background: var(--blue-mid);
    display: grid;
    place-items: center;
}

.visit-icon svg {
    width: 34px;
    height: 34px;
    fill: #f1f3ff;
}

.visit-copy h3 {
    margin: 0 0 4px;
    font-family: var(--sans);
    font-size: 28px;
    font-weight: 700;
    color: var(--blue-dark);
}

.visit-address {
    margin: 0 0 18px;
    color: var(--blue-dark);
}

.visit-copy p {
    margin-top: 0;
}
.visit-strip {
    position: relative;
    background: #f3f4ff;
    overflow: visible;
    padding: 50px 0 52px;
    z-index: 1;
}

.visit-grid {
    position: relative;
    display: grid;
    grid-template-columns: 1.0fr .60fr;
    gap: 56px;
    align-items: center;

    /* reserve space for the illustration on the right */
    padding-right: 500px;
    min-height: 220px;
}

.visit-info {
    display: flex;
    align-items: flex-start;
    gap: 24px;
}

.visit-image {
    position: absolute;
    right: 0;
    top: -92px;   /* this creates the overlap into the section above */
    width: 420px;
    z-index: 3;
    pointer-events: none;
}

.visit-image img {
    display: block;
    width: 100%;
    height: auto;
}

.contact-buttons {
    display: grid;
    gap: 14px;
}

.contact-action {
    display: grid;
    grid-template-columns: 52px 1fr;
    align-items: center;
    column-gap: 24px;
    min-height: 72px;
    padding: 0 26px 0 30px;
    background: #fff;
    border: 1px solid var(--blue-mid);
    color: var(--blue-dark);
    font-weight: 700;
    text-decoration: none;
    text-align: left;
	font-size: 19px;
}

.action-icon {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    color: var(--blue);
}

.action-icon svg {
    width: 34px;
    height: 34px;
    fill: currentColor;
}

.faq-icon {
    border-radius: 50%;
    background: var(--blue);
    color: #fff;
    font-size: 30px;
    font-weight: 700;
    line-height: 1;
}


.contact-buttons .btn {
    background:#f1f3ff;
	color: var(--blue-dark);
}
.contact-buttons .btn:hover {
    background: var(--blue-light);
	color: var(--white);
}

.page-hero {
    position: relative;
    overflow: hidden;
    background: #f8f9ff;
    padding: 78px 0 54px;
}
.page-hero .shell {
    position: relative;
    z-index: 2;
}
.page-hero-content {
    width: 72%;
    max-width: 1250px;
}
.page-hero::after {
    content: "";
    position: absolute;
    z-index: 1;
    top: 0;
    right: 0;
    bottom: 0;

    width: 48%;

    background-image: var(--hero-image);
    background-size: cover;
    background-position: center right;
    background-repeat: no-repeat;

    opacity: .42;

    -webkit-mask-image: linear-gradient(
        to right,
        transparent 0%,
        rgba(0, 0, 0, .15) 15%,
        rgba(0, 0, 0, .65) 45%,
        #000 75%
    );

    mask-image: linear-gradient(
        to right,
        transparent 0%,
        rgba(0, 0, 0, .15) 15%,
        rgba(0, 0, 0, .65) 45%,
        #000 75%
    );

    pointer-events: none;
}

.hero-about {
    --hero-image: url("/assets/images/hero-about.webp");
}

.hero-who {
    --hero-image: url("/assets/images/hero-who.webp");
}

.hero-what {
    --hero-image: url("/assets/images/hero-what.webp");
}

.hero-faqs {
    --hero-image: url("/assets/images/hero-faqs.webp");
}

.hero-contact {
    --hero-image: url("/assets/images/hero-contact.webp");
}

.hero-resources {
    --hero-image: url("/assets/images/hero-resources.webp");
}

.page-hero h1 {
    font-size:clamp(44px,4.5vw,68px)
}

.page-section {
    padding:68px 0
}

.page-section.alt {
    background:var(--lav2)
}

.split {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:70px;
    align-items:start
}

.profile {
    padding:34px 0;
    border-top:1px solid var(--line)
}

.profile:first-child {
    border-top:0;
    padding-top:0
}

.profile h2 {
    font-size:34px
}

.profile .quals {
    font-weight:700;
    color:var(--blue);
    margin-top:-10px
}

.service-list {
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:10px 30px;
    padding:0;
    list-style:none
}

.service-list li {
    padding:13px 0 13px 30px;
    border-bottom:1px solid var(--line);
    position:relative
}

.service-list li::before {
    content:"";
    position:absolute;
    left:2px;
    top:20px;
    width:9px;
    height:9px;
    border-radius:50%;
    background:var(--blue)
}

.accordion {
    border-top:1px solid var(--line)
}

.faq-item {
    border-bottom:1px solid var(--line)
}

.faq-button {
    width:100%;
    text-align:left;
    border:0;
    background:none;
    padding:22px 46px 22px 0;
    font-family:var(--serif);
    font-size:24px;
    color:var(--blue-dark);
    cursor:pointer;
    position:relative
}

.faq-button::after {
    content:"+";
    position:absolute;
    right:4px;
    top:15px;
    font-family:var(--sans);
    font-size:32px;
    color:var(--blue)
}

.faq-button[aria-expanded="true"]::after {
    content:"–"
}

.faq-panel {
    display:none;
    padding:0 60px 24px 0;
    max-width:900px
}

.faq-panel.open {
    display:block
}

.contact-layout {
    display:grid;
    grid-template-columns:.8fr 1.2fr;
    gap:50px
}

.contact-box {
    background:var(--lav2);
    padding:34px
}

.map-placeholder {
    min-height: 480px;
    padding: 0;
    overflow: hidden;
}

.map-placeholder > div {
    width: 100%;
    height: 100%;
}

.map-placeholder iframe {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 480px;
    border: 0;
}

.resources-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 28px;
}

.resource-card {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid var(--line);
    padding: 28px;
    min-height: 100%;
	    transition:
        transform .3s ease,
        box-shadow .3s ease,
        border-color .3s ease;
	border-radius:8px;
}
.resource-card:hover {
    transform: scale(1.025);
    box-shadow: 0 10px 28px rgba(38, 49, 114, .10);
    border-color: rgba(63, 73, 153, .35);
}

.resource-logo {
    min-height: 150px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 24px;
}

.resource-logo img {
    display: block;
    max-width: 250px;
    max-height: 140px;
    width: auto;
    height: auto;
    object-fit: contain;
}

.resource-content h3 {
    margin: 0 0 10px;
    font-family: var(--sans);
    font-size: 20px;
    font-weight: 700;
}

.resource-content a {
    color: var(--blue);
    text-decoration: none;
    font-weight: 600;
}

.resource-content a:hover {
    text-decoration: underline;
}

.legal-page .reveal,
.legal-page .reveal-left,
.legal-page .reveal-right {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
}

.legal {
    max-width:900px
}

.legal h2 {
    font-size:30px;
    margin-top:1.5em
}

.site-footer {
    background:linear-gradient(115deg,#263172,#4150a0);
    color:white;
    padding:42px 0 18px
}

.footer-grid {
    display:grid;
    grid-template-columns:1fr auto;
    gap:60px;
    align-items:center
}

.footer-logo .brand-mark {
    width:50px;
    height:50px;
    font-size:30px
}

.footer-logo .brand-copy strong {
    font-size:20px
}

.footer-brand-wrap {
    display: flex;
    align-items: center;
    gap: 28px;
}

.footer-brand-mark {
    width: 130px;
    height: auto;
    flex: 0 0 auto;
}

.footer-brand strong {
    display: block;
    margin-bottom: 10px;
    font-size: 18px;
	font-weight: 600;
}

.footer-brand p {
    margin: 0;
    font-size: 14px;
    line-height: 1.9;
}

.footer-brand a,
.footer-nav a {
    text-decoration:none
}

.footer-nav {
    display: flex;
    gap: 0;
    flex-wrap: wrap;
}

.footer-nav a {
    position: relative;
    text-decoration: none;
    display: flex;
    align-items: center;
}

.footer-nav a + a::before {
    content: "|";
    margin: 0 14px;
    opacity: .75;
}

.footer-nav a span {
    position: relative;
    padding-bottom: 4px;
}

.footer-nav a span::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1px;
    background: currentColor;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .25s ease;
}

.footer-nav a:hover span::after {
    transform: scaleX(1);
}

.footer-contact {
    display: grid;
    gap: 8px;
    margin: 0;
}

.footer-contact a {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
	color:#fff;
}

.footer-contact a:hover {
	color:#9a9fce;
}

.footer-icon {
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
    fill: currentColor;
}
.copyright {
    text-align:center;
    font-size:12px;
    opacity:.8;
    margin-top:18px
}

/*========================================LARGE MONITOR BREAKPOINT========================================*/
@media (min-width:1600px) {
    :root {
        --shell:1480px
    }
    .hero-grid {
        min-height:590px
    }
    .hero-image {
        min-height:590px
    }
}
/*========================================LAPTOP BREAKPOINT========================================*/

@media (max-width:1200px) {
    .shell {
        width:min(calc(100% - 44px),1120px)
    }
    .desktop-nav {
        gap:24px
    }
    .hero-copy {
        padding-right:38px
    }
    .condition-grid {
        grid-template-columns:repeat(3,1fr)
    }
}
/*========================================TABLET BREAKPOINT========================================*/

@media (max-width:1050px) {
    .desktop-nav {
        display:none
    }
    .menu-toggle {
        display:block;
        margin-left:auto
    }
    .brand-row {
        min-height:94px
    }
    .tagline {
        font-size:20px
    }
    .brand-copy strong {
        font-size:28px
    }
    .hero-grid {
        grid-template-columns:1fr
    }
    .hero-copy {
        grid-column:1;
        width:min(calc(100% - 44px),960px);
        margin-inline:auto;
        padding:54px 0 42px
    }
    .hero-image {
        grid-column:1;
        min-height:390px
    }
    .hero-image::before {
        display:none
    }
	    .page-hero::after {
        width: 52%;
        opacity: .30;
    }
	    .page-hero-content {
        width: 78%;
    }
    .feature-box {
        grid-template-columns:1fr
    }
    .feature+.feature {
        border-left:0;
        border-top:1px solid var(--line)
    }
    .feature {
        grid-template-columns:62px 1fr
    }
    .help-grid {
        display: grid;
        grid-template-columns: 1fr;
        min-height: 0;
    }

    .help-copy {
        grid-column: 1;
        grid-row: 1;
        width: min(calc(100% - 44px), 960px);
        margin-inline: auto;
        padding: 48px 0;
    }

    .help-copy-inner {
        width: 100%;
    }

    .condition-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 28px 36px;
    }

    .help-image {
        grid-column: 1;
        grid-row: 2;
        position: relative;
        width: 100%;
        min-height: 320px;
        justify-self: stretch;
    }

    .help-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
    }

    .help-image::before {
        display: none;
    }
    .split,
.contact-layout {
        grid-template-columns:1fr
    }
	    .team-strip {
        padding: 48px 0;
    }

    .team-row {
        grid-template-columns: 1fr;
        gap: 28px;
        align-items: start;
    }

    .team-row p {
        max-width: 760px;
    }

    .team-row .btn {
        width: min(100%, 360px);
        justify-self: start;
    }
	    .visit-strip {
        padding: 48px 0;
        overflow: hidden;
    }

    .visit-grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: 32px;

        padding-right: 0;
        min-height: 0;
    }

    .visit-info {
        display: flex;
        align-items: flex-start;
        gap: 22px;
    }

    .visit-copy {
        min-width: 0;
    }

    .visit-copy h3 {
        margin-top: 0;
    }

    .contact-buttons {
        width: min(100%, 420px);
    }

    .visit-image {
        position: static;
        width: min(420px, 70%);
        margin: 8px auto 0;
        justify-self: center;
        pointer-events: none;
    }

    .visit-image img {
        display: block;
        width: 100%;
        height: auto;
    }

    .visit-image img {
        margin:0 auto
    }
	    .resources-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
/*========================================MOBILE BREAKPOINT========================================*/

@media (max-width:767px) {
    .shell {
        width:calc(100% - 32px)
    }
    .hero-copy {
        width:calc(100% - 32px)
    }
    .brand-row {
        min-height:78px
    }
    .tagline {
        display:none
    }
	.site-logo {
        width: 260px;
    }
    .brand-mark {
        width:42px;
        height:42px;
        font-size:28px
    }
    .brand-copy strong {
        font-size:23px
    }
    .brand-copy small {
        font-size:10px
    }
    .nav-row {
        min-height:54px
    }
    .hero-copy {
        padding-top:42px
    }
    .hero-image {
        min-height:290px
    }
    .hero-actions {
        display:grid;
        grid-template-columns:1fr
    }
	    .page-hero::after {
        width: 70%;
        opacity: .20;
    }
	    .page-hero-content {
        width: 100%;
    }
    .feature {
        padding:24px 20px
    }
    .help-copy {
        width: calc(100% - 32px);
        padding: 40px 0;
    }

    .condition-grid {
        grid-template-columns: 1fr;
        gap: 22px;
    }

    .help-image {
        min-height: 260px;
    }

	    .team-strip {
        padding: 40px 0;
    }

    .team-row {
        gap: 22px;
		grid-template-columns:1fr;
		padding-right: 0;
    }

    .team-row .btn {
        width: 100%;
    }
	a.btn.primary.meet-the-team-button{
		padding:50px;
		text-align: center;
	}
    .visit-strip {
        padding: 40px 0;
    }

    .visit-grid {
        gap: 26px;
    }

    .visit-info {
        gap: 16px;
    }

    .visit-icon {
        width: 58px;
        height: 58px;
        flex: 0 0 58px;
    }

    .visit-icon svg {
        width: 26px;
        height: 26px;
    }

    .visit-copy h3 {
        font-size: 23px;
    }

    .visit-address {
        margin-bottom: 14px;
    }

    .contact-buttons {
        width: 100%;
    }

    .visit-image {
        width: min(300px, 82%);
        margin-top: 4px;
    }
    .service-list {
        grid-template-columns:1fr
    }
    .page-hero {
        padding:54px 0 38px
    }
    .page-section {
        padding:52px 0
    }
	    .resources-grid {
        grid-template-columns: 1fr;
    }

    .resource-card {
        padding: 22px;
    }

    .resource-logo {
        min-height: 120px;
    }


/* MOBILE FOOTER */

.footer-grid {
    grid-template-columns: 1fr;
    gap: 38px;
    text-align: center;
}

.footer-brand-wrap {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
}

.footer-brand-mark {
    width: 80px;
    flex: 0 0 80px;
}

.footer-brand {
    text-align: left;
}

.footer-brand p {
    margin: 0;
}

.footer-nav {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: nowrap;
    gap: 0;
}

.footer-nav a {
    display: flex;
    align-items: center;
    white-space: nowrap;
    font-size: 16px;
}

.footer-nav a + a::before {
    content: "|";
    margin: 0 12px;
    opacity: .75;
}

.copyright {
    margin-top: 0;
    text-align: center;
}
}

@media (prefers-reduced-motion:reduce) {
    *,
*::before,
*::after {
        scroll-behavior:auto!important;
        transition:none!important;
        animation:none!important
    }
    .reveal,
.stagger > * {
        opacity:1!important;
        transform:none!important
    }
}