/* ==========================================================================
   Abbeygate Psychology – site styles
   A hand-built copy of the original Divi design.

   Screen sizes used throughout:
     Desktop  981px and wider
     Tablet   768px – 980px
     Phone    767px and narrower
   ========================================================================== */


/* ---------- 1. Fonts & design tokens ---------- */

/* Fonts are served from the fonts folder (not Google Fonts), so they are
   cached with the site and ready before the page is drawn. font-display: block
   keeps text hidden for the moment before a font is ready, instead of drawing
   it in Arial first and shifting everything when the real font arrives.
   Open Sans is one file covering every weight; the separate weights below
   match the ones the original site loaded, so text renders exactly as before. */
@font-face { font-family: 'Open Sans'; font-style: normal; font-weight: 400; font-display: block; src: url(fonts/open-sans.woff2) format('woff2'); }
@font-face { font-family: 'Open Sans'; font-style: normal; font-weight: 600; font-display: block; src: url(fonts/open-sans.woff2) format('woff2'); }
@font-face { font-family: 'Open Sans'; font-style: normal; font-weight: 700; font-display: block; src: url(fonts/open-sans.woff2) format('woff2'); }
@font-face { font-family: 'Taviraj'; font-style: normal; font-weight: 400; font-display: block; src: url(fonts/taviraj-400.woff2) format('woff2'); }
@font-face { font-family: 'Taviraj'; font-style: italic; font-weight: 400; font-display: block; src: url(fonts/taviraj-400-italic.woff2) format('woff2'); }
@font-face { font-family: 'Taviraj'; font-style: normal; font-weight: 500; font-display: block; src: url(fonts/taviraj-500.woff2) format('woff2'); }
@font-face { font-family: 'Taviraj'; font-style: normal; font-weight: 600; font-display: block; src: url(fonts/taviraj-600.woff2) format('woff2'); }
@font-face { font-family: 'Hind'; font-style: normal; font-weight: 600; font-display: block; src: url(fonts/hind-600.woff2) format('woff2'); }

:root {
  --olive: #636b2f;
  --text: #666;
  --heading: #333;
  --link: #1e73be;

  --font-body: 'Open Sans', Arial, sans-serif;
  --font-serif: 'Taviraj', Georgia, 'Times New Roman', serif;
  --font-button: 'Hind', Helvetica, Arial, Lucida, sans-serif;

  --card-shadow: 0 40px 110px 0 rgba(131, 146, 167, .5);

  /* Default vertical padding for sections and rows (changes with screen size) */
  --section-pad: 24px;
  --row-pad: 24px;

  /* Icons (taken from the original theme's icon font) */
  --icon-menu: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1024 1024'%3E%3Cpath transform='matrix(1 0 0 -1 0 960)' d='M224 448h576c17.7 0 32 14.3 32 32s-14.3 32-32 32h-576c-17.7 0-32-14.3-32-32s14.3-32 32-32zM224 640h576c17.7 0 32 14.3 32 32s-14.3 32-32 32h-576c-17.7 0-32-14.3-32-32s14.3-32 32-32zM224 256h576c17.7 0 32 14.3 32 32s-14.3 32-32 32h-576c-17.7 0-32-14.3-32-32s14.3-32 32-32z'/%3E%3C/svg%3E");
  --icon-chevrons-down: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1024 1024'%3E%3Cpath transform='matrix(1 0 0 -1 0 960)' d='M702.6 436.4l-191.7-169.6-191.7 169.6c-12.5 12.5-33 12.5-45.5 0s-12.5-33 0-45.5l214.1-189.4c6.4-6.4 14.8-9.5 23.2-9.3 8.4-0.1 16.8 2.9 23.2 9.3l214.1 189.4c12.5 12.5 12.5 33 0 45.5s-33 12.6-45.5 0.1zM748.1 665.9c-12.5 12.5-33 12.5-45.5 0l-191.7-169.6-191.7 169.6c-12.6 12.5-33 12.5-45.6 0s-12.5-33 0-45.5l214.1-189.4c6.4-6.4 14.8-9.5 23.2-9.3 8.4-0.1 16.8 2.9 23.2 9.3l214.1 189.4c12.7 12.5 12.7 32.9 0.1 45.5z'/%3E%3C/svg%3E");
  --icon-chevrons-left: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1024 1024'%3E%3Cpath transform='matrix(1 0 0 -1 0 960)' d='M265.4 426l189.4-214.1c12.5-12.5 33-12.5 45.5 0s12.5 33 0 45.5l-169.6 191.7 169.6 191.7c12.5 12.5 12.5 33 0 45.5s-33 12.5-45.5 0l-189.4-214c-6.4-6.4-9.4-14.8-9.3-23.2-0.1-8.4 2.9-16.8 9.3-23.2zM729.9 686.5c-12.5 12.5-33 12.5-45.5 0l-189.4-214.1c-6.4-6.4-9.5-14.8-9.3-23.2-0.1-8.4 2.9-16.8 9.3-23.2l189.4-214.1c12.5-12.5 33-12.5 45.5 0s12.5 33 0 45.5l-169.6 191.7 169.6 191.7c12.6 12.6 12.6 33 0.1 45.6z'/%3E%3C/svg%3E");
  --icon-chevron-right: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1024 1024'%3E%3Cpath transform='matrix(1 0 0 -1 0 960)' d='M441.6 185.7c12.5-12.5 32.8-12.5 45.2 0l207.6 207.6c6.3 6.3 9.4 14.5 9.3 22.7 0 8.3-3.1 16.4-9.3 22.7l-207.6 207.6c-12.5 12.5-32.8 12.5-45.2 0s-12.5-32.8 0-45.2l185-185-185-185c-12.5-12.5-12.5-32.8 0-45.2z'/%3E%3C/svg%3E");
  --icon-chevron-up: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1024 1024'%3E%3Cpath transform='matrix(1 0 0 -1 0 960)' d='M359 313.6l185 185 185-185c12.5-12.5 32.8-12.5 45.2 0s12.5 32.8 0 45.2l-207.6 207.6c-6.3 6.3-14.5 9.3-22.7 9.3s-16.4-3.1-22.7-9.3l-207.6-207.6c-12.5-12.5-12.5-32.8 0-45.2s32.8-12.5 45.2 0z'/%3E%3C/svg%3E");
}

