/* ============================================
   ABOUT HERO
   ============================================ */
/* Mobile */
@media only screen and (min-width: 0em) {
  #about-hero {
    position: relative;
    overflow: hidden;
    background: #e9e3dc;
    height: 32.5em;
    margin-top: 5em;
  }
  #about-hero .about-hero-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
  }
  #about-hero .about-hero-bg img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 20% center;
    transition: opacity .35s ease;
  }
  #about-hero .about-hero-bg img.is-fading {
    opacity: 0;
  }
  #about-hero:before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(42, 38, 34, 0.24);
    z-index: 2;
  }
  #about-hero .about-hero-overlay {
    position: absolute;
    left: 8%;
    bottom: 5.75em;
    z-index: 3;
    color: #fff;
  }
  #about-hero .about-hero-overlay span {
    display: block;
    text-transform: uppercase;
    letter-spacing: .45em;
    font-size: 0.6875em;
    margin-bottom: 1em;
  }
  #about-hero .about-hero-overlay h1 {
    margin: 0;
    font-size: 4.875em;
    font-style: italic;
    line-height: .9em;
    font-weight: 400;
    color: #fff;
  }
  #about-hero .about-hero-overlay p {
    margin: 1.375em 0 0;
    font-style: italic;
    font-size: 1.5em;
    line-height: 1.2em;
    color: #fff;
  }
  #about-hero .about-hero-dots {
    position: absolute;
    left: 50%;
    bottom: 1.5em;
    transform: translateX(-50%);
    display: flex;
    gap: 0.625em;
    z-index: 3;
  }
  #about-hero .about-hero-dots .about-dot {
    width: 0.5em;
    height: 0.5em;
    border-radius: 50%;
    border: none;
    padding: 0;
    background: rgba(255, 255, 255, 0.55);
    cursor: pointer;
    transition: all .3s ease;
  }
  #about-hero .about-hero-dots .about-dot.active {
    background: #fff;
    transform: scale(1.25);
  }
}
/* Tablet */
@media only screen and (min-width: 48em) {
  #about-hero {
    height: 37.5em;
    margin-top: 6em;
  }
  #about-hero .about-hero-overlay {
    left: 7%;
    bottom: 8.125em;
  }
  #about-hero .about-hero-overlay h1 {
    font-size: 7.5em;
  }
  #about-hero .about-hero-overlay p {
    font-size: 1.875em;
  }
}
/* Desktop */
@media only screen and (min-width: 1300px) {
  #about-hero {
    height: 41.25em;
    width: 100%;
    margin-top: -0.5em;
  }
  #about-hero .about-hero-bg img {
    object-position: center;
  }
  #about-hero .about-hero-overlay {
    left: 5.75%;
    bottom: 8em;
  }
  #about-hero .about-hero-overlay span {
    font-size: 0.75em;
    margin-bottom: 1.125em;
  }
  #about-hero .about-hero-overlay h1 {
    font-size: 8em;
  }
  #about-hero .about-hero-overlay p {
    font-size: 1.875em;
    margin-top: 1.75em;
  }
  #about-hero .about-hero-dots {
    bottom: 1.5em;
  }
  #about-hero .about-hero-dots .about-dot {
    width: 2em;
    height: 2em;
  }
}
/* ============================================
   ABOUT WELCOME
   ============================================ */
