/*.qwitcher-grypen-regular {
  font-family: "Qwitcher Grypen", cursive;
  font-weight: 400;
  font-style: normal;
}

.qwitcher-grypen-bold {
  font-family: "Qwitcher Grypen", cursive;
  font-weight: 700;
  font-style: normal;
}

<uniquifier>: Use a unique and descriptive class name
<weight>: Use a value from 100 to 700

.josefin-sans-<uniquifier> {
  font-family: "Josefin Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
}

<uniquifier>: Use a unique and descriptive class name
<weight>: Use a value from 400 to 900

.playfair-display-<uniquifier> {
  font-family: "Playfair Display", serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
}
*/

/*

*/

:root {
  --black: #010101;
  --merino: #f5ece5;
  --cabbage: #45523e;
  --cloudy: #b0aca2;
  --matrix: #ad5d50;
  --brown: #3E362E;

  --primary-color: #fff;
  --secondary-color: var(--merino);
  --tertiary-color: var(--matrix);
  --accent-color: var(--cabbage);

  --gradient-light: #45523e;
  --gradient-dark: #b0aca2;

  --primary-font: "Josefin Sans", sans-serif;
  --secondary-font: "Playfair Display", serif;
  --logo-font: "Qwitcher Grypen", cursive;

  --tiny-gap: 10px;
  --small-gap: 20px;
  --medium-gap: 40px;
  --big-gap: 60px;
  --large-gap: 80px;

  --tiny-size: 1.2rem;
  --small-size: 1.4rem;
  --medium-size: 1.8rem;
  --big-size: 2.4rem;
  --large-size: 3.6rem;
  --xlarge-size: 4.8rem;
  --xxlarge-size: 6.0rem;
  --xxxlarge-size: 7.2rem;
  --xxxxlarge-size: 9.6rem;
}

html {
  font-size:62.5%; /* =10px */
  color: var(--brown);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--secondary-font);
  color: var(--accent-color);
  margin-bottom: var(--medium-gap);
}

label, legend {
  display: block;
  font-family: var(--secondary-font);
  font-size: var(--medium-size);
  font-weight: 400;
  letter-spacing: -0.1rem;
  margin: 0 0 10px;
  text-transform: lowercase;
}

input {
  border-radius: var(--small-size);
  border: 0px;
  width: 100%;
  max-width: 360px;
  min-height: 32px;
  padding-left: var(--medium-gap);
  background-color: var(--merino);
  border: 1px solid var(--secondary-color);
  font-size: var(--medium-size);
  font-weight: 400;
  color: var(--secondary-color);
  border-radius: var(--medium-gap);
  text-transform: lowercase;
}

input[type="submit"] {
  background-color: var(--cabbage);
  padding-left: 0;
  margin-bottom: var(--small-gap);
}

fieldset {
  display: flex;
  border: 0;
}

fieldset label {
  display: inline-block;
  font-family: var(--primary-font);
  font-weight: 300;
  margin: 0;
}

fieldset input {
  width: auto;
  margin-left: var(--small-gap);
}

p {
  margin-bottom: var(--small-gap);
  font-size: var(--medium-size);
  font-weight: 300;
}

a {
  text-decoration: none;
  color: inherit;
}

a:hover  {
  text-decoration: underline dotted;
}

section {
  padding: var(--medium-gap);
}

details summary::-webkit-details-marker {
  display:none;
}


.heading, .subheading, .smallheading {
  font-size: var(--xlarge-size);
  line-height: var(--xlarge-size);
  text-transform: lowercase;
  letter-spacing: -0.2rem;
  text-align: center;
  font-weight: 500;
}

.heading strong, .subheading strong {
  font-weight: 600;
}

.heading em, .subheading em {
  letter-spacing: -0.2rem;
  font-weight: 400;
}

.subheading {
  font-size: var(--big-size);
  line-height: var(--big-size);
}

.smallheading {
  font-size: var(--large-size);
  line-height: var(--large-size);
  letter-spacing: -0.25rem;
  font-weight: 200;
}

.underline {
  text-decoration: wavy underline;
}

.opener--book {
  backdrop-filter: blur(20px);
  border-radius: 20px;
}