@media (min-width: 981px) and (max-width: 1199px) {
  :root { --section-pad: 2%; --row-pad: 2%; }
}
@media (max-width: 980px) {
  :root { --section-pad: 17px; --row-pad: 18px; }
}
@media (max-width: 767px) {
  :root { --section-pad: 32px; --row-pad: 0px; }
}


/* ---------- 2. Base ---------- */

*, *::before, *::after { box-sizing: border-box; }

:where(html, body, div, span, header, footer, main, section, nav,
h1, h2, h3, h4, h5, h6, p, a, img, ul, li, strong, button) {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  /* Always leave room for the scrollbar, so the centred layout (and the menu)
     doesn't shift sideways when the scrollbar appears as a page loads */
  scrollbar-gutter: stable;
}

button {
  -webkit-appearance: none;
  appearance: none;
  font: inherit;
}

body {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.7em;
  color: var(--text);
  background-color: #fff;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

ul { list-style: none; }
a { color: var(--link); text-decoration: none; }
strong { font-weight: 700; }
img { max-width: 100%; height: auto; }

p { padding-bottom: 1em; }
p:last-of-type { padding-bottom: 0; }

h1, h2, h3, h4, h5, h6 {
  color: var(--heading);
  padding-bottom: 10px;
  line-height: 1em;
  font-weight: 500;
}
h1 { font-size: 30px; }
h2 { font-size: 26px; }
h3 { font-size: 22px; }
h4 { font-size: 18px; }
h5 { font-size: 16px; }
h6 { font-size: 14px; }

a:focus { outline: 0; }
a:focus-visible, button:focus-visible, [role="button"]:focus-visible {
  outline: 2px solid var(--link);
  outline-offset: 2px;
}

/* Changing page: the old page fades into the new one over half a second while
   the header stays still, instead of switching abruptly between the very
   different banner photos. On phones and tablets an open menu fades out with
   the old page (see main.js). Browsers without support, and visitors who ask
   for reduced motion, change page instantly as before. Only works when the
   site comes from a web server (like the live site), not when opening the
   files directly. */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  ::view-transition-group(root) { animation-duration: .5s; }
}
/* Wide screens: the header is kept as its own layer so it stays perfectly
   still. Not on phones and tablets, where that layer would trap the drop-down
   menu behind the page content (the header still looks still there, because
   it is the same on both pages). */
@media (min-width: 981px) and (prefers-reduced-motion: no-preference) {
  .site-header { view-transition-name: site-header; }
}


