:root{
/* Brand colours as RGB triples (no hex) */
--dark1: 51, 90, 107;     
--dark2: 88, 150, 177;   
--light1: 216, 205, 186;  
--light2: 224, 220, 210;  
--black: 56, 52, 48;      
--white: 255, 255, 255;  
}
.reference-only{
--dark1: color: rgb(51, 90, 107);
--dark2: color: rgb(88, 150, 177);
--light1: color: rgb(216, 205, 186);
--light2: color rgb(224, 220, 210);
--black: color: rgb(56, 52, 48);
--white: color: rgb(255, 255, 255);
}
*{box-sizing:border-box}
html {
  scroll-behavior: smooth;
}
body{
margin:0;
font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
background: rgb(var(--dark1));
color: rgb(var(--dark2));
line-height:1.6;
padding-top:80px;
}
.light1 {color:var(--light1)}
.light2 {color:var(--light2)}
a{color: rgb(var(--dark1)); text-decoration:none;}
a:hover{text-decoration:underline}
a.light {color: rgb(var(--light1))}
.site-nav{
position:fixed;
inset:0 0 auto 0;
height:80px;
z-index:1000;
display:flex;
align-items:center;
justify-content:space-between;
padding:14px 32px;
background: rgb(var(--white));
box-shadow:0 2px 22px rgba(0,0,0,.26);
}

.brand-link{
display:flex;
align-items:center;
gap:12px;
font-weight:600;
font-size:.95rem;
color: rgb(var(--dark2));
}

.brand-link img{width:50px;height:50px;object-fit:cover;}
/* Hue-rotate the logo based on the dark hue slider */
.brand-link img{
filter: hue-rotate(var(--logo-hue-rotate, 0deg));
transition: filter .12s linear;
}


.nav-list{display:flex;gap:24px;list-style:none;margin:0;padding:0;}

.nav-list a{
color: rgb(var(--dark2));
font-size:.9rem;
font-weight:500;
position:relative;
padding:4px 0;
text-decoration:none;
}

.nav-list a::after{
content:"";
position:absolute;
left:0;
bottom:-4px;
width:100%;
height:2px;
background:currentColor;
opacity:0;
transform:scaleX(.8);
transition:.2s ease;
}

.nav-list a:hover::after{opacity:1;transform:scaleX(1);}

.nav-toggle{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);}

.nav-burger{display:none;width:44px;height:44px;cursor:pointer;flex-direction:column;justify-content:center;gap:5px;}

.nav-burger span{width:22px;height:2px;background: rgb(var(--black));}

.hero-bg{
position:relative;
inset:0;
height:calc(75svh - 80px);
top:0px;
z-index:0;
aspect-ratio: 16:9;
background:url("/images/hitchin-market-square-wide.jpg");
background-position:bottom;
background-size: cover;
filter: contrast(0.9);
}
/* changed only the hard-coded rgba to use your palette */
.hero-bg::after{
content:"";
position:absolute;
inset:0;
background: rgba(var(--light2), 0);
}

/* .hero-overlay{
position:absolute;
inset:0;
bottom:calc(25% + 20px);
right:0;
z-index:0;
pointer-events:none;
display:flex;
align-items:flex-end;
} */

.hero-text{width:100vw;margin:0 auto 0;right:0;padding:1%;text-align:right;position:absolute;bottom:0;z-index:5;background:linear-gradient(-90deg,rgba(0,0,0,0.3),rgba(0,0,0,0))}

.hero-text h1{
font-size:clamp(1.8rem,4.5vw,2.8rem);
line-height:0;
font-weight:500;
color: rgb(var(--light2));
text-shadow:0 2px 18px rgba(0,0,0,.55);
}
.artwork-credit{
  font-size:.8rem;
  opacity:.7;
  margin:4px 0 0;
}

.artwork-credit a{
  color:inherit;
  text-decoration:underline;
}
/* changed only the background to use your palette */


main.page{position:relative;z-index:1;width:100%;}

.content-sheet,.section{width:100%;padding:72px 0;background: rgb(var(--dark2));}

.content-sheet{margin-top:0;background: rgb(var(--dark1));padding-top:40px;}

.container{max-width:1100px;margin:0 auto;padding:0 20px;}

.section+.section{border-top:1px solid rgba(0,0,0,.06);}

h2{margin:0 0 10px;font-size:clamp(2.4rem,2.8vw,3.3rem);color: rgb(var(--dark1));letter-spacing:0.2px;line-height:1.2;margin-bottom:20px}
h3 {font-size:clamp(1.6rem,2.2vw,1.8rem);margin:0}
h2 a[href^="tel"] {
    color: inherit;
    text-decoration: none;
}

h2 a[href^="tel"]:hover {
    color: inherit;
}
[id]{scroll-margin-top:80px;}

ul.two-columns{column-count:2;column-gap:2rem;}

ul{padding-left:20px}

#about.content-sheet{padding-top:80px;position:relative;overflow:hidden}
#about.homepage{padding-top:40px;position:relative;overflow:hidden}