.btn {
  display: inline-block;
  border: 1px solid var(--accent-color);
  font-size: var(--medium-size);
  font-weight: 400;
  color: var(--accent-color);
  padding: 10px 40px;
  border-radius: 40px;
  text-transform: lowercase;
}

.website {
  max-width: 100%;
  position: relative;
  font-family: "Josefin Sans", sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
}

.ref--img {
  position: absolute;
  left: 0;
  top: 0;
  z-index: -1;
  width: 0px;
}

.header {
  position: absolute;
  color: var(--black);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--small-gap);
  width: 100%;
  z-index: 1;
  transition: all 300ms;
}

.header--scrolling {
  backdrop-filter: blur(20px);
  background-color: #45523e8c;
}

.header {
  position: fixed;
  /*clip-path: ellipse(100% 55% at 48% 44%);*/
}

.logo {
  flex: 0 0 170px;
  z-index: 1;
}

.logo--h1 {
  font-family: "Josefin Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: 300;
  font-style: normal;
  text-transform: lowercase;
  font-size: var(--big-size);
  font-size: clamp(var(--big-size), 2.5vw, var(--large-size));
  margin: 0;
}

.logo--h1-link {
  color: var(--secondary-color);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
}

.logo--h1-with {
  font-size: var(--tiny-size);
  font-size: clamp(var(--tiny-size), 5vw, var(--small-size));
}

.logo--h1-sarahlee {
  display: block;
  font-family: "Qwitcher Grypen", cursive;
  font-weight: 400;
  font-size: var(--xxlarge-size);
  font-size: clamp(var(--xxlarge-size), 5vw, var(--xxxlarge-size));
  text-transform: capitalize;
  line-height: 3.6rem;
  color: var(--secondary-color);
}

.topmenu {
  font-weight: 300;
  font-style: normal;
  text-transform: lowercase;
  display: flex;
  position: relative;
}

.topmenu--menu {
  list-style: none;
  display: flex;
  font-size: var(--small-size);
  gap: 20px;
  flex-direction: column;
}

.topmenu--menu-expanded {
  display: none;
}

.topmenu--summary {
  transition: all 600ms;
  transition-timing-function: ease-out;
  list-style: none;
  font-size: var(--medium-size);
  text-align: center;
  position: absolute;
  z-index: 2;
  top: -18px;
  right: 0;
  padding: var(--tiny-gap) var(--small-gap);
  height: 36px;
  width: 96px;
}

.topmenu--summary:hover {
  cursor: pointer;
}

.topmenu--summary-open {
  transition: all 600ms;
  transition-timing-function: ease-out;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 0px;
  left: 0;
  height: 36px;
  width: 96px;
  transform: scale(1);
  color: var(--secondary-color);
  border: 1px solid var(--secondary-color);
  border-radius: var(--big-gap);
  opacity: 1;
  backdrop-filter: blur(2px);
  border-radius: 20px;
  font-weight: 400;
}

.topmenu--details[open] .topmenu--summary-open {
  opacity: 0;
}

.topmenu--summary-close {
  transition: all 600ms;
  transition-timing-function: ease-out;
  display: flex;
  justify-content: center;
  align-items: center;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  position: absolute;
  color: var(--accent-color);
  border-radius: var(--big-gap);
  background-color: var(--secondary-color);
  color: var(--accent-color);
}

.topmenu--details[open] .topmenu--summary-close {
  opacity: 1;
}

.topmenu--details[open] .topmenu--summary {
  /*transform: translateX(calc(-50% - 68px));*/
}

.topmenu--details {
  display: flex;
  list-style: none;
}

.topmenu--details .topmenu--menu {
  transition: 300ms all;
  position: fixed;
  padding: var(--big-gap);
  left: 0;
  top: 0;
  width: 100%;
  height: 100vh;
  display: flex;
  background-color: var(--accent-color);
  font-size: var(--big-size);
  align-items: center;
  justify-content: center;
  transform: scale(0);
  opacity: 0;
}

.topmenu--details[open] .topmenu--menu {
  transform: scale(1);
  opacity: 1;
}

.topmenu--menuitem {
  display: flex;
  justify-content: center;
  align-items: center;
}

.topmenu--menuitem-link {
  color: var(--primary-color);
}