/* Mobile */
@media only screen and (min-width: 0em) {
  #about-welcome {
    background: var(--primaryShade);
    padding: 4.375em 0;
    overflow: hidden;
  }
  #about-welcome .container {
    width: 92%;
    max-width: 80em;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr;
    gap: 2.75em;
    align-items: center;
  }
  #about-welcome .welcome-copy {
    color: black;
  }
  #about-welcome .welcome-copy .eyebrow {
    display: block;
    text-transform: uppercase;
    letter-spacing: .55em;
    font-size: 1.125em;
    margin-bottom: 1.75em;
    color: rgba(0, 0, 0, 0.7);
  }
  #about-welcome .welcome-copy h2 {
    margin: 0;
    max-width: 38.75em;
    font-size: 2.125em;
    line-height: 1.35em;
    font-weight: 400;
    color: #000;
  }
  #about-welcome .welcome-copy h2 em {
    font-style: italic;
    color: rgba(0, 0, 0, 0.72);
  }
  #about-welcome .welcome-copy .welcome-line {
    width: 4.375em;
    height: 0.0625em;
    background: rgba(255, 255, 255, 0.45);
    margin: 1.75em 0;
  }
  #about-welcome .welcome-copy p {
    margin: 0 0 1.375em;
    max-width: 35em;
    font-size: 1.125em;
    line-height: 1.9em;
    color: rgba(0, 0, 0, 0.82);
  }
  #about-welcome .welcome-copy p:last-of-type {
    margin-bottom: 0;
  }
  #about-welcome .welcome-gallery {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25em;
  }
  #about-welcome .welcome-photo {
    display: block;
    overflow: hidden;
    border-radius: 0.875em;
    background: rgba(255, 255, 255, 0.08);
  }
  #about-welcome .welcome-photo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  #about-welcome .photo-main {
    aspect-ratio: 0.8;
  }
  #about-welcome .photo-small-top,
  #about-welcome .photo-small-bottom {
    aspect-ratio: 1.33333333;
  }
}
/* Tablet */
@media only screen and (min-width: 48em) {
  #about-welcome {
    padding: 5.375em 0;
  }
  #about-welcome .container {
    grid-template-columns: .9fr 1.1fr;
    gap: 3.25em;
  }
  #about-welcome .welcome-copy h2 {
    font-size: 2.625em;
  }
  #about-welcome .welcome-copy p {
    font-size: 1.25em;
  }
  #about-welcome .welcome-gallery {
    grid-template-columns: 1.15fr .85fr;
    grid-template-rows: 15em 15em;
    gap: 1.375em;
  }
  #about-welcome .photo-main {
    grid-column: 1;
    grid-row: 1 / span 2;
    aspect-ratio: auto;
  }
  #about-welcome .photo-small-top {
    grid-column: 2;
    grid-row: 1;
    aspect-ratio: auto;
  }
  #about-welcome .photo-small-bottom {
    grid-column: 2;
    grid-row: 2;
    aspect-ratio: auto;
    align-self: end;
  }
}
/* Desktop */
@media only screen and (min-width: 1300px) {
  #about-welcome {
    padding: 6.25em 0 6.875em;
  }
  #about-welcome .container {
    width: 90%;
    max-width: 88.75em;
    grid-template-columns: 35em 1fr;
    gap: 5.625em;
  }
  #about-welcome .welcome-copy .eyebrow {
    font-size: 1.125em;
    margin-bottom: 1.875em;
  }
  #about-welcome .welcome-copy h2 {
    font-size: 2.625em;
    max-width: 35em;
  }
  #about-welcome .welcome-copy p {
    font-size: 1.125em;
    max-width: 32.5em;
  }
  #about-welcome .welcome-gallery {
    grid-template-columns: 26.25em 21.25em;
    grid-template-rows: 18.75em 18.75em;
    column-gap: 1.5em;
    row-gap: 2.125em;
    justify-content: end;
  }
  #about-welcome .welcome-photo {
    border-radius: 0.875em;
  }
  #about-welcome .photo-main {
    grid-column: 1;
    grid-row: 1 / span 2;
  }
  #about-welcome .photo-small-top {
    grid-column: 2;
    grid-row: 1;
    margin-bottom: 1.5em;
  }
  #about-welcome .photo-small-bottom {
    grid-column: 2;
    grid-row: 2;
    margin-top: 1.5em;
  }
}
/* ============================================
   GLIMPSE GRID
   ============================================ */
/* ============================================
   ABOUT STORY
   ============================================ */