.article h1 {font-size:clamp(2rem,4.5vw,3.2rem);}
.article h2 {font-size:clamp(1.2rem,3.5vw,2.2rem);}
.legal-page {background:white;color:#333;margin-top:0;padding-top:1rem;margin-bottom:0;padding-bottom:1rem}
.legal-page h1 {font-size:clamp(1.8rem,3vw,2.8.2rem);color:#555}
.legal-page h2 {font-size:clamp(1rem,2vw,1.8rem);color:#555}
/* gradients updated to rgb() wrappers */
.secondary1{background:linear-gradient(45deg, rgb(var(--dark1)) 0%, rgb(var(--dark2)));}

.secondary2{background:linear-gradient(-45deg, rgb(var(--light1)) 0%, rgb(var(--light2)));}

.secondary1 h2{color: rgb(var(--light1))}
.secondary1 h3{color: rgb(var(--light2))}
.secondary1 p{color: rgb(var(--light2))}
.secondary2 h2,.secondary2 h3{color: rgb(var(--dark2))}
.secondary2 p{color: rgb(var(--dark1))}

.therapists{padding:80px 0}
.therapists__header{margin-bottom:28px;}

.therapists__header p{margin:0;max-width:70ch;opacity:0.95;}

.therapists__grid{display:grid;grid-template-columns:repeat(12,1fr);gap:18px;}

.therapist-card{
grid-column:span 12;
display:grid;
grid-template-columns:150px 1fr;
column-gap:18px;
row-gap:12px;
background: rgb(var(--white));
border:1px solid rgba(0,0,0,.06);
border-radius:16px;
padding:18px;
box-shadow:0 8px 22px rgba(0,0,0,.2);
}

.therapist-card__photo{
width:150px;
height:180px;
border-radius:14px;
object-fit:cover;
border:1px solid rgba(0,0,0,.06);
object-position:50% 45%;
position:relative;
filter:contrast(1.05) saturate(0.85) brightness(1.02);
border-radius:14px;
box-shadow:0 1px 0 rgba(255,255,255,.4) inset, 0 6px 18px rgba(0,0,0,.32);margin-bottom:1rem
}

.therapist-card__meta{align-self:start;}

.therapist-card__name{margin:0;font-size:1.15rem;color: rgb(var(--dark2))!important;line-height:1.2;}

.therapist-card__role{margin:6px 0 0;font-size:.95rem;color: rgb(var(--dark1))!important;}

.therapist-card__bio{grid-column:1/-1;margin:0;color: rgb(var(--black))!important;opacity:0.95;line-height:1.65;}

@media (min-width:900px){
.therapist-card{grid-column:span 6;}
}

@media (max-width:520px){
.therapist-card__photo{width:150px;height:150px;}

}
.related-articles {
    margin-top: 5rem;
    padding-top: 2.5rem;
    
    border-bottom: 0;
    box-shadow: none;
    background: transparent;
}
.related-articles h2 {
    margin-bottom: 2rem;
}

.related-articles__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
}

.related-article-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 2rem;
    background: rgba(var(--white), .4);
    border-radius: 12px;
    transition: transform .2s ease, box-shadow .2s ease;
}



.related-article-card h3 {
    margin: 0 0 1rem;
    line-height: 1.25;
}

.related-article-card p {
    margin: 0;
    line-height: 1.7;
    flex-grow: 1;
}

.related-article-card a {
    color: inherit;
    text-decoration: none;
}

.related-article-card h3 a:hover {
    text-decoration: underline;
}
/* updated only the one border colour that referenced a specific rgb */
section{
box-shadow:0 0 60px rgba(55,41,20,0.119);
border-bottom:1px solid rgba(var(--dark1), 0.2);
}
.therapist-profile__photo {border:2px solid white;height:200px;width:200px;border-radius:100%;box-shadow:10px 10px 20px rgba(56, 53, 48, 0.438)}
img.therapist-profile__photo {object-fit: cover}
.center {text-align:center}
.underline {text-decoration:underline}
.small {font-size:8pt}
@media (max-width:950px){
.site-nav{flex-wrap:wrap;padding:12px 20px;position:fixed;left:0;right:0;}
.nav-burger{display:flex;transform:translate(10px,0px);}
.nav-list{
  display:flex;
  position:absolute;
  top:100%;
  left:0;
  right:0;
  width:100%;
  flex-direction:column;
  gap:10px;
  margin:0;
  padding:14px 20px 16px;
  background: rgb(var(--light2));
  border-top:1px solid rgba(0,0,0,.08);
  box-shadow:0 12px 24px rgba(0,0,0,.10);
  max-height:0;
  overflow:hidden;
  opacity:0;
  transform:translateY(-6px);
  visibility:hidden;
  pointer-events:none;
  transition:max-height .28s ease,opacity .22s ease,transform .22s ease,visibility 0s linear .28s;
}
.nav-list a{display:block;padding:10px 0;text-decoration:none}
.nav-toggle:checked~.nav-list{
  max-height:60vh;
  opacity:1;
  transform:translateY(0);
  visibility:visible;
  pointer-events:auto;
  transition:max-height .32s ease,opacity .22s ease,transform .22s ease,visibility 0s;
}
.brand-secondary{display:none}
}

@media (prefers-reduced-motion:reduce){
.hero-blur{
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
  background: rgba(0,0,0,0.15);
}
.hero-text{transition:none!important;transform:none!important;}
}
@media (max-width:800px){

  .hero-bg{
    background:url("/images/hitchin-market-square4.jpg");
    height:auto;width:100vw!important;
    aspect-ratio:16 / 9; /* use actual image ratio */
    background-size:100%;
    background-position:center top;
    background-repeat:no-repeat;
   
  }

}