.topmenu--menuitem-button {
  display: inline-block;
  border: 1px solid var(--secondary-color);
  font-size: var(--medium-size);
  font-weight: 400;
  color: var(--secondary-color);
  padding: 10px 20px;
  border-radius: 40px;
}

.hero {
  background-image: linear-gradient(var(--gradient-dark), var(--gradient-light)), url('../img/LamyNKPhoto-11.jpg');
  background-position: center right;
  background-size: cover;
  background-blend-mode: hard-light;
  height: calc(100vh + 80px);
  min-height: 600px;
  clip-path: ellipse(100% 55% at 48% 44%);
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  align-items: center;
  padding: 100px 0;
  position: relative;
  flex-wrap: wrap;
}

.hero::before {
  content: '';
  background-image: linear-gradient(var(--gradient-light), var(--gradient-dark));
  background-position: center right;
  background-size: cover;
  background-blend-mode: hard-light;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: .3;
}

.hero--content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  align-self: flex-end;
  margin-bottom: var(--small-gap);
}

.opener {
  z-index: 1;
}

.opener--location-left {
  display: none;
}

.opener--location-right {
  margin-top: var(--big-gap);
  align-self: flex-start;
  z-index: 1;
}

.opener--location {
  font-family: var(--primary-font);
  color: var(--secondary-color);
  font-size: var(--small-size);
  font-size: clamp(var(--small-size), 2vw, var(--medium-size)); 
  font-weight: 300;
  text-transform: lowercase;
  margin-bottom: var(--small-gap);
  text-align: center;
}

.opener--location-vancouver, .opener--location-online {
  font-size: var(--medium-size);
  font-size: clamp(var(--medium-size), 2vw, var(--big-size)); 
  font-weight: 400;
}

.opener--slogan {
  font-family: "Playfair Display", serif;
  font-size: 4.4rem;
  font-size: clamp(4.4rem, 6vw, var(--xxxlarge-size)); 
  text-transform: lowercase;
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  color: var(--secondary-color);
  text-align: center;
}

.opener--slogan em {
  font-weight: 300;
}

.opener--slogan-conversations, .opener--slogan-understanding {
  line-height: clamp(var(--xlarge-size), 6vw, var(--xxxlarge-size));
  flex: 1;
  letter-spacing: -0.3rem;
  color: var(--secondary-color);
}

.opener--slogan-conversations {
  font-style: normal;
  font-weight: 500;
}

.opener--slogan-understanding {
  flex: 1;
  font-weight: 600;
  display: none;
}

.opener--slogan-begin {
  flex: 1;
  font-size: var(--large-size);
  font-weight: 300;
  letter-spacing: -0.2rem;
  margin-top: var(--tiny-gap);
  margin-left: var(--small-gap);
  color: var(--secondary-color);
  /*text-decoration: var(--secondary-color) underline wavy;
  text-decoration-thickness: 2px;*/
  
}

.opener--book {
  backdrop-filter: blur(20px);
  border-radius: 20px;
}

.opener--book-link {
  display: inline-block;
  border: 1px solid var(--secondary-color);
  font-size: var(--medium-size);
  font-weight: 400;
  color: var(--secondary-color);
  padding: 10px 40px;
  border-radius: 40px;
  text-transform: lowercase;
}

.intro {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  flex-direction: column;
  display: flex;
  padding: 0;
  min-height: calc(100vh - 100px);
  display: flex;
  flex-direction: column;
  align-content: center;
  justify-content: center;
  align-items: center;
}

.intro--qualified {
  font-size: var(--big-size);
  font-family: var(--secondary-font);
  font-weight: 400;
  letter-spacing: -0.1rem;
  text-transform: lowercase;
}

.intro--qualified-registration {
  font-weight: 200;
  text-transform: uppercase;
  font-family: var(--primary-font);
}

.right {
  padding: 0;
  height: 100%;
  flex: 1;
}

.intro-figure {
  height: 100vw;
  width: 100vw;
  clip-path: ellipse(100% 80% at 80% 80%);
  overflow: hidden;
}
.intro--picture {
  display: inline-block;
  height: 100%;
  width: 100%;
  position: relative;
}