/* Mobile */
@media only screen and (min-width: 0em) {
  #about-glimpse {
    background: #fdfaf7;
    padding: 4.375em 0 5em;
  }
  #about-glimpse .container {
    width: 92%;
    max-width: 80em;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr;
    gap: 2.625em;
    align-items: center;
  }
  #about-glimpse .story-images {
    display: grid;
    gap: 1.25em;
  }
  #about-glimpse .story-photo {
    display: block;
    overflow: hidden;
    border-radius: 0.75em;
    background: #eee8df;
  }
  #about-glimpse .story-photo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  #about-glimpse .story-photo-top {
    aspect-ratio: 1.33333333;
  }
  #about-glimpse .story-photo-bottom {
    aspect-ratio: 1.77777778;
  }
  #about-glimpse .story-copy .eyebrow {
    display: block;
    text-transform: uppercase;
    letter-spacing: .55em;
    font-size: 0.6875em;
    margin-bottom: 1.375em;
    color: #000;
  }
  #about-glimpse .story-copy h2 {
    margin: 0 0 1.625em;
    font-size: 2.375em;
    line-height: 1.16em;
    font-weight: 500;
    color: var(--primaryDark);
  }
  #about-glimpse .story-copy h2 em {
    font-style: italic;
    color: var(--primary);
  }
  #about-glimpse .story-copy p {
    margin: 0 0 1.5em;
    font-size: 1.125em;
    line-height: 1.85em;
    color: var(--bodyText);
  }
  #about-glimpse .story-copy blockquote {
    margin: 2.125em 0;
    padding: 0 0 0 1.5em;
    border-left: 0.0625em solid rgba(185, 169, 143, 0.75);
    font-size: 1.75em;
    line-height: 1.45em;
    font-style: italic;
    color: var(--primaryDark);
  }
}
/* Tablet */
@media only screen and (min-width: 48em) {
  #about-glimpse {
    padding: 5.625em 0 6.25em;
  }
  #about-glimpse .container {
    grid-template-columns: .9fr 1.1fr;
    gap: 3.5em;
  }
  #about-glimpse .story-copy h2 {
    font-size: 2.875em;
  }
  #about-glimpse .story-copy p {
    font-size: 1.1875em;
  }
  #about-glimpse .story-copy blockquote {
    font-size: 1.875em;
  }
}
/* Desktop */
@media only screen and (min-width: 1300px) {
  #about-glimpse {
    padding: 6.25em 0 6.875em;
  }
  #about-glimpse .container {
    width: 92%;
    max-width: 88.75em;
    grid-template-columns: 33.75em 1fr;
    gap: 5em;
  }
  #about-glimpse .story-images {
    gap: 1.25em;
  }
  #about-glimpse .story-photo-top {
    height: 22.5em;
    aspect-ratio: auto;
  }
  #about-glimpse .story-photo-bottom {
    width: 92%;
    height: 15em;
    margin-left: auto;
    aspect-ratio: auto;
  }
  #about-glimpse .story-copy .eyebrow {
    font-size: 1.125em;
  }
  #about-glimpse .story-copy h2 {
    font-size: 2.875em;
    max-width: 47.5em;
  }
  #about-glimpse .story-copy p {
    font-size: 1.125em;
    max-width: 53.75em;
  }
  #about-glimpse .story-copy blockquote {
    max-width: 41.25em;
    font-size: 1.875em;
    padding-left: 1.75em;
    margin: 2.25em 0;
  }
}
/* ============================================
   ABOUT BELIEFS
   ============================================ */
/* Mobile */
@media only screen and (min-width: 0em) {
  #about-beliefs {
    background: var(--primaryShade);
    padding: 4.5em 0 5em;
  }
  #about-beliefs .container {
    width: 92%;
    max-width: 80em;
    margin: 0 auto;
  }
  #about-beliefs .beliefs-head {
    text-align: center;
    margin-bottom: 3.375em;
  }
  #about-beliefs .beliefs-head span {
    display: block;
    text-transform: uppercase;
    letter-spacing: .55em;
    font-size: 0.6875em;
    color: #b8a58f;
    margin-bottom: 1.125em;
  }
  #about-beliefs .beliefs-head h2 {
    margin: 0 auto;
    max-width: 12em;
    font-size: 2.625em;
    line-height: 1.08em;
    font-weight: 400;
    color: #3f3934;
  }
  #about-beliefs .beliefs-head h2 em {
    color: #b8a58f;
    font-style: italic;
    font-weight: 400;
  }
  #about-beliefs .beliefs-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2.625em;
  }
  #about-beliefs .belief-card .line {
    display: block;
    width: 100%;
    height: 0.0625em;
    background: rgba(184, 165, 143, 0.35);
    margin-bottom: 1.625em;
  }
  #about-beliefs .belief-card .number {
    margin: 0 0 1em;
    color: #b8a58f;
    font-size: 1.125em;
    font-style: italic;
  }
  #about-beliefs .belief-card .number em {
    color: #b8a58f;
  }
  #about-beliefs .belief-card h3 {
    margin: 0 0 1.125em;
    font-size: 2em;
    line-height: 1.15em;
    font-weight: 400;
    color: #3f3934;
  }
  #about-beliefs .belief-card h3 em {
    color: #b8a58f;
    font-style: italic;
    font-weight: 400;
  }
  #about-beliefs .belief-card p {
    margin: 0;
    font-size: 1.125em;
    line-height: 1.9em;
    color: #6f665e;
  }
}
/* Tablet */
@media only screen and (min-width: 48em) {
  #about-beliefs {
    padding: 5.625em 0 6.25em;
  }
  #about-beliefs .beliefs-head {
    margin-bottom: 3.75em;
  }
  #about-beliefs .beliefs-head h2 {
    max-width: 10em;
    font-size: 3.75em;
  }
  #about-beliefs .beliefs-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 2em;
  }
  #about-beliefs .belief-card h3 {
    font-size: 2.25em;
  }
  #about-beliefs .belief-card p {
    font-size: 1.0625em;
  }
}
/* Desktop */
@media only screen and (min-width: 1300px) {
  #about-beliefs {
    padding: 6.5625em 0 7.5em;
  }
  #about-beliefs .container {
    width: 90%;
    max-width: 70em;
  }
  #about-beliefs .beliefs-head {
    margin-bottom: 4.75em;
  }
  #about-beliefs .beliefs-head span {
    font-size: 1.125em;
    margin-bottom: 1.375em;
  }
  #about-beliefs .beliefs-head h2 {
    max-width: 56.25em;
    font-size: 4.75em;
    line-height: .95em;
  }
  #about-beliefs .beliefs-grid {
    gap: 3.5em;
  }
  #about-beliefs .belief-card .line {
    margin-bottom: 2.125em;
  }
  #about-beliefs .belief-card .number {
    font-size: 1.125em;
  }
  #about-beliefs .belief-card .number em {
    font-size: 1.125em;
  }
  #about-beliefs .belief-card h3 {
    font-size: 2em;
    margin-bottom: 1.25em;
  }
  #about-beliefs .belief-card p {
    font-size: 1em;
    line-height: 1.95em;
  }
}
/* ============================================
   OFF CLOCK
   ============================================ */