/* ---------- 3. Layout: page, sections, rows, columns ---------- */

/* The whole site sits in a centred "boxed" container */
.page {
  width: 90%;
  max-width: 1120px;
  margin: auto;
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, .2);
}

/* Tablets and phones: the white bars either side shrink as the screen gets
   narrower – 49px each at 980px wide, gone completely by 768px wide.
   To make them disappear at a different width, change both 768s. */
@media (max-width: 980px) {
  .page {
    width: auto;
    margin: 0 max(0px, (100% - 768px) / (980 - 768) * 49);
  }
}

:where(.section) {
  position: relative;
  background-color: #fff;
  background-position: 50%;
  background-size: cover;
  padding: var(--section-pad) 0;
}

:where(.row) {
  position: relative;
  width: 90%;
  max-width: 1120px;
  margin: auto;
  padding: var(--row-pad) 0;
  background-size: cover;
  background-position: 50%;
  background-repeat: no-repeat;
}
.row::after {
  content: "";
  display: block;
  clear: both;
  visibility: hidden;
  height: 0;
  width: 0;
  line-height: 0;
}

:where(.col) {
  position: relative;
  z-index: 2;
  float: left;
  min-height: 1px;
  background-size: cover;
  background-position: 50%;
}

.mod { position: relative; }

@media (min-width: 981px) {
  :where(.col) { margin-right: 3%; }
  :where(.col:last-child) { margin-right: 0; }

  .w-4-4 { width: 100%; }
  .w-3-5 { width: 58.8%; }
  .w-1-2 { width: 48.5%; }
  .w-2-5 { width: 38.2%; }

  /* Space between stacked blocks inside a column */
  :where(.w-4-4 > .mod) { margin-bottom: 1.5%; }
  :where(.w-3-5 > .mod) { margin-bottom: 2.551%; }
  :where(.w-1-2 > .mod) { margin-bottom: 3.093%; }
  :where(.w-2-5 > .mod) { margin-bottom: 3.927%; }
  :where(.col > .mod:last-child) { margin-bottom: 0; }

  /* Rows whose columns stretch to equal height */
  .row.equal { display: flex; }

  .mobile-only { display: none !important; }
}

@media (max-width: 980px) {
  :where(.row) { max-width: 1080px; }

  :where(.col) { width: 100%; margin-bottom: 30px; }
  :where(.col:last-child) { margin-bottom: 0; }
  .col-empty { display: none; }

  :where(.col > .mod) { margin-bottom: 30px; }
  :where(.col > .mod:last-child) { margin-bottom: 0; }

  .desktop-only { display: none !important; }
}


/* ---------- 4. Parallax backgrounds ----------
   The image layer is taller than its box and is shifted as the page
   scrolls (see main.js). */

.parallax-wrap {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  overflow: hidden;
}
.parallax-bg {
  position: absolute;
  bottom: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-position: top;
  background-size: cover;
}

.bg-sunbeams { background-image: url(sunbeams-4368815-scaled.jpg); }
.bg-avenue   { background-image: url(avenue-815297-scaled.jpg); }
.bg-iris     { background-image: url(iris-5350997_1920.jpg); }
.bg-blurred  { background-image: url(Blurred-BackGround.jpg); }


/* ---------- 5. Content blocks ---------- */

/* Text */
.text {
  word-wrap: break-word;
  line-height: 1.7em;
}
.text ul {
  list-style-type: disc;
  padding: 0 0 1em 1em;
  line-height: 26px;
}
/* Keeps the usual gap under the final paragraph of a block */
.pad-end p:last-of-type { padding-bottom: 1em; }

/* Images */
.image {
  margin-left: auto;
  margin-right: auto;
  line-height: 0;
}

/* Buttons */
.btn {
  position: relative;
  display: inline-block;
  padding: 13px 16px 10px;
  font-family: var(--font-button);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.7em;
  color: #fff;
  background-color: var(--olive);
  cursor: pointer;
  transition: all .2s;
}
.btn::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 16px;
  width: 32px;
  height: 32px;
  transform: translateY(-50%);
  background-color: currentColor;
  -webkit-mask: var(--icon-chevron-right) center / 100% 100% no-repeat;
  mask: var(--icon-chevron-right) center / 100% 100% no-repeat;
  opacity: 0;
  transition: all .2s;
}
.btn:hover { padding: 13px 32px 10px 11.2px; }
.btn:hover::after { right: 0; opacity: 1; }

