
:root{
  --ink:#1f2937;
  --header:#3A5050;
  --dimity:#E8D7D1;
  --max:960px;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;display:flex;flex-direction:column;min-height:100vh;
     font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
     background:var(--dimity);color:var(--ink);font-size:18px}
.container{max-width:var(--max);margin:0 auto;padding:36px}
.main{flex:1}
.site-header{position:sticky;top:0;z-index:100;background:var(--header);color:#fff}
.nav-wrap{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap}
.brand{font-family:'Playfair Display',serif;font-size:1.8rem;color:#fff}
.nav a{color:#fff;text-decoration:none;margin-left:16px;font-weight:500}
.nav a:hover{text-decoration:underline}
.hero-grid{display:grid;grid-template-columns:1fr 1.2fr;gap:32px;align-items:center}
.portrait{max-width:300px;border-radius:12px;box-shadow:0 6px 20px rgba(0,0,0,0.15)}
h1{font-family:'Playfair Display',serif;font-size:2.8rem;line-height:1.15;margin:0 0 16px}
h2{font-family:'Playfair Display',serif;font-size:2.0rem;line-height:1.25;margin:16px 0 10px}
p,li{line-height:1.8}
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:28px;margin:20px 0}
.two-col > *{padding-right:8px}
.two-col > .right{padding-left:16px}
.button{background:var(--header);color:#fff;padding:10px 18px;border-radius:8px;text-decoration:none;display:inline-block;margin-top:10px}
.button:hover{opacity:.9}
.site-footer{background:var(--header);color:#fff;text-align:center;padding:20px;margin-top:auto}
.site-footer .button{margin-top:10px;background:#fff;color:var(--header)}
@media(max-width:900px){
  .hero-grid{grid-template-columns:1fr}
  .two-col{grid-template-columns:1fr}
  .nav-wrap{flex-direction:column}
  .nav a{margin:8px}
}

/* Header layout: brand left, nav right */
.nav-wrap{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap}
.brand{font-family:'Playfair Display',serif;font-size:1.8rem;color:#fff;margin-right:auto}
.nav{margin-left:auto;display:flex;gap:16px;flex-wrap:wrap}
.nav a{color:#fff;text-decoration:none;font-weight:500}
.nav a:hover{text-decoration:underline}
@media(max-width:900px){
  .nav-wrap{flex-direction:column;align-items:center}
  .nav{justify-content:center;margin-top:8px}
}


/* v5 header layout: brand hard-left, nav hard-right, tighter padding */
.site-header{text-align:left}
.site-header .container{padding-left:16px;padding-right:16px}
.nav-wrap{display:flex;align-items:center;justify-content:space-between;flex-wrap:nowrap}
.brand{display:block;margin-right:auto;text-align:left}
.nav{margin-left:auto;display:flex;gap:18px;flex-wrap:wrap}
.nav a{margin-left:0}
@media(max-width:780px){
  .nav-wrap{flex-wrap:wrap}
  .nav{width:100%;justify-content:flex-start;margin-top:8px}
}

.footer-bullets {
  list-style: none;
  padding: 0;
  margin: 0 0 15px;
}
.footer-bullets li {
  margin: 5px 0;
}


/* === V2 Layout Tweaks === */
.hero-title{ text-align:center; margin: 8px 0 10px; }
.hero-title h1{ font-family:'Playfair Display',serif; font-size:2.0rem; margin:0; }
.hero-title .subhead{ font-size:1rem; color:#ffffffcc; margin-top:4px; }

.hero-media .portrait.shift-left{ margin-left:-14px; }

/* Nav right-aligned */
.nav{ margin-left:auto; display:flex; gap:16px; justify-content:flex-end; }

/* Footer grid: address left, bullets right */
.footer-grid{ display:flex; gap:24px; justify-content:space-between; align-items:flex-start; flex-wrap:wrap; }
.footer-left, .footer-right{ flex:1 1 300px; }
.footer-left a{ color:#fff; text-decoration:none; }
.footer-left a:hover{ text-decoration:underline; }
.footer-bullets{ list-style:disc; padding-left:22px; margin:0; }
.footer-bullets li{ margin:6px 0; }

/* Small print */
.footer-copy{ margin-top:14px; opacity:0.9; font-size:0.9rem; }

@media(max-width:900px){
  .hero-title h1{ font-size:1.6rem; }
  .hero-title .subhead{ font-size:0.95rem; }
  .footer-grid{ flex-direction:column; }
}


.brand h1 { font-family:'Playfair Display', serif; font-size:2.4rem; margin:0; }
.brand .subhead { font-size:1.2rem; color:#ddd; margin:0; }
.hero-media .portrait.shift-left { margin-left:-20px; display:block; }


/* === Header alignment fixes === */
.nav-wrap{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap}
.brand{display:block;width:300px;text-align:center;margin-right:auto}
.brand h1{font-family:'Playfair Display',serif;font-size:2.2rem;line-height:1.1;margin:0;color:#fff}
.brand .subhead{font-size:1.05rem;color:#e8e8e8;margin-top:2px}
.nav{margin-left:auto;display:flex;gap:16px;flex-wrap:wrap;justify-content:flex-end}
.nav a{color:#fff;text-decoration:none;font-weight:500}

/* Portrait alignment under brand */
.hero-grid{align-items:flex-start}
.hero-media{justify-self:start}
.portrait.shift-left{margin-left:0}

/* Footer two-column persists */
.footer-grid{display:flex;gap:24px;justify-content:space-between;align-items:flex-start;flex-wrap:wrap}
.footer-left,.footer-right{flex:1 1 300px}
.footer-bullets{list-style:disc;padding-left:22px;margin:0}
.footer-bullets li{margin:6px 0}

/* Mobile adjustments */
@media(max-width:900px){
  .brand{width:100%;text-align:center;margin-right:0;margin-bottom:8px}
  .nav{width:100%;justify-content:center}
  .portrait.shift-left{margin:0 auto}
}


/* === V8: Header brand centered on left; portrait offset === */
.brand{display:block;width:320px;text-align:center;margin-right:auto}
.brand h1{font-family:'Playfair Display',serif;font-size:2.3rem;line-height:1.1;margin:0;color:#fff}
.brand .subhead{font-size:1.05rem;color:#e8e8e8;margin-top:2px}

/* Push nav to right */
.nav{margin-left:auto;display:flex;gap:16px;flex-wrap:wrap;justify-content:flex-end}

/* Move image down and to the left */
.portrait.shift-left{margin-left:-28px;margin-top:14px;display:block}

/* Keep mobile sane */
@media(max-width:900px){
  .brand{width:100%;text-align:center;margin-right:0;margin-bottom:8px}
  .nav{width:100%;justify-content:center}
  .portrait.shift-left{margin-left:0;margin-top:10px}
}


/* === V9: Header brand aligned left, centered above photo === */
.brand{display:block;width:320px;text-align:center;margin-right:auto}
.brand h1{font-family:'Playfair Display',serif;font-size:2.4rem;margin:0;color:#fff}
.brand .subhead{font-size:1.2rem;color:#eee;margin:0}

/* Nav to right */
.nav{margin-left:auto;display:flex;gap:16px;flex-wrap:wrap;justify-content:flex-end}

/* Portrait positioned under brand */
.portrait.shift-left{margin-left:-30px;margin-top:20px;display:block}

/* Mobile */
@media(max-width:900px){
  .brand{width:100%;text-align:center;margin:0 auto 8px}
  .nav{width:100%;justify-content:center}
  .portrait.shift-left{margin:10px auto 0}
}


/* === V11 Homepage Fix === */
.nav-wrap{display:flex;align-items:center;justify-content:space-between}
.brand-left{text-align:left;margin-right:auto}
.brand-left h1{font-family:'Playfair Display',serif;font-size:2.4rem;margin:0;color:#fff}
.brand-left .subhead{font-size:1.1rem;color:#eee;margin-top:2px}
.nav-right{margin-left:auto;display:flex;gap:16px;flex-wrap:wrap;justify-content:flex-end}
.nav-right a{color:#fff;text-decoration:none;font-weight:500}

/* Portrait down and left */
.portrait.shift-left{margin-left:-40px;margin-top:30px;display:block}

/* Mobile handling */
@media(max-width:900px){
  .nav-wrap{flex-direction:column}
  .brand-left{text-align:center;margin:0 auto 8px}
  .nav-right{width:100%;justify-content:center}
  .portrait.shift-left{margin:10px auto 0}
}


/* === V12 Homepage header/hero fixes === */

/* Brand on left */
.brand-left{text-align:left;margin-right:auto}
.brand-left h1{font-family:'Playfair Display',serif;font-size:2.5rem;margin:0;color:#fff}
.brand-left .subhead{font-size:1.1rem;color:#eee;margin-top:2px}

/* Nav aligned right */
.nav{margin-left:auto;display:flex;gap:18px;flex-wrap:wrap;justify-content:flex-end}
.nav a{color:#fff;text-decoration:none;font-weight:500}

/* Portrait down & left under brand */
.portrait.shift-left{margin-left:-40px;margin-top:28px;display:block}

/* Hero headline stacked styling */
.hero-copy h1{font-size:2.8rem;line-height:1.2;font-family:'Playfair Display',serif}
.hero-copy h1 br{content:'';}

/* Mobile adjustments */
@media(max-width:900px){
  .brand-left{text-align:center;margin:0 auto 8px}
  .nav{width:100%;justify-content:center}
  .portrait.shift-left{margin:12px auto 0}
  .hero-copy h1{font-size:2.0rem}
}


/* === V13 Homepage fixes === */

/* Header name on left, smaller font */
.brand-left{text-align:left;margin-right:auto}
.brand-left h1{font-family:'Playfair Display',serif;font-size:1.8rem;margin:0;color:#fff}
.brand-left .subhead{font-size:1rem;color:#eee;margin-top:2px}

/* Nav on right */
.nav{margin-left:auto;display:flex;gap:18px;flex-wrap:wrap;justify-content:flex-end}

/* Portrait placement in hero */
.portrait.shift-left{margin-left:-35px;margin-top:35px;display:block}

/* Hero headline smaller */
.hero-copy h1{font-size:2.0rem;line-height:1.2;font-family:'Playfair Display',serif}


/* === V14 Homepage alignment fixes === */

/* Header: name/title left */
.brand-left{text-align:left;margin-right:auto}
.brand-left h1{font-family:'Playfair Display',serif;font-size:2.0rem;margin:0;color:#fff}
.brand-left .subhead{font-size:1rem;color:#eee;margin-top:2px}

/* Nav: right side, larger font, align with hero text */
.nav{margin-left:auto;display:flex;gap:20px;flex-wrap:wrap;justify-content:flex-end;align-items:flex-start}
.nav a{color:#fff;text-decoration:none;font-weight:600;font-size:1.05rem}

/* Hero portrait alignment: down & left */
.portrait.shift-left{margin-left:-40px;margin-top:25px;display:block}

/* Hero headline smaller */
.hero-copy h1{font-size:1.8rem;line-height:1.2;font-family:'Playfair Display',serif}

/* Mobile adjustments */
@media(max-width:900px){
  .brand-left{text-align:center;margin:0 auto 8px}
  .nav{width:100%;justify-content:center}
  .portrait.shift-left{margin:12px auto 0}
  .hero-copy h1{font-size:1.5rem}
}


/* === V15: Header grid aligned with hero grid, strict left group, nav right === */
.nav-wrap{
  display:grid;
  grid-template-columns: 1fr 1.2fr; /* match hero-grid */
  column-gap:32px;
  align-items:center;
}
.brand-left{
  grid-column:1;
  text-align:left;
}
.brand-left h1{
  font-family:'Playfair Display',serif;
  font-size:1.9rem; /* smaller than before */
  margin:0;
  color:#fff;
}
.brand-left .subhead{
  font-size:1.05rem;
  color:#eee;
  margin-top:2px;
}
.nav{
  grid-column:2;
  justify-self:start; /* align with hero text start */
  display:flex;
  gap:20px;
  flex-wrap:wrap;
}
.nav a{
  color:#fff;
  text-decoration:none;
  font-weight:600;
  font-size:1.1rem; /* larger nav font */
}

/* Portrait position in hero: down & left to align under name column */
.portrait.shift-left{
  margin-left:-50px;
  margin-top:38px;
  display:block;
}

/* Hero headline smaller */
.hero-copy h1{
  font-size:1.75rem;
  line-height:1.2;
  font-family:'Playfair Display',serif;
}

@media(max-width:900px){
  .nav-wrap{
    grid-template-columns: 1fr; /* stack on mobile */
  }
  .brand-left{
    text-align:center;
    margin-bottom:8px;
  }
  .nav{
    justify-self:center;
  }
  .portrait.shift-left{
    margin-left:0;
    margin-top:12px;
  }
  .hero-copy h1{
    font-size:1.5rem;
  }
}


/* === V16: Larger nav tabs, align Home with Therapy === */
.nav{
  grid-column:2;
  justify-self:start;
  display:flex;
  gap:28px; /* add spacing */
  flex-wrap:wrap;
  margin-left:4px; /* fine tune alignment */
}
.nav a{
  color:#fff;
  text-decoration:none;
  font-weight:700;
  font-size:1.3rem; /* larger tabs */
}


/* === V17: Nav tabs aligned with hero text === */
.nav-wrap{
  display:grid;
  grid-template-columns:1fr 1.2fr; /* same grid as hero */
  column-gap:32px;
  align-items:center;
}
.brand-left{grid-column:1;text-align:left}
.nav{grid-column:2;justify-self:start;display:flex;gap:28px;flex-wrap:wrap}
.nav a{color:#fff;text-decoration:none;font-weight:700;font-size:1.3rem}


/* === V18: Header aligned per example === */

/* Header layout */
.nav-wrap {
  display: grid;
  grid-template-columns: 1fr 1.2fr; /* match hero grid columns */
  column-gap: 32px;
  align-items: center;
}

/* Left: name + title */
.brand-left {
  grid-column: 1;
  text-align: left;
}
.brand-left h1 {
  font-family: 'Playfair Display', serif;
  font-size: 1.9rem;
  margin: 0;
  color: #fff;
}
.brand-left .subhead {
  font-size: 1rem;
  color: #eee;
  margin-top: 2px;
}

/* Right: nav tabs aligned with hero text */
.nav {
  grid-column: 2;
  justify-self: start; /* align with hero text start */
  display: flex;
  gap: 28px;
  flex-wrap: wrap;
}
.nav a {
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  font-size: 1.25rem; /* larger font for tabs */
}

/* Mobile stack */
@media(max-width:900px) {
  .nav-wrap {
    grid-template-columns: 1fr;
  }
  .brand-left {
    text-align: center;
    margin-bottom: 8px;
  }
  .nav {
    justify-self: center;
  }
}


/* === V19: Fine-tune nav left alignment === */
.nav {
  margin-left: -8px; /* nudge nav a touch left */
}


/* === Mobile dropdown menu (Option A) === */
.menu-toggle{
  display:none;
  background:transparent;
  border:0;
  font-size:1.8rem;
  line-height:1;
  padding:8px 10px;
  color:#fff;
  cursor:pointer;
}

/* Desktop unchanged; mobile switches to dropdown */
@media(max-width:900px){
  .menu-toggle{display:block; margin-left:auto}
  .nav{display:none; flex-direction:column; gap:12px; width:100%}
  .site-header .nav a{padding:6px 0}
  .site-header.open .nav{display:flex}
  /* Align the header stack on mobile */
  .nav-wrap{grid-template-columns:1fr; row-gap:8px}
}


/* === Mobile footer alignment fixes === */
@media(max-width:900px){
  .footer-left p{
    text-align:center;
  }
  .footer-bullets{
    text-align:left;
    list-style-position: outside;
    padding-left:22px; /* ensure dots sit just left of text */
    margin: 0 auto;
  }
}


/* === Mobile footer + portrait refinements === */
@media(max-width:900px){
  /* Center address block more precisely */
  .footer-left p{
    text-align:center;
    margin: 0 auto 10px auto;
    max-width: 260px; /* keeps it aligned closer to bullets */
  }
  /* Reduce spacing between address and bullets */
  .footer-grid{
    gap: 8px;
    flex-direction:column;
    align-items:center;
  }
  .footer-right{
    margin-top:0;
  }
  /* Bullet list remains left-aligned */
  .footer-bullets{
    text-align:left;
    list-style-position: outside;
    padding-left:22px;
    margin:0 auto;
  }
  /* Center portrait images */
  .hero-media .portrait{
    margin: 0 auto;
    display:block;
  }
}


/* === Mobile footer spacing adjustment === */
@media(max-width:900px){
  /* Remove extra spacing between address and bullet points */
  .footer-grid{
    gap: 0;
    flex-direction:column;
    align-items:center;
  }
  .footer-left p{
    margin-bottom:4px; /* tighter space */
  }
  .footer-right{
    margin-top:0;
  }
  /* Portrait images centered */
  .hero-media .portrait{
    margin: 0 auto;
    display:block;
  }
}


/* === Mobile portrait + footer hard overrides === */
@media(max-width:900px){
  /* Force portraits centered on mobile */
  .hero-media .portrait,
  .hero-media .portrait.shift-left{
    margin: 0 auto !important;
    display: block !important;
    float: none !important;
  }

  /* Footer: tighten address + bullets spacing */
  .footer-grid{
    gap: 0 !important;
    flex-direction: column !important;
    align-items: center !important;
  }
  .footer-left p{
    margin: 0 auto 4px auto !important;
    text-align: center !important;
  }
  .footer-right{
    margin-top: 0 !important;
  }
  .footer-bullets{
    margin-top: 0 !important;
    padding-top: 0 !important;
    text-align: left !important;
    list-style-position: outside !important;
    padding-left: 22px !important;
  }
}