/* Mobile */
@media only screen and (min-width: 0em) {
  #off-clock {
    background: #fdfaf7;
    padding: 4.625em 0 5.125em;
  }
  #off-clock .container {
    width: 92%;
    max-width: 80em;
    margin: 0 auto;
  }
  #off-clock .off-clock-head {
    text-align: center;
    margin-bottom: 2.625em;
  }
  #off-clock .off-clock-head span {
    display: block;
    text-transform: uppercase;
    letter-spacing: .55em;
    font-size: 0.6875em;
    color: #b8a58f;
    margin-bottom: 1.125em;
  }
  #off-clock .off-clock-head h2 {
    margin: 0 auto;
    max-width: 10em;
    font-size: 2.875em;
    line-height: 1.05em;
    font-weight: 400;
    color: #3f3934;
  }
  #off-clock .off-clock-head h2 em {
    display: block;
    color: #b8a58f;
    font-style: italic;
    font-weight: 400;
  }
  #off-clock .off-clock-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.125em;
  }
  #off-clock .off-img {
    display: block;
    overflow: hidden;
    border-radius: 0.625em;
    background: #eee8df;
  }
  #off-clock .off-img img {
    display: block;
    width: 100%;
    height: 16.25em;
    object-fit: cover;
  }
  #off-clock .img-main img {
    height: 26.25em;
  }
}
/* Tablet */
@media only screen and (min-width: 48em) {
  #off-clock {
    padding: 5.625em 0 6em;
  }
  #off-clock .off-clock-head {
    margin-bottom: 3.25em;
  }
  #off-clock .off-clock-head h2 {
    font-size: 4em;
  }
  #off-clock .off-clock-grid {
    grid-template-columns: .9fr 1.25fr .9fr;
    grid-template-rows: 13.75em 13.75em;
    gap: 1.125em;
    align-items: stretch;
  }
  #off-clock .off-img img {
    height: 100%;
  }
  #off-clock .img-coffee {
    grid-column: 1;
    grid-row: 1;
  }
  #off-clock .img-dog {
    grid-column: 1;
    grid-row: 2;
  }
  #off-clock .img-main {
    grid-column: 2;
    grid-row: 1 / span 2;
  }
  #off-clock .img-beach {
    grid-column: 3;
    grid-row: 1;
  }
  #off-clock .img-camera {
    grid-column: 3;
    grid-row: 2;
  }
}
/* Desktop */
@media only screen and (min-width: 1300px) {
  #off-clock {
    padding: 6.5em 0 7em;
  }
  #off-clock .container {
    width: 90%;
    max-width: 76.25em;
  }
  #off-clock .off-clock-head {
    margin-bottom: 4.125em;
  }
  #off-clock .off-clock-head span {
    font-size: 0.75em;
  }
  #off-clock .off-clock-head h2 {
    font-size: 4.5em;
  }
  #off-clock .off-clock-grid {
    grid-template-columns: 21.25em 30em 21.25em;
    grid-template-rows: 13.75em 13.75em;
    gap: 1.125em;
    justify-content: center;
  }
  #off-clock .off-img {
    border-radius: 0.625em;
  }
}
/* ============================================
   ABOUT FINAL CTA
   ============================================ */