.intro--picture-img {
  background-image: linear-gradient(var(--gradient-light), var(--gradient-dark));
  height: 100%;
  width: 100%;
  object-fit: cover;
}

.left {
  flex: 0 0 50%;
  padding: var(--big-gap) var(--medium-gap);
}

.rates {
  background-color: var(--secondary-color);
  border-top-left-radius: var(--big-gap);
  border-top-right-radius: var(--big-gap);
  border-bottom-right-radius: var(--big-gap);
  margin-top: calc(0px - var(--big-gap));
  position: relative;
  padding-bottom: var(--big-gap);
}

.rates--heading {
  margin-bottom: var(--small-gap);
}

.rate {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin: var(--big-gap) 0;
}

.rate--content {
  justify-self: flex-end;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.rate--figure {
  margin-bottom: var(--medium-gap);
  border-end-end-radius: 50%;
  max-height: 100vw;
  overflow: hidden;
}

.rate--figure-odd {
  border-end-end-radius: 0%;
  border-top-left-radius: 50%;
}

.rate--table {
  max-width: 140px;
  width: 100%;
  margin: var(--medium-gap);
  margin-top: 0;
  font-size: var(--medium-size);
  text-align: center;
  font-weight: 300;
}

.rate--table thead {
  display: none;
}

.rate--consult {
  margin: var(--medium-gap);
  margin-top: 0;
  text-align: center;
}

.rate--consult, .rate--table {
  min-height: 52px;
}

.approaches {
  position: relative;
  padding: 0;
  min-height: 100vh;
}

.approaches--content .approaches--figure {
  margin-bottom: var(--medium-gap);
  border-radius: var(--medium-gap);
  overflow: hidden;
}

.approaches-header--figure {
  margin-top: calc(0px - var(--big-gap));
  position: relative;
  height: 50vh;
  width: 100vw;
  margin-left: auto;
  margin-right: auto;
  background-color: var(--secondary-color);
  z-index: -1;
  clip-path: ellipse(117% 86% at 66% 14%);
}

.approaches-header--figure::after {
  content: '';
  position: absolute;
  bottom: -1px;
  width: 100%;
  height: var(--medium-gap);
  /*background-color: white;*/
  display: block;
  border-top-left-radius: var(--big-gap);
}

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

.approaches--title {
  position: relative;
  margin: var(--medium-gap);
}

.approaches .one-third {
  margin: var(--big-gap);
  text-align: center;
}

.aboutme {
  padding: var(--big-gap);
  background-color: var(--accent-color);
  clip-path: ellipse(245% 96% at 55% 96%);
  color: var(--secondary-color);
}

.aboutme--heading {
  color: var(--secondary-color);
}

.aboutme--figure {
  border-radius: 50%;
  overflow: hidden;
  width: calc(100vw - var(--big-gap) * 2);
  height: calc(100vw - var(--big-gap) * 2);
}

.aboutme--article {
  padding-top: var(--medium-gap);
  padding-bottom: var(--medium-gap);
  text-align: center;
}

.aboutme--intro {
  font-family: var(--secondary-font);
  letter-spacing: -0.1rem;
  text-transform: lowercase;
  font-size: var(--big-size);
  margin-bottom: var(--medium-gap);
}

.aboutme--figure-cover {
  display: none;
}

.quote {
  margin-top: calc(0px - var(--big-gap));
  background-image: url('../img/pexels-photo-2029968.webp');
  background-color: var(--accent-color);
  background-size: cover;
  color: var(--secondary-color);
  clip-path: ellipse(100% 91% at 45% 91%);
  font-family: var(--secondary-font);
  text-align: center;
  height: 400px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-size: var(--big-size);
  text-transform: lowercase;
  letter-spacing: -0.1rem;
}

.quote--quote, .quoted-from {
  max-width: 1200px;
}

.quoted--from {
  font-family: var(--primary-font);
  margin: var(--small-gap) 0 0 0;
  font-size: var(--small-size);
  letter-spacing: normal;
  text-transform: capitalize;
}

.getintouch {
  position: relative;
  margin-top: -40px;
  background-color: var(--merino);
  border-top-left-radius: var(--medium-gap);
  border-top-right-radius: var(--medium-gap);
}

.getintouch--card {
  padding: var(--small-gap);
  margin: var(--medium-gap) 0;
  border-radius: var(--medium-size);
  text-align: center;
  background-color: var(--primary-color);
}

.getintouch--header {
  font-size: var(--medium-size);
  font-weight: 400;
  letter-spacing: -0.1rem;
  margin: var(--medium-gap) 0 var(--small-gap);
  text-transform: lowercase;
}

.preference {
  max-width: 240px;
  margin-left: auto;
  margin-right: auto;
}

.preference-fieldset {
  display: flex;
  align-items: center;
  align-self: center;
  flex: 0 0 50%;
}

.getintouch--links {
  display: flex;
  justify-content: center;
  align-items: center;
}

.getintouch--links a {
  display: flex;
  align-items: center;
  justify-content: center;
}

.getintouch--links-psychologytoday img {
  height: 38px;
  width: auto;
}

.thanks {
  margin: var(--medium-gap) var(--small-gap);
  text-align: center;
}

.thanks--acknowledgement {
  font-size: var(--small-size);
}

@media screen and (min-width: 760px) and (min-height: 640px) {
  .hero {
    height: calc(100vh + 100px);
  }
  .hero--content {
    margin-bottom: 40px;
  }
  .opener--slogan-conversations {
    font-size: var(--xxxlarge-size);
    line-height: var(--xxxlarge-size);
  }
  .opener--slogan-understanding {
    display: block;
  }

  .portrait--book {
    margin: var(--big-gap);
    margin-top: 10vh;
  }

  .intro {
    flex-direction: row;
    background-color: var(--accent-color);
    margin-top: -100px;
    color: var(--secondary-color);
    position: relative;
    z-index: -1;
    height: calc(100vh + 100px);
  }
  .left {
    margin-top: 100px;
    padding: var(--big-gap);
  }

  .intro--heading {
    color: var(--primary-color);
    position: relative;
    font-size: var(--xxxlarge-size);
    line-height: var(--xxxlarge-size);
  }

  .intro--heading em {
    color: var(--secondary-color);
  }

  .intro-figure {
    width: 100%;
    height: calc(100vh + 100px);
    clip-path: none;
  }

  .intro--picture {
    height: 100%;
  }

  .intro--picture-img {
    height: 100%;
    object-fit: cover;
    clip-path: none;
    min-height: 90vh;
  }

  .rates, .approaches {
    padding: var(--big-gap) 0;
    min-height: 100vh;
  }

  .rates {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  .rates--content {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    width: 100%;
  }

  .rate--figure {
    width: calc(33vw - var(--medium-gap));
    height: calc(33vw - var(--medium-gap));
    overflow: hidden;
  }

  .rates--hgroup {
    flex: 0 0 100%;
  }

  .rate {
    flex: 0 0 33%;
    display: flex;
    justify-content: center;
  }

  .approaches-header--figure {
    margin-top: calc(0px - var(--big-gap) * 2);
  }

  .approach--article.odd {
    flex-direction: row-reverse;
  }

  .approaches--title {
    text-align: center;
    margin-bottom: var(--big-gap);
  }
  .approach--figure {
    width: 25vw;
    flex: 0 0 25%;
  }
  .approach--article {
    display: flex;
    flex-wrap: wrap;
    margin: var(--medium-gap);
    border-radius: var(--medium-gap);
    padding: var(--big-gap);
    background-color: var(--secondary-color);
    justify-content: center;

  }
  .approach--content {
    flex: 1;
    padding: var(--medium-gap);
    text-align: center;
  }

  .aboutme {
    padding: 0;
    display: flex;
    min-height: 100vh;
  }

  .aboutme--img {
    object-fit: cover;
    height: 100%;
  }

  .aboutme--figure {
    width: auto;
    height: auto;
  }
  
  .aboutme--figure-small {
    display: none;
  }
  .aboutme--figure-cover {
    display: block;
    flex: 0 0 30%;
    border-radius: 0;
    clip-path: ellipse(91% 63% at 8% 49%);
  }

  .aboutme--content {
    padding: var(--big-gap);
  }

  .getintouch--content {
    display: flex;
    flex-wrap: wrap;
  }

  .getintouch--card {
    flex: 0 0 calc(50% - var(--small-gap));
  }

  .getintouch--location {
    margin-right: var(--small-gap);
  }

  .getintouch--contact {
    margin-left: var(--small-gap);
  }

  .getintouch--form {
    margin-top: 0;
    flex: 0 0 calc(100%);
  }

  .getintouch--links {
    flex: 0 0 100%;
  }
}


@media only screen and (min-width: 960px) and (min-height: 640px) {
  .header {
    padding: var(--big-gap);
  }

  .topmenu--details {
    display: none;
  }

  .topmenu--menu-expanded {
    display: flex;
    flex-direction: row;
    gap: var(--big-gap);
  }

  .logo {
    flex: 0 0 clamp(200px, 10vw, 400px);
  }

  .hero {
    padding-top: 200px;
    padding-bottom: 100px;
    max-height: 90vh;
    min-height: 780px;
  }

  .hero--content {
    padding: 0;
    padding-left: var(--big-gap);
    padding-right: clamp(350px, 25vw, 380px);
    justify-content: center;
    align-items: flex-start;
    flex-direction: column;
    position: absolute;
    top: 200px;
    height: calc(100% - 300px);
    max-width: 1200px;
  }

  .portrait {
    align-self: flex-end;
    width: calc(100% - 80px);
    height: calc(100% - 80px);
    margin: 40px;
  }

  .intro--heading {
    font-size: clamp(var(--xxxlarge-size), 7vw, var(--xxxxlarge-size));
    line-height: clamp(var(--xxxlarge-size), 7vw, var(--xxxxlarge-size));
    margin-bottom: clamp(var(--medium-gap), 7vw, var(--large-gap));
  }

  .intro--blurb {
    font-size: var(--medium-size);
    font-size: clamp(var(--medium-size), 2vw, var(--large-size));
  }

  .intro--qualified {
    margin-top: clamp(var(--medium-gap), 7vw, var(--large-gap));
    font-size: clamp(var(--big-size), 2vw, var(--xlarge-size));
  }

  .opener {
    padding: 0;
    margin: 0;
  }

  .opener--location-left {
    display: block;
    text-align: center;
  }

  .opener--location-right {
    display: none;
  }

  .opener--location {
    margin-bottom: var(--medium-gap);
    text-align: left;
    align-self: flex-start;
  }

  .opener--slogan {
    text-align: left;
  }

  .opener--slogan-begin {
    margin-top: var(--medium-gap);
    margin-left: 0;
  }

  .opener--slogan-understanding {
    display: block;
  }

  .portrait--caption {
    display: block;
  }

  .portrait--book {
    position: absolute;
    bottom: 0px;
    margin: 0;
  }

  .heading {
    font-size: clamp(var(--xlarge-size), 5vw, var(--xxxlarge-size));
    line-height: clamp(var(--xlarge-size), 5vw, var(--xxxlarge-size));
  }

  .subheading {
    font-size: clamp(var(--big-size), 2vw, var(--large-size));
    line-height: clamp(var(--big-size), 2vw, var(--large-size));
  }

  .smallheading {
    font-size: clamp(var(--large-size), 4vw, var(--xxlarge-size));
    line-height: clamp(var(--large-size), 4vw, var(--xxlarge-size));
  }

  .rate--table, .rate--consult {
    font-size: clamp(var(--medium-size), 2vw, var(--big-size));
    max-width: none;
  }

  .rates--content {
    max-width: 1200px;
    justify-self: center;
  }

  .rate--figure {
    padding-left: var(--big-gap);
    padding-right: var(--big-gap);
  }

  .approaches--content {
    max-width: 1200px;
    justify-self: center;
  }

  .approaches--title {
    padding: var(--big-gap);
  }
  p {
    font-size: clamp(var(--medium-size), 1.5vw, var(--big-size));
  }

  .aboutme--content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex: 1;
  }

  .aboutme--article {
    max-width: 1200px;
    align-self: center;
  }

  .getintouch--card {
    flex: 1;
  }

  .getintouch--location {
    margin-right: var(--small-gap);
  }

  .getintouch--contact {
    margin-left: var(--small-gap);
  }

  .getintouch--form {
    margin: var(--medium-gap);
    margin-right: 0;
    flex: 1;
  }
}