.align-right { text-align: right; }

/* Expandable panels ("toggles") */
.toggle {
  border: 1px solid #d9d9d9;
  padding: 30px;
}
.toggle.is-closed { background-color: #f4f4f4; }
.toggle.is-open { background-color: #fff; z-index: 1; }

.toggle-title {
  position: relative;
  padding: 0 50px 0 0;
  font-size: 16px;
  color: var(--text);
  word-wrap: break-word;
  cursor: pointer;
}
.toggle.is-open .toggle-title { color: var(--heading); }
.toggle-title::before {
  content: "";
  position: absolute;
  top: 50%;
  right: -4px;
  width: 24px;
  height: 24px;
  margin-top: -12px;
  background-color: #ccc;
  -webkit-mask: var(--icon-chevrons-left) center / 100% 100% no-repeat;
  mask: var(--icon-chevrons-left) center / 100% 100% no-repeat;
}
.toggle.is-open .toggle-title::before {
  -webkit-mask-image: var(--icon-chevrons-down);
  mask-image: var(--icon-chevrons-down);
}
.toggle-content {
  position: relative;
  padding-top: 20px;
  word-wrap: break-word;
}
.toggle.is-closed .toggle-content { display: none; }

@media (max-width: 767px) {
  .toggle { padding: 25px; }
}

/* White "card" rows with a soft shadow */
.card {
  max-width: 1200px;
  background-color: #fff;
  box-shadow: var(--card-shadow);
  z-index: 0;
}


/* ---------- 6. Header & navigation ---------- */

.site-header {
  position: relative;
  min-height: 50px;
  background-color: var(--olive);
}

.header-row {
  position: relative;
  z-index: 4;
  display: flex;
  align-items: stretch;
  width: 90%;
  max-width: 1120px;
  margin: auto;
}

.logo {
  flex: 0 1 auto;
  display: flex;
  align-items: center;
  padding-right: 30px;
}
.logo img {
  display: block;
  min-width: 0;
}

.nav-wrap {
  flex: 1 1 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: stretch;
}

.main-nav { display: flex; align-items: stretch; }

.menu {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: stretch;
  margin-left: -11px;
}
.menu li {
  position: relative;
  display: flex;
  align-items: stretch;
  padding: 0 11px;
}
.menu a {
  display: flex;
  align-items: center;
  padding: 31px 0;
  font-size: 20px;
  line-height: 14px;
  color: #fff;
  white-space: nowrap;
  transition: all .4s ease-in-out;
}
.menu a:hover { opacity: .7; }

/* White line under the page you're on, the same width as its title */
.menu a[aria-current="page"] {
  text-decoration-line: underline;
  text-decoration-thickness: 2px;
  text-decoration-skip-ink: none;
  text-underline-offset: 8px;
}

/* Phone/tablet menu */
.menu-toggle {
  display: none;
  margin: 0 6px;
  width: 50px;
  height: 50px;
  color: #fff;
  cursor: pointer;
  transform: translateY(3%);
}
.menu-toggle::before {
  content: "";
  position: relative;
  top: 2px;
  display: block;
  width: 50px;
  height: 50px;
  background-color: currentColor;
  -webkit-mask: var(--icon-menu) center / 100% 100% no-repeat;
  mask: var(--icon-menu) center / 100% 100% no-repeat;
}

.mobile-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 9999;
  width: 100%;
  padding: 5%;
  overflow: hidden;
  text-align: left;
  background-color: #fff;
  border-top: 3px solid #fff;
  box-shadow: 0 2px 5px rgba(0, 0, 0, .1);
}
.mobile-menu a {
  display: block;
  padding: 10px 5%;
  font-size: 20px;
  line-height: 26px;
  color: var(--olive);
  border-bottom: 1px solid rgba(0, 0, 0, .03);
  transition: opacity .2s ease-in-out, background-color .2s ease-in-out;
}
.mobile-menu a:hover {
  background-color: rgba(0, 0, 0, .03);
  opacity: .7;
}

@media (max-width: 980px) {
  .header-row { max-width: 1080px; align-items: center; }
  .main-nav { display: none; }
  .menu-toggle { display: block; }
  .mobile-menu.is-open { display: block; }
}


/* ---------- 7. Footer & back-to-top button ---------- */

.site-footer {
  position: relative;
  padding: var(--section-pad) 0;
  background-color: var(--olive);
}
@media (max-width: 767px) {
  .site-footer { padding: 0 0 20px; }
}

.back-to-top {
  position: fixed;
  right: 0;
  bottom: 125px;
  z-index: 99999;
  display: none;
  padding: 5px;
  color: #fff;
  background: rgba(0, 0, 0, .4);
  border-radius: 5px 0 0 5px;
  cursor: pointer;
}
.back-to-top::before {
  content: "";
  display: block;
  width: 30px;
  height: 30px;
  background-color: currentColor;
  -webkit-mask: var(--icon-chevron-up) center / 100% 100% no-repeat;
  mask: var(--icon-chevron-up) center / 100% 100% no-repeat;
}
.back-to-top.is-visible {
  display: block;
  opacity: 1;
  animation: fadeInRight 1s 1 cubic-bezier(.77, 0, .175, 1);
}
.back-to-top.is-hidden {
  display: block;
  opacity: 0;
  pointer-events: none;
  animation: fadeOutRight 1s 1 cubic-bezier(.77, 0, .175, 1);
}
@keyframes fadeInRight {
  0% { opacity: 0; transform: translateX(100%); }
  100% { opacity: 1; transform: translateX(0); }
}
@keyframes fadeOutRight {
  0% { opacity: 1; transform: translateX(0); }
  100% { opacity: 0; transform: translateX(100%); }
}


/* ---------- 7b. "Not taking new clients" notice ----------
   Switched on/off (and worded) in notice.js */

.notice { padding: 32px 0 0; }
.notice-row { padding: 0; }
.notice .notice-text {
  padding: 10px;
  font-size: 17px;
  font-weight: 600;
  line-height: 23.8px;
  color: #fff;
  text-align: center;
  background-color: var(--olive);
}


/* ---------- 8. Top banner ("hero"), shared by all pages ---------- */

.hero {
  margin: 40px 40px 0;
  padding: 100px 0 0;
}
.hero-row {
  max-width: 1200px;
  padding: 100px 60px;
  box-shadow: 0 40px 110px 0 rgba(9, 6, 38, .62);
  filter: opacity(90%);
  transform: translateX(30px);
}
.hero-row > .col { z-index: 9; }
.hero-text {
  font-size: 17px;
  line-height: 1.6em;
}
.hero-text h1 {
  font-family: var(--font-serif);
  font-size: 60px;
  line-height: 1.2em;
}

@media (max-width: 980px) {
  .hero { margin: 0; padding-top: 40px; }
  .hero-row { padding: 60px; transform: none; }
  .hero-text { font-size: 18px; }
  .hero-text h1 { font-size: 40px; }
}
@media (max-width: 767px) {
  .hero-row { padding: 20px; }
  .hero-text { font-size: 16px; }
  .hero-text h1 { font-size: 30px; }
}


/* ---------- 9. Contact details + map, shared by all pages ---------- */

.contact {
  margin: 0 40px 40px;
  padding: 0;
  background-color: #f2f2f2;
}

/* Desktop: wide map with the details panel on the right */
.contact-map {
  width: 100%;
  min-height: 431px;
  margin-top: -3px;
  padding: 25px 27px 0 0;
  background-image: url(Wide-Map-with-Pin2.jpg);
}
.contact-panel {
  padding: 35px;
  background-color: #f8f8f8;
  filter: opacity(95%);
}

.contact-item {
  font-family: var(--font-serif);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.8em;
  color: #333;
}
.contact-item h3 {
  font-family: var(--font-serif);
  font-size: 18px;
  font-weight: 600;
  line-height: 1.2em;
  color: rgba(0, 0, 0, .36);
}

.contact-panel .contact-item {
  width: 85%;
  max-width: 85%;
  min-height: 47.6px;
  margin: 10px -34px 29px 21px;
  padding-left: 12px;
}
.contact-panel .contact-email { margin-top: 16px; }
.contact-panel .contact-hours { margin-bottom: 18px; }

.contact-panel .contact-logos {
  max-width: 88%;
  margin: 0 0 14px 9px;
  padding-left: 18px;
}
.contact-logos img { display: block; }

/* Tablet & phone: square map with a details card overlapping it */
.contact-map-square { width: 100%; padding-top: 0; }
.contact-map-square img { display: block; width: 100%; }

.contact-card {
  max-width: 1200px;
  min-height: 445px;
  padding: 0;
  background-color: #fff;
  box-shadow: var(--card-shadow);
  transform: translateY(-110px);
  z-index: 300;
}
.contact-card-inner {
  padding: 30px;
  background-color: rgba(0, 0, 0, .03);
}
.contact-card .contact-item {
  width: 100%;
  max-width: 230px;
  margin: 0 auto 14px;
}
.contact-card .contact-logos {
  max-width: 300px;
  margin: 0 auto 0 0;
  padding-top: 12px;
}

@media (max-width: 980px) {
  .contact { margin: 0 0 40px; }
}
@media (max-width: 767px) {
  .contact-card-inner { padding: 25px 20px; }
  .contact-card .contact-item { margin-bottom: 30px; }
  .contact-card .contact-hours { margin-bottom: 20px; }
}


/* ---------- 10. Home page ---------- */

/* Banner */
.page-home .hero { padding-top: 76px; }
.page-home .hero-row {
  min-height: 303.5px;
  padding: 60px 60px 104px;
  filter: opacity(95%);
}
.page-home .hero-text {
  max-width: 600px;
  line-height: 1.8em;
}
.page-home .hero-btn { margin-bottom: -62px; }

/* Introduction cards */
.intro {
  min-height: 598px;
  margin: 9px 40px 0;
  padding: 0 0 62px;
  background-color: transparent;
}
.intro-card {
  margin-top: -30px;
  padding: 26px 60px 53px;
}
.intro-main { padding-top: 48px; }
.intro-text {
  margin-top: -33px;
  font-size: 17px;
  line-height: 1.8em;
}
.intro-logos {
  width: 100%;
  max-width: 60%;
  padding-top: 25px;
  text-align: center;
}

.photo-col {
  padding: 0 30px 30px;
  box-shadow: 0 12px 40px -6px rgba(131, 146, 167, .3);
}
.photo {
  margin: -315px -30px 14px;
  text-align: center;
}
.photo img { box-shadow: 0 200px 0 0 #fff; }
.quote {
  margin-top: 27px;
  font-family: var(--font-serif);
  font-size: 16px;
  font-weight: 400;
  font-style: italic;
  line-height: 1.8em;
  background-color: #fff;
}

.services-card { padding: 30px 60px 50px; }
.services-main { padding-top: 28px; }
.services-text {
  font-size: 17px;
  line-height: 1.8em;
}

/* "Dr Sarah Clark" panel over the iris photo */
.bio {
  z-index: 10;
  margin: 0 40px 40px;
  padding: 0;
  background-image: linear-gradient(160deg, rgba(255, 255, 255, 0) 0%, #fff 100%);
  box-shadow: 0 100px 200px -50px rgba(131, 146, 167, .32);
}
.bio-row { padding: 0; }
.bio-panel {
  padding: 64px 48px;
  background-color: #fff;
  box-shadow: 0 12px 80px -6px rgba(255, 255, 255, .74);
}
.bio-text {
  padding: 0 11px 0 14px;
  font-size: 17px;
  line-height: 1.8em;
}
.bio-text h2 {
  font-family: var(--font-serif);
  font-size: 46px;
  font-weight: 400;
  line-height: 1.2em;
}
.bio-btn { margin: 20px 0 3px 13px; }
.bio-spacer { height: 200px; }

/* For Professionals */
.professionals {
  margin: -9px 0 38px;
  padding: 0;
}
.pro-heading-row { padding: 24px 0 0; }
.pro-heading {
  max-width: 600px;
  margin: 0 auto 16px;
  font-size: 17px;
  line-height: 1.8em;
  text-align: center;
}
.pro-heading h2 {
  font-family: var(--font-serif);
  font-size: 46px;
  line-height: 1.2em;
}

.pro-row {
  max-width: 1200px;
  background-color: #fff;
  box-shadow: 0 80px 110px -40px rgba(131, 146, 167, .5);
}
.pro-row-1 { padding: 0 60px 23px; }
.pro-row-2 { padding-right: 60px; padding-bottom: 60px; padding-left: 60px; }

.pro-box {
  padding: 35px;
  background-color: rgba(0, 0, 0, .03);
}
.pro-box .text { line-height: 1.8em; }
.pro-box h4 {
  font-family: var(--font-serif);
  font-size: 20px;
  font-weight: 600;
  line-height: 1.2em;
}

@media (max-width: 980px) {
  .page-home .hero { padding-top: 40px; }
  .page-home .hero-row { padding: 60px; }
  .page-home .hero-text { font-size: 17px; }

  .intro-card { padding-top: 30px; }
  .intro-logos { padding-top: 0; }
  .photo-col { padding-right: 0; padding-left: 0; }
  .photo { margin: 0; }
  .quote { margin: 27px 30px 0; max-width: 100%; }
  .services-text { padding: 0; }

  .bio { margin-right: 0; margin-left: 0; }
  .bio-panel { padding-right: 50px; padding-left: 50px; }
  .bio-text h2 { font-size: 40px; }
  .bio-spacer { display: none; }

  .pro-heading h2 { font-size: 40px; }
}

@media (max-width: 767px) {
  .page-home .hero-row { padding: 25px 20px; }
  .page-home .hero-text { font-size: 15px; }

  .intro { margin-right: 0; margin-left: 0; padding-bottom: 30px; }
  .intro-card { padding: 0 20px 30px; }
  .intro-text { margin: -22px 10px 10px; font-size: 15px; }
  .services-card { padding: 0 20px 20px; }
  .services-text { font-size: 15px; }

  .bio-panel { padding: 20px 11px; }
  .bio-text { font-size: 15px; }
  .bio-text h2 { font-size: 30px; }

  .pro-heading h2 { font-size: 30px; }
  .pro-row { width: 100%; }
  .pro-row-1, .pro-row-2 { padding-right: 20px; padding-bottom: 20px; padding-left: 20px; }
  .pro-box { padding: 20px; }
}


/* ---------- 11. About Sarah page ---------- */

.about-main {
  margin: 0 40px;
  padding: 0;
  background-color: transparent;
}
.about-card {
  margin-top: -30px;
  padding: 60px;
}
.about-photo { text-align: center; }
.about-photo img { box-shadow: 0 200px 0 0 #fff; }
.about-btn { margin: 40px 0; }

.about-text {
  font-size: 17px;
  line-height: 1.8em;
}
.about-text h2 {
  font-family: var(--font-serif);
  font-size: 46px;
  line-height: 1.2em;
}
.about-text h3 {
  font-family: var(--font-serif);
  font-size: 20px;
  font-weight: 600;
  line-height: 1.2em;
}
.about-story { padding-left: 20px; }

.about-toggles-row { padding-top: 0; z-index: 0; }
.about-toggles { padding: 30px; }

@media (max-width: 980px) {
  .about-main { padding: 0; }
  .about-card { padding: 0 0 60px; }
  .about-btn { margin-left: 20px; }
  .about-story .about-text { padding-right: 20px; }
  .about-text h2 { font-size: 40px; }
}

@media (max-width: 767px) {
  .about-main { margin: 0; padding: 30px 0 26px; }
  .about-card { padding: 20px 20px 10px; }
  .about-btn { margin-left: 0; text-align: center; }
  .about-text { font-size: 15px; }
  .about-text h2 { font-size: 30px; }
  .about-text h3 { font-size: 18px; }
  .about-story .about-text { margin-left: -20px; padding-right: 30px; }
  .about-story .about-intro { margin-right: 0; padding-right: 0; }
  .about-toggles { padding: 0; }
  .about-toggles .toggle { margin-bottom: 0; }
  .about-toggles .toggle:first-child { margin-top: -3px; }
}


/* ---------- 12. Your Therapy page ---------- */

.therapy-main {
  margin: 0 40px;
  padding: 0 0 25px;
  background-color: transparent;
}
.conditions-card {
  margin-top: -30px;
  padding: 50px 60px;
}
.conditions-box {
  padding: 20px 40px;
  background-color: rgba(0, 0, 0, .03);
}
.conditions-list {
  max-width: 100%;
  padding-top: 12px;
  font-size: 16px;
  line-height: 1.8em;
}
.conditions-box > .conditions-list { margin-bottom: 0; }

.approach-row { padding-top: 23px; }
.approach-text {
  margin-top: 23px;
  padding: 12px 15px 0;
}

@media (max-width: 980px) {
  .therapy-hero { margin: 40px 40px 0; }
}

@media (max-width: 767px) {
  .therapy-hero { margin: 20px 20px 0; }
  .therapy-hero .hero-row { padding: 40px 20px; }
  .therapy-main { margin: 0; }
  .conditions-card { padding: 20px; }
  .approach-row { padding: 0 0 30px; }
}