/* Mobile */
@media only screen and (min-width: 0em) {
  #about-final-cta {
    background: #fff;
    padding: 4.75em 0 5.25em;
    text-align: center;
  }
  #about-final-cta .container {
    width: 92%;
    max-width: 61.25em;
    margin: 0 auto;
  }
  #about-final-cta .eyebrow {
    display: block;
    text-transform: uppercase;
    letter-spacing: .55em;
    font-size: 0.6875em;
    color: #b8a58f;
    margin-bottom: 1.375em;
  }
  #about-final-cta h2 {
    margin: 0 auto 2.625em;
    max-width: 57.5em;
    font-size: 2.625em;
    line-height: 1.08em;
    font-weight: 400;
    color: #3f3934;
  }
  #about-final-cta h2 em {
    display: inline-block;
    font-style: italic;
    font-weight: 400;
    color: #3f3934;
  }
  #about-final-cta .cta-buttons {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.125em;
    margin-top: -2em;
  }
  #about-final-cta .cta-btn {
    width: 100%;
    max-width: 18.125em;
    min-height: 3.375em;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: .45em;
    font-size: 0.6875em;
    line-height: 1.2em;
    transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
  }
  #about-final-cta .btn-dark {
    background: transparent;
    border: 0.0625em solid #3f3934;
    color: #3f3934;
  }
  #about-final-cta .btn-dark:hover {
    background: #3f3934;
    color: #fff;
  }
  #about-final-cta .btn-light {
    background: transparent;
    border: 0.0625em solid rgba(184, 165, 143, 0.75);
    color: #b8a58f;
  }
  #about-final-cta .btn-light span {
    margin-left: 0.75em;
    font-size: 1.45454545em;
    line-height: 1;
  }
  #about-final-cta .btn-light:hover {
    background: #b8a58f;
    color: #fff;
    border-color: #b8a58f;
  }
}
/* Tablet */
@media only screen and (min-width: 48em) {
  #about-final-cta {
    padding: 5.75em 0 6.25em;
  }
  #about-final-cta h2 {
    font-size: 3.875em;
    margin-bottom: 3em;
  }
  #about-final-cta .cta-buttons {
    flex-direction: row;
    gap: 1.75em;
  }
  #about-final-cta .cta-btn {
    width: 16.25em;
  }
}
/* Desktop */
@media only screen and (min-width: 1300px) {
  #about-final-cta {
    padding: 5.625em 0 5.9375em;
  }
  #about-final-cta .container {
    max-width: 75em;
  }
  #about-final-cta .eyebrow {
    font-size: 0.875em;
    margin-bottom: 1.125em;
  }
  #about-final-cta h2 {
    max-width: 68.75em;
    margin: 0 auto 1.5em;
    font-size: 4.5em;
    line-height: .98em;
  }
  #about-final-cta .cta-buttons {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1.875em;
  }
  #about-final-cta .cta-btn {
    width: 25em;
    min-height: 4em;
    padding: 0 5em;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75em;
    letter-spacing: .42em;
  }
  #about-final-cta .btn-dark {
    background: transparent;
    border: 0.0625em solid #3f3934;
    color: #3f3934;
  }
  #about-final-cta .btn-dark:hover {
    background: #3f3934;
    color: #fff;
  }
  #about-final-cta .btn-light {
    background: transparent;
    border: 0.0625em solid rgba(184, 165, 143, 0.75);
    color: #b8a58f;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1em;
  }
  #about-final-cta .btn-light span {
    margin-left: 0;
    font-size: 1.125em;
    line-height: 1;
    position: relative;
    top: -0.0625em;
  }
  #about-final-cta .btn-light:hover {
    background: #b8a58f;
    color: #fff;
    border-color: #b8a58f;
  }
}
/* Dark Mode */
@media only screen and (min-width: 0em) {
  body.dark-mode #cta:after {
    display: none;
  }
}