/* =========================================================
   DR. SETU
   COMPLETE STYLESHEET
========================================================= */


/* =========================================================
   VARIABLES
========================================================= */

:root {
  --blue: #5689f7;
  --cream: #fff8ea;
  --white: #ffffff;
  --black: #000000;

  --treatment-pale: #eaf0fb;

  --ease:
    cubic-bezier(0.76, 0, 0.24, 1);
}


/* =========================================================
   RESET
========================================================= */

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

html {
  scroll-behavior: smooth;
}

html,
body {
  width: 100%;

  margin: 0;
  padding: 0;
}

body {
  min-width: 320px;

  margin: 0;

  overflow-x: hidden;

  color: var(--black);
  background: var(--cream);

  font-family:
    "Istok Web",
    sans-serif;
}

img {
  display: block;
}

a {
  color: inherit;

  text-decoration: none;
}


/* =========================================================
   =========================================================
   HERO
   =========================================================
========================================================= */


/* =========================================================
   SITE SHELL
========================================================= */

.site-shell {
  position: relative;

  width: 100%;
  height: 100svh;

  min-height: 720px;

  overflow: hidden;

  background:
    var(--cream);
}


/* =========================================================
   HEADER
========================================================= */

.site-header {
  position: absolute;

  z-index: 100;

  top: 3.5%;
  left: 4%;

  display: flex;

  width: 92%;
  height: 4.4rem;

  align-items: center;

  padding:
    0.4rem
    0.5rem
    0.4rem
    clamp(
      2rem,
      4vw,
      5rem
    );

  border-radius: 999px;

  color: var(--white);

  background:
    var(--blue);
}


/* =========================================================
   NAVIGATION
========================================================= */

.main-nav {
  display: flex;

  flex: 1;

  align-items: center;
  justify-content: center;

  gap: clamp(
    2rem,
    4vw,
    5rem
  );
}

.main-nav a {
  position: relative;

  padding: 0.7rem 0;

  color: var(--white);

  font-size: clamp(
    1rem,
    1.3vw,
    1.45rem
  );

  line-height: 1;

  white-space: nowrap;
}

.main-nav a::after {
  position: absolute;

  right: 0;
  bottom: 0.2rem;
  left: 0;

  height: 1px;

  content: "";

  background: var(--white);

  transform:
    scaleX(0);

  transform-origin:
    center;

  transition:
    transform
    180ms
    ease;
}

.main-nav a:hover::after,
.main-nav a:focus-visible::after {
  transform:
    scaleX(1);
}


/* =========================================================
   NAV CTA
========================================================= */

.nav-cta {
  display: inline-flex;

  min-height: 3.3rem;

  align-items: center;
  justify-content: center;

  padding:
    0.4rem
    2rem;

  border-radius: 999px;

  color: var(--black);
  background: var(--white);

  font-family:
    "Italiana",
    serif;

  font-size: clamp(
    1.2rem,
    1.6vw,
    1.8rem
  );

  white-space: nowrap;

  transition:
    color 180ms ease,
    background 180ms ease;
}

.nav-cta:hover {
  color: var(--white);

  background:
    var(--black);
}


/* =========================================================
   MOBILE HEADER
========================================================= */

.mobile-brand,
.mobile-menu {
  display: none;
}


/* =========================================================
   HERO
========================================================= */

.hero {
  position: absolute;

  inset: 0;

  width: 100%;
  height: 100%;

  overflow: hidden;
}


/* =========================================================
   HERO COPY
========================================================= */

.hero-copy {
  position: absolute;

  z-index: 30;

  top: 27%;
  left: 6.7%;

  width: 36%;
}

.hero-copy h1 {
  margin: 0;

  font-family:
    "Italiana",
    serif;

  font-size: clamp(
    6rem,
    7.5vw,
    9.5rem
  );

  font-weight: 400;

  line-height: 0.78;

  letter-spacing:
    -0.055em;
}

.practice-name {
  margin:
    0.7rem
    0
    0;

  font-family:
    "Italiana",
    serif;

  font-size: clamp(
    2.5rem,
    3.25vw,
    4rem
  );

  line-height: 0.92;

  white-space: nowrap;
}

.hero-intro {
  width: 100%;
  max-width: 31rem;

  margin:
    1.2rem
    0
    0;

  font-size: clamp(
    0.9rem,
    1vw,
    1.08rem
  );

  line-height: 1.5;
}


/* =========================================================
   HERO BUTTONS
========================================================= */

.hero-actions {
  display: flex;

  align-items: center;

  gap: 1rem;

  margin-top:
    2.8rem;
}

.button {
  display: inline-flex;

  min-height: 2.7rem;

  align-items: center;
  justify-content: center;

  padding:
    0.7rem
    1.6rem;

  border-radius: 999px;

  font-size: clamp(
    0.88rem,
    0.95vw,
    1rem
  );

  transition:
    transform 180ms ease,
    color 180ms ease,
    background 180ms ease;
}

.button:hover {
  transform:
    translateY(-2px);
}

.button-primary {
  color: var(--white);

  background:
    var(--blue);
}

.button-primary:hover {
  background:
    var(--black);
}

.button-secondary {
  border:
    1px
    solid
    #e5dfd3;

  color: var(--black);

  background:
    var(--white);
}

.button-secondary:hover {
  color: var(--white);

  background:
    var(--black);
}


/* =========================================================
   HERO VISUAL
========================================================= */

.hero-visual {
  position: absolute;

  inset: 0;

  z-index: 10;

  width: 100%;
  height: 100%;

  pointer-events: none;
}

.doctor-art {
  position: absolute;

  top: 9.8%;
  left: 32%;

  width: 55%;
  height: auto;

  max-width: none;

  pointer-events: none;

  user-select: none;
}


/* =========================================================
   HERO NOTE
========================================================= */

.hero-note {
  position: absolute;

  z-index: 25;

  top: 57%;
  right: 3.2%;

  display: flex;

  flex-direction: column;

  margin: 0;

  font-family:
    "Italianno",
    cursive;

  font-size: clamp(
    3rem,
    3.6vw,
    4.4rem
  );

  line-height: 0.95;

  white-space: nowrap;
}


/* =========================================================
   CREDENTIALS
========================================================= */

.credentials {
  position: absolute;

  z-index: 35;

  left: 6.1%;
  bottom: 17.5%;

  display: grid;

  width: 35%;

  grid-template-columns:
    0.9fr
    0.9fr
    1.35fr;

  gap: 0.85rem;
}

.credential-card {
  display: grid;

  min-height: 5.8rem;

  grid-template-rows:
    1fr
    auto;

  color: var(--white);

  background:
    var(--blue);
}

.credential-card strong {
  padding:
    0.9rem
    0.75rem;

  font-family:
    "Italiana",
    serif;

  font-size: clamp(
    1.05rem,
    1.3vw,
    1.5rem
  );

  font-weight: 400;
}

.credential-card small {
  padding:
    0.25rem
    0.4rem;

  color: var(--black);

  background:
    rgba(
      255,
      255,
      255,
      0.82
    );

  font-size: clamp(
    0.55rem,
    0.55vw,
    0.68rem
  );
}


/* =========================================================
   HERO RAIL
========================================================= */

.hero-rail {
  position: absolute;

  z-index: 50;

  right: 0;
  bottom: 0;
  left: 0;

  height: 7.6%;

  background:
    var(--blue);
}

.future-anchor {
  position: absolute;

  bottom: 0;
}


/* =========================================================
   =========================================================
   TREATMENTS
   =========================================================
========================================================= */


/* =========================================================
   SECTION
========================================================= */

.treatments-section {
  position: relative;

  width: 100%;
  height: 100svh;

  min-height: 700px;

  overflow: hidden;

  overscroll-behavior:
    contain;

  background:
    var(--white);
}


/* =========================================================
   TREATMENTS PIN
========================================================= */

.treatments-pin {
  position: relative;

  width: 100%;
  height: 100%;

  overflow: hidden;

  background:
    var(--white);
}


/* =========================================================
   STAGE
========================================================= */

.treatments-stage {
  position: absolute;

  top: 50%;
  left: 50%;

  width: min(
    100vw,
    calc(
      100svh *
      1.5384615385
    )
  );

  aspect-ratio:
    1280 / 832;

  overflow: visible;

  transform:
    translate(
      -50%,
      -50%
    );

  container-type:
    inline-size;
}


/* =========================================================
   LARGE SERVICE IMAGE
========================================================= */

.service-large-media {
  position: absolute;

  z-index: 1;

  inset: 0;

  overflow: hidden;

  pointer-events: none;
}

.service-large-image {
  position: absolute;

  top: 0;
  right: 0;

  width: 66%;
  height: 100%;

  object-fit: cover;

  object-position:
    center top;

  opacity: 0;

  transform:
    translateY(16px)
    scale(1.008);

  transition:
    opacity
      360ms
      ease,

    transform
      520ms
      var(--ease);

  pointer-events: none;

  user-select: none;
}

.treatments-section.is-ready
.service-large-image.is-active {
  opacity: 1;

  transform:
    translateY(0)
    scale(1);
}


/* =========================================================
   SERVICE IMAGE BLEND
========================================================= */

.service-image-blend {
  position: absolute;

  z-index: 2;

  top: 0;
  bottom: 0;

  left: 28%;

  width: 22%;

  opacity: 0;

  pointer-events: none;

  background:
    linear-gradient(
      90deg,

      rgba(
        234,
        240,
        251,
        1
      )
      0%,

      rgba(
        234,
        240,
        251,
        0.92
      )
      22%,

      rgba(
        234,
        240,
        251,
        0.65
      )
      45%,

      rgba(
        245,
        248,
        252,
        0.35
      )
      68%,

      rgba(
        255,
        255,
        255,
        0
      )
      100%
    );

  transition:
    opacity
      280ms
      ease;
}

.treatments-section.is-ready
.service-image-blend {
  opacity: 1;
}


/* =========================================================
   CIRCLE GROUP
========================================================= */

.treatments-circle-group {
  position: absolute;

  z-index: 3;

  top: 50%;
  left: 50%;

  width: 100%;

  aspect-ratio: 1;

  transform:
    translate(
      -50%,
      -50%
    )
    scale(1);

  transition:
    top
      620ms
      var(--ease),

    left
      620ms
      var(--ease),

    transform
      620ms
      var(--ease);

  will-change:
    top,
    left,
    transform;
}

.treatments-section.is-ready
.treatments-circle-group {
  top: 27%;
  left: 11%;

  transform:
    translate(
      -50%,
      -50%
    )
    scale(0.75);
}


/* =========================================================
   PALE WHEEL
========================================================= */

.treatments-wheel {
  position: absolute;

  z-index: 1;

  inset: 0;

  width: 100%;
  height: 100%;

  overflow: hidden;

  border-radius: 50%;

  background:
    var(--treatment-pale);

  --wheel-angle:
    126deg;

  --counter-angle:
    -126deg;

  transform:
    rotate(
      var(--wheel-angle)
    );

  transition:
    transform
      520ms
      var(--ease);

  will-change:
    transform;
}


/* =========================================================
   WHEEL SECTORS
========================================================= */

.wheel-sector {
  position: absolute;

  z-index: 2;

  inset: 0;

  opacity: 0;

  -webkit-mask:
    conic-gradient(
      from var(--sector-start),

      #000
      0deg
      36deg,

      transparent
      36deg
      360deg
    );

  mask:
    conic-gradient(
      from var(--sector-start),

      #000
      0deg
      36deg,

      transparent
      36deg
      360deg
    );

  transition:
    opacity
      280ms
      ease;

  pointer-events: none;
}

.treatments-section.is-ready
.wheel-sector {
  opacity: 1;
}

.wheel-sector img {
  position: absolute;

  top: 50%;
  left: 50%;

  width: 110%;
  height: 110%;

  object-fit: cover;

  object-position:
    center;

  transform:
    translate(
      -50%,
      -50%
    )
    rotate(
      var(--counter-angle)
    )
    scale(1.04);

  transition:
    transform
      520ms
      var(--ease);

  pointer-events: none;
}


/* =========================================================
   WHEEL DIVIDERS
========================================================= */

.wheel-divider-lines {
  position: absolute;

  z-index: 10;

  inset: 0;

  border-radius: 50%;

  opacity: 0;

  background:
    repeating-conic-gradient(
      from -18deg,

      transparent
      0deg
      35.5deg,

      #111111
      35.5deg
      36deg
    );

  transition:
    opacity
      280ms
      ease;

  pointer-events: none;
}

.treatments-section.is-ready
.wheel-divider-lines {
  opacity: 1;
}


/* =========================================================
   BLUE CIRCLE
========================================================= */

.treatments-blue-circle {
  position: absolute;

  z-index: 20;

  top: 50%;
  left: 50%;

  width: 70%;

  aspect-ratio: 1;

  border-radius: 50%;

  background:
    var(--blue);

  transform:
    translate(
      -50%,
      -50%
    );

  pointer-events: none;
}


/* =========================================================
   TREATMENT TITLE
========================================================= */

.treatments-title {
  position: absolute;

  z-index: 21;

  top: 50%;
  left: 50%;

  display: flex;

  flex-direction: column;

  align-items: center;
  justify-content: center;

  margin: 0;

  color: var(--white);

  font-family:
    "Italiana",
    serif;

  font-size:
    7.5cqw;

  font-weight: 400;

  line-height: 0.98;

  text-align: center;

  transform:
    translate(
      -50%,
      -50%
    );

  pointer-events: none;
}

.treatments-ampersand {
  margin:
    0.08em
    0;
}


/* =========================================================
   SERVICE COPY
========================================================= */

.service-copy-wrapper {
  position: absolute;

  z-index: 5;

  left: 3.2%;
  bottom: 10%;

  width: 40%;
  height: 12rem;
}

.service-copy {
  position: absolute;

  left: 0;
  bottom: 0;

  width: 100%;

  opacity: 0;

  transform:
    translateY(15px);

  transition:
    opacity
      280ms
      ease,

    transform
      420ms
      var(--ease);
}

.treatments-section.is-ready
.service-copy.is-active {
  opacity: 1;

  transform:
    translateY(0);
}

.service-copy h3 {
  margin: 0;

  color: #111111;

  font-size:
    4cqw;

  font-weight: 700;

  line-height: 1;
}

.service-copy p {
  max-width: 34rem;

  margin:
    0.65rem
    0
    0;

  color: #111111;

  font-size:
    2.15cqw;

  line-height: 1.35;
}


/* =========================================================
   TREATMENTS FLOWER
========================================================= */

.treatments-corner-art {
  position: absolute;

  z-index: 30;

  right: 0;
  bottom: -2%;

  width: 39%;

  height: auto;

  pointer-events: none;

  user-select: none;
}


/* =========================================================
   =========================================================
   GALLERY
   =========================================================
========================================================= */


/* =========================================================
   SECTION
========================================================= */

.gallery-section {
  position: relative;

  width: 100%;
  height: 100svh;

  min-height: 700px;

  overflow: hidden;

  background:
    var(--cream);
}


/* =========================================================
   WHOLE GALLERY ENTERS FROM RIGHT
========================================================= */

.gallery-reveal {
  display: grid;

  width: 100%;
  height: 100%;

  grid-template-columns:
    60% 40%;

  background:
    var(--cream);

  opacity: 0;

  transform:
    translateX(100%);

  transition:
    transform
      760ms
      var(--ease),

    opacity
      320ms
      ease;

  will-change:
    transform,
    opacity;
}

.gallery-section.is-visible
.gallery-reveal {
  opacity: 1;

  transform:
    translateX(0);
}


/* =========================================================
   LEFT GALLERY COLLAGE
========================================================= */

.gallery-collage {
  position: relative;

  display: grid;

  width: 100%;
  height: 100%;

  grid-template-columns:
    repeat(
      3,
      minmax(
        0,
        1fr
      )
    );

  gap: 0.75rem;

  padding:
    0
    0.7rem;

  overflow: hidden;

  background:
    var(--cream);
}


/* =========================================================
   GALLERY TRACK
========================================================= */

.gallery-track {
  position: relative;

  width: 100%;
  height: 100%;

  overflow: hidden;
}


/* =========================================================
   GALLERY COLUMN
========================================================= */

.gallery-column {
  display: flex;

  width: 100%;

  flex-direction: column;

  gap: 0.75rem;

  will-change:
    transform;
}


/* =========================================================
   COLUMN START POSITIONS

   Card size stays identical.
   Only vertical offset changes.
========================================================= */

.gallery-column-01 {
  padding-top: 0;
}

.gallery-column-02 {
  padding-top: 8rem;
}

.gallery-column-03 {
  padding-top: 2.5rem;
}


/* =========================================================
   ALL GALLERY CARDS SAME SIZE

   Reference ratio:
   239 × 362
========================================================= */

.gallery-item,
.gallery-tall,
.gallery-medium,
.gallery-small {
  position: relative;

  flex:
    0
    0
    auto;

  width: 100%;

  aspect-ratio:
    239 / 362;

  height: auto;

  margin: 0;

  overflow: hidden;

  border:
    3px
    solid
    var(--blue);

  background:
    #e8e8e8;
}


/* =========================================================
   GALLERY IMAGE
========================================================= */

.gallery-item img {
  display: block;

  width: 100%;
  height: 100%;

  object-fit: cover;

  object-position:
    center;

  transition:
    transform
      500ms
      ease;
}

.gallery-item:hover img {
  transform:
    scale(1.035);
}


/* =========================================================
   COLUMN 01 — UP
========================================================= */

.gallery-section.is-visible
.gallery-track-up
.gallery-column {
  animation:
    galleryMoveUp
    16s
    linear
    infinite;
}


/* =========================================================
   COLUMN 02 — DOWN
========================================================= */

.gallery-section.is-visible
.gallery-track-down
.gallery-column {
  animation:
    galleryMoveDown
    17s
    linear
    infinite;
}


/* =========================================================
   COLUMN 03 — UP
========================================================= */

.gallery-section.is-visible
.gallery-track-up-delayed
.gallery-column {
  animation:
    galleryMoveUp
    18s
    linear
    infinite;

  animation-delay:
    -5s;
}


/* =========================================================
   MOVE UP
========================================================= */

@keyframes galleryMoveUp {

  from {
    transform:
      translateY(0);
  }

  to {
    transform:
      translateY(-40%);
  }

}


/* =========================================================
   MOVE DOWN
========================================================= */

@keyframes galleryMoveDown {

  from {
    transform:
      translateY(-40%);
  }

  to {
    transform:
      translateY(0);
  }

}


/* =========================================================
   GALLERY RIGHT SIDE
========================================================= */

.gallery-story {
  position: relative;

  min-width: 0;

  width: 100%;
  height: 100%;

  padding:
    1.4rem
    1.8rem
    2rem;

  overflow: hidden;

  background:
    var(--cream);
}


/* =========================================================
   GALLERY FEATURE IMAGE
========================================================= */

.gallery-feature-image {
  width: 100%;
  height: 43%;

  min-height: 280px;

  overflow: hidden;

  opacity: 0;

  transform:
    translateX(45px);

  transition:
    opacity
      450ms
      ease,

    transform
      650ms
      var(--ease);

  transition-delay:
    220ms;
}

.gallery-section.is-visible
.gallery-feature-image {
  opacity: 1;

  transform:
    translateX(0);
}

.gallery-feature-image img {
  width: 100%;
  height: 100%;

  object-fit: cover;

  object-position:
    center;
}


/* =========================================================
   GALLERY STORY COPY
========================================================= */

.gallery-story-copy {
  position: relative;

  z-index: 5;

  max-width: 35rem;

  padding-top:
    1.8rem;

  opacity: 0;

  transform:
    translateX(35px);

  transition:
    opacity
      450ms
      ease,

    transform
      650ms
      var(--ease);

  transition-delay:
    310ms;
}

.gallery-section.is-visible
.gallery-story-copy {
  opacity: 1;

  transform:
    translateX(0);
}

.gallery-eyebrow {
  margin:
    0
    0
    2rem;

  font-size:
    0.9rem;

  font-weight: 700;

  letter-spacing:
    0.03em;
}

.gallery-story-copy h2 {
  max-width: 32rem;

  margin: 0;

  font-size: clamp(
    1.3rem,
    1.7vw,
    2rem
  );

  font-weight: 400;

  line-height: 1.3;
}

.gallery-description {
  max-width: 31rem;

  margin:
    1.4rem
    0
    0;

  line-height: 1.4;
}

.gallery-link {
  display: inline-block;

  margin-top:
    1.7rem;

  font-weight: 700;

  transition:
    transform
      180ms
      ease;
}

.gallery-link:hover {
  transform:
    translateX(5px);
}


/* =========================================================
   GALLERY FLOWER
========================================================= */

.gallery-corner-art {
  position: absolute;

  z-index: 4;

  right: -2rem;
  bottom: -1rem;

  width: 36%;

  max-width: 14rem;

  height: auto;

  pointer-events: none;

  user-select: none;
}


/* =========================================================
   =========================================================
   TABLET
   =========================================================
========================================================= */

@media (max-width: 1040px) {

  /* HERO */

  .site-shell {
    height: auto;

    min-height:
      100svh;
  }

  .site-header {
    position: relative;

    top: auto;
    left: auto;

    width:
      calc(
        100% - 3rem
      );

    height: 4.8rem;

    margin:
      1.5rem
      auto
      0;

    padding:
      0.4rem
      0.6rem
      0.4rem
      1.4rem;
  }

  .main-nav,
  .nav-cta {
    display: none;
  }

  .mobile-brand {
    display: block;

    color: var(--white);

    font-family:
      "Italiana",
      serif;

    font-size:
      1.7rem;
  }

  .mobile-menu {
    position: relative;

    display: block;

    margin-left: auto;
  }

  .mobile-menu summary {
    padding:
      0.7rem
      1rem;

    border-radius:
      999px;

    color:
      var(--black);

    background:
      var(--white);

    cursor:
      pointer;

    list-style:
      none;
  }

  .mobile-menu summary::-webkit-details-marker {
    display: none;
  }

  .mobile-menu nav {
    position: absolute;

    z-index: 200;

    top: 4.5rem;
    right: 0;

    display: grid;

    width: 18rem;

    padding: 1rem;

    gap: 0.5rem;

    color:
      var(--black);

    background:
      var(--white);
  }


  /* HERO */

  .hero {
    position: relative;

    height:
      74rem;
  }

  .hero-copy {
    top:
      5rem;

    left:
      6%;

    width:
      60%;
  }

  .doctor-art {
    top:
      25rem;

    left:
      39%;

    width:
      68%;
  }

  .credentials {
    left:
      5%;

    bottom:
      7rem;

    width:
      58%;
  }


  /* TREATMENTS */

  .treatments-section.is-ready
  .treatments-circle-group {
    top:
      27%;

    left:
      11%;

    transform:
      translate(
        -50%,
        -50%
      )
      scale(0.72);
  }

  .service-large-image {
    width:
      68%;
  }

  .service-image-blend {
    left:
      27%;

    width:
      24%;
  }


  /* GALLERY */

  .gallery-reveal {
    grid-template-columns:
      55% 45%;
  }

  .gallery-collage {
    gap:
      0.5rem;

    padding:
      0
      0.5rem;
  }

  .gallery-column {
    gap:
      0.5rem;
  }

  .gallery-column-02 {
    padding-top:
      6rem;
  }

  .gallery-column-03 {
    padding-top:
      2rem;
  }

  .gallery-item,
  .gallery-tall,
  .gallery-medium,
  .gallery-small {
    border-width:
      2px;

    aspect-ratio:
      239 / 362;
  }

  .gallery-story {
    padding:
      1rem
      1.2rem
      1.5rem;
  }
}


/* =========================================================
   =========================================================
   MOBILE
   =========================================================
========================================================= */

@media (max-width: 720px) {

  /* =====================================================
     HERO MOBILE
  ====================================================== */

  .hero {
    display: flex;

    height: auto;

    flex-direction:
      column;

    padding-bottom:
      5rem;
  }

  .hero-copy {
    position: relative;

    top: auto;
    left: auto;

    width: auto;

    margin:
      4.5rem
      6%
      0;
  }

  .hero-copy h1 {
    font-size: clamp(
      4rem,
      21vw,
      6rem
    );
  }

  .practice-name {
    font-size: clamp(
      2rem,
      9vw,
      3rem
    );

    white-space:
      normal;
  }

  .hero-actions {
    flex-wrap:
      wrap;
  }

  .hero-visual {
    position: relative;

    inset: auto;

    width: 100%;
    height:
      34rem;

    margin-top:
      1rem;
  }

  .doctor-art {
    top:
      0;

    left:
      50%;

    width:
      34rem;

    transform:
      translateX(-50%);
  }

  .hero-note {
    position:
      relative;

    top:
      auto;

    right:
      auto;

    align-self:
      flex-end;

    margin:
      -5rem
      6%
      2rem;

    font-size:
      2.3rem;
  }

  .credentials {
    position:
      relative;

    left:
      auto;

    bottom:
      auto;

    width:
      auto;

    grid-template-columns:
      1fr;

    gap:
      0.8rem;

    margin:
      0
      6%;
  }


  /* =====================================================
     TREATMENTS MOBILE
  ====================================================== */

  .treatments-section {
    height:
      100svh;

    min-height:
      620px;
  }

  .treatments-stage {
    position:
      absolute;

    inset:
      0;

    top:
      0;

    left:
      0;

    width:
      100%;

    height:
      100%;

    aspect-ratio:
      auto;

    transform:
      none;

    overflow:
      hidden;
  }

  .service-image-blend {
    display:
      none;
  }

  .service-large-image {
    top:
      12%;

    left:
      0;

    right:
      auto;

    width:
      100%;

    height:
      calc(
        88% - 8.8rem
      );

    object-position:
      center
      top;
  }

  .treatments-circle-group {
    top:
      50%;

    left:
      50%;

    width:
      100vw;

    transform:
      translate(
        -50%,
        -50%
      );
  }

  .treatments-section.is-ready
  .treatments-circle-group {
    top:
      -12vw;

    left:
      -15vw;

    width:
      100vw;

    transform:
      none;
  }

  .treatments-title {
    font-size:
      7.5cqw;
  }

  .service-copy-wrapper {
    z-index:
      40;

    left:
      0;

    right:
      0;

    bottom:
      0;

    width:
      100%;

    height:
      8.8rem;

    padding:
      1rem;

    background:
      var(--white);
  }

  .service-copy {
    top:
      50%;

    left:
      50%;

    bottom:
      auto;

    width:
      90%;

    text-align:
      center;

    transform:
      translate(
        -50%,
        calc(
          -50% + 10px
        )
      );
  }

  .treatments-section.is-ready
  .service-copy.is-active {
    transform:
      translate(
        -50%,
        -50%
      );
  }

  .service-copy h3 {
    font-size: clamp(
      1.7rem,
      8vw,
      2.2rem
    );
  }

  .service-copy p {
    max-width:
      22rem;

    margin:
      0.55rem
      auto
      0;

    font-size: clamp(
      0.78rem,
      3.7vw,
      0.95rem
    );
  }

  .treatments-corner-art {
    right:
      -3%;

    bottom:
      8.5rem;

    width:
      48%;

    max-width:
      200px;
  }


  /* =====================================================
     GALLERY MOBILE
  ====================================================== */

  .gallery-section {
    height:
      auto;

    min-height:
      100svh;
  }

  .gallery-reveal {
    display:
      flex;

    width:
      100%;

    min-height:
      100svh;

    flex-direction:
      column;
  }

  .gallery-collage {
    width:
      100%;

    height:
      60svh;

    min-height:
      480px;

    grid-template-columns:
      repeat(
        3,
        minmax(
          0,
          1fr
        )
      );

    gap:
      0.3rem;

    padding:
      0.3rem;
  }

  .gallery-track {
    height:
      100%;
  }

  .gallery-column {
    gap:
      0.3rem;
  }

  .gallery-column-01 {
    padding-top:
      0;
  }

  .gallery-column-02 {
    padding-top:
      4rem;
  }

  .gallery-column-03 {
    padding-top:
      1.5rem;
  }

  .gallery-item,
  .gallery-tall,
  .gallery-medium,
  .gallery-small {
    width:
      100%;

    height:
      auto;

    aspect-ratio:
      239 / 362;

    border-width:
      2px;
  }

  .gallery-section.is-visible
  .gallery-track-up
  .gallery-column {
    animation-duration:
      19s;
  }

  .gallery-section.is-visible
  .gallery-track-down
  .gallery-column {
    animation-duration:
      20s;
  }

  .gallery-story {
    height:
      auto;

    min-height:
      38rem;

    padding:
      0.8rem
      1rem
      4rem;
  }

  .gallery-feature-image {
    height:
      20rem;

    min-height:
      0;
  }

  .gallery-story-copy {
    padding-top:
      1.5rem;
  }

  .gallery-corner-art {
    width:
      45%;

    max-width:
      190px;
  }
}


/* =========================================================
   SMALL PHONE
========================================================= */

@media (max-width: 470px) {

  /* HERO */

  .hero-actions {
    display:
      grid;

    width:
      100%;
  }

  .button {
    width:
      100%;
  }

  .hero-visual {
    height:
      27rem;
  }

  .doctor-art {
    width:
      28rem;
  }


  /* TREATMENTS */

  .treatments-section.is-ready
  .treatments-circle-group {
    top:
      -11vw;

    left:
      -15vw;

    width:
      104vw;
  }

  .service-copy-wrapper {
    height:
      8.6rem;
  }

  .treatments-corner-art {
    bottom:
      8.25rem;
  }


  /* GALLERY */

  .gallery-collage {
    height:
      56svh;

    min-height:
      450px;

    gap:
      0.25rem;

    padding:
      0.25rem;
  }

  .gallery-column {
    gap:
      0.25rem;
  }

  .gallery-column-02 {
    padding-top:
      3rem;
  }

  .gallery-column-03 {
    padding-top:
      1rem;
  }

  .gallery-feature-image {
    height:
      17rem;
  }

  .gallery-story-copy h2 {
    font-size:
      1.2rem;
  }

  .gallery-description {
    font-size:
      0.88rem;
  }
}


/* =========================================================
   VERY SMALL MOBILE
========================================================= */

@media (max-width: 380px) {

  .treatments-section.is-ready
  .treatments-circle-group {
    top:
      -9vw;

    left:
      -17vw;

    width:
      108vw;
  }

  .gallery-collage {
    min-height:
      420px;
  }
}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (
  prefers-reduced-motion:
  reduce
) {

  html {
    scroll-behavior:
      auto;
  }

  .treatments-circle-group,
  .treatments-wheel,
  .wheel-sector img,
  .service-large-image,
  .service-copy,
  .gallery-reveal,
  .gallery-feature-image,
  .gallery-story-copy {
    transition-duration:
      0.01ms !important;
  }

  .gallery-column {
    animation:
      none !important;
  }
}
/* =========================================================
   =========================================================
   SECTION 04
   BEFORE / AFTER RESULTS
   =========================================================
========================================================= */

.results-section {
  position: relative;

  width: 100%;
  height: 100svh;

  min-height: 700px;

  overflow: hidden;

  background: #ffffff;
}


/* =========================================================
   INNER
========================================================= */

.results-inner {
  display: flex;

  width: 100%;
  height: 100%;

  flex-direction: column;

  justify-content: center;

  padding:
    clamp(2rem, 4vw, 5rem)
    clamp(1rem, 6vw, 7rem);

  opacity: 0;

  transform:
    translateY(45px);

  transition:
    opacity 500ms ease,
    transform 760ms var(--ease);
}


.results-section.is-visible
.results-inner {
  opacity: 1;

  transform:
    translateY(0);
}


/* =========================================================
   HEADING
========================================================= */

.results-heading {
  margin-bottom:
    clamp(1.5rem, 3vw, 3rem);

  text-align: center;
}


.results-eyebrow {
  margin:
    0
    0
    0.65rem;

  font-size:
    0.78rem;

  font-weight: 700;

  letter-spacing:
    0.15em;
}


.results-heading h2 {
  margin: 0;

  font-family:
    "Italiana",
    serif;

  font-size: clamp(
    3rem,
    5vw,
    6rem
  );

  font-weight: 400;

  line-height: 1;
}


.results-heading h2 span {
  color:
    var(--blue);
}


.results-intro {
  max-width: 34rem;

  margin:
    1rem
    auto
    0;

  font-size: clamp(
    0.9rem,
    1vw,
    1.05rem
  );

  line-height: 1.5;
}


/* =========================================================
   FOUR EQUAL CARDS
========================================================= */

.results-grid {
  display: grid;

  width: 100%;

  grid-template-columns:
    repeat(4, minmax(0, 1fr));

  gap:
    clamp(0.8rem, 1.5vw, 1.5rem);
}


/* =========================================================
   CARD
========================================================= */

.comparison-card {
  position: relative;

  min-width: 0;

  opacity: 0;

  transform:
    translateY(35px);

  transition:
    opacity 480ms ease,
    transform 700ms var(--ease);
}


.results-section.is-visible
.comparison-card {
  opacity: 1;

  transform:
    translateY(0);
}


.results-section.is-visible
.comparison-card:nth-child(1) {
  transition-delay:
    100ms;
}


.results-section.is-visible
.comparison-card:nth-child(2) {
  transition-delay:
    170ms;
}


.results-section.is-visible
.comparison-card:nth-child(3) {
  transition-delay:
    240ms;
}


.results-section.is-visible
.comparison-card:nth-child(4) {
  transition-delay:
    310ms;
}


/* =========================================================
   MEDIA
========================================================= */

.comparison-media {
  position: relative;

  width: 100%;

  /*
    Reference is roughly portrait shaped.
  */

  aspect-ratio:
    0.83 / 1;

  overflow: hidden;

  background:
    #ededed;

  isolation: isolate;

  cursor:
    ew-resize;
}


/* =========================================================
   BOTH IMAGES
========================================================= */

.comparison-image {
  position: absolute;

  inset: 0;

  width: 100%;
  height: 100%;

  object-fit: cover;

  object-position:
    center;

  pointer-events:
    none;

  user-select:
    none;
}


/* =========================================================
   BEFORE
========================================================= */

.comparison-before {
  z-index: 1;
}


/* =========================================================
   AFTER

   Only show right side after divider.
========================================================= */

.comparison-after {
  z-index: 2;

  clip-path:
    inset(
      0
      0
      0
      var(--position)
    );
}


/* =========================================================
   LABELS
========================================================= */

.comparison-label {
  position: absolute;

  z-index: 8;

  top: 1rem;

  padding:
    0.35rem
    0.65rem;

  border-radius:
    999px;

  color:
    #111111;

  background:
    rgba(
      255,
      255,
      255,
      0.88
    );

  font-size:
    0.7rem;

  font-weight: 700;

  text-transform:
    uppercase;

  letter-spacing:
    0.08em;

  pointer-events:
    none;
}


.comparison-label-before {
  left: 1rem;
}


.comparison-label-after {
  right: 1rem;
}


/* =========================================================
   DIVIDER
========================================================= */

.comparison-divider {
  position: absolute;

  z-index: 10;

  top: 0;
  bottom: 0;

  left:
    var(--position);

  width:
    2px;

  background:
    #ffffff;

  transform:
    translateX(-50%);

  pointer-events:
    none;
}


/* =========================================================
   HANDLE
========================================================= */

.comparison-handle {
  position: absolute;

  z-index: 11;

  top: 50%;

  left:
    var(--position);

  display: flex;

  width: 3rem;
  height: 3rem;

  align-items: center;
  justify-content: center;

  gap:
    0.18rem;

  border-radius:
    50%;

  color:
    #111111;

  background:
    #ffffff;

  box-shadow:
    0
    5px
    20px
    rgba(
      0,
      0,
      0,
      0.14
    );

  transform:
    translate(
      -50%,
      -50%
    );

  pointer-events:
    none;
}


.comparison-handle span {
  font-family:
    Arial,
    sans-serif;

  font-size:
    1.1rem;

  font-weight:
    700;

  line-height:
    1;
}


/* =========================================================
   INVISIBLE RANGE

   Real drag input covering whole card.
========================================================= */

.comparison-range {
  position: absolute;

  z-index: 20;

  inset: 0;

  width: 100%;
  height: 100%;

  margin: 0;

  opacity: 0;

  cursor:
    ew-resize;

  appearance:
    none;

  -webkit-appearance:
    none;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1100px) {

  .results-section {
    height: auto;

    min-height:
      100svh;
  }


  .results-inner {
    min-height:
      100svh;

    padding:
      4rem
      2rem;
  }


  .results-grid {
    grid-template-columns:
      repeat(
        2,
        minmax(
          0,
          1fr
        )
      );

    gap:
      1rem;
  }


  .comparison-media {
    aspect-ratio:
      1 / 1;
  }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 620px) {

  .results-inner {
    justify-content:
      flex-start;

    padding:
      4rem
      1rem;
  }


  .results-heading {
    margin-bottom:
      2rem;
  }


  .results-heading h2 {
    font-size:
      clamp(
        3rem,
        15vw,
        5rem
      );
  }


  .results-grid {
    display: flex;

    width: 100%;

    gap:
      0.85rem;

    overflow-x:
      auto;

    scroll-snap-type:
      x mandatory;

    scrollbar-width:
      none;

    padding-bottom:
      1rem;
  }


  .results-grid::-webkit-scrollbar {
    display:
      none;
  }


  .comparison-card {
    flex:
      0 0
      82%;

    scroll-snap-align:
      center;
  }


  .comparison-media {
    aspect-ratio:
      0.82 / 1;
  }


  .comparison-handle {
    width:
      2.8rem;

    height:
      2.8rem;
  }

}
/* =========================================================
   =========================================================
   SECTION 05
   PATIENT REVIEWS
   =========================================================
========================================================= */

.reviews-section {
  position: relative;

  width: 100%;
  height: 100svh;

  min-height: 700px;

  overflow: hidden;

  background: #ffffff;
}


/* =========================================================
   INNER
========================================================= */

.reviews-inner {
  position: relative;

  display: flex;

  width: 100%;
  height: 100%;

  flex-direction: column;

  align-items: center;
  justify-content: center;

  padding:
    clamp(3rem, 5vw, 6rem)
    clamp(2rem, 8vw, 10rem);

  opacity: 0;

  transform:
    translateY(45px);

  transition:
    opacity 500ms ease,
    transform 760ms var(--ease);
}


.reviews-section.is-visible
.reviews-inner {
  opacity: 1;

  transform:
    translateY(0);
}


/* =========================================================
   HEADING
========================================================= */

.reviews-heading {
  margin-bottom:
    clamp(2rem, 4vw, 4rem);

  text-align: center;
}


.reviews-eyebrow {
  margin:
    0
    0
    0.6rem;

  font-size: 0.78rem;

  font-weight: 700;

  letter-spacing: 0.14em;
}


.reviews-heading h2 {
  margin: 0;

  font-family:
    "Italiana",
    serif;

  font-size: clamp(
    3rem,
    4.5vw,
    5.5rem
  );

  font-weight: 400;

  line-height: 1;
}


/* =========================================================
   GRID
========================================================= */

.reviews-grid {
  display: grid;

  width: 100%;

  grid-template-columns:
    repeat(3, minmax(0, 1fr));

  gap:
    clamp(1rem, 1.7vw, 2rem);
}


/* =========================================================
   REVIEW ITEM
========================================================= */

.review-item {
  position: relative;

  min-width: 0;

  opacity: 0;

  transform:
    translateY(35px);

  transition:
    opacity 500ms ease,
    transform 700ms var(--ease);
}


.reviews-section.is-visible
.review-item {
  opacity: 1;

  transform:
    translateY(0);
}


.reviews-section.is-visible
.review-item:nth-child(1) {
  transition-delay: 120ms;
}


.reviews-section.is-visible
.review-item:nth-child(2) {
  transition-delay: 220ms;
}


.reviews-section.is-visible
.review-item:nth-child(3) {
  transition-delay: 320ms;
}


/* =========================================================
   REVIEW CARD
========================================================= */

.review-card {
  position: relative;

  display: flex;

  width: 100%;

  min-height: 20rem;

  flex-direction: column;

  align-items: center;

  padding:
    2rem
    clamp(1.5rem, 2.6vw, 3rem)
    4.2rem;

  border:
    1px
    solid
    #e3e3e3;

  border-radius: 0.75rem;

  background: #ffffff;

  text-align: center;

  transition:
    transform 280ms ease,
    box-shadow 280ms ease,
    border-color 280ms ease;
}


.review-card:hover {
  border-color:
    rgba(86, 137, 247, 0.5);

  transform:
    translateY(-6px);

  box-shadow:
    0
    1.5rem
    4rem
    rgba(0, 0, 0, 0.07);
}


/* =========================================================
   QUOTE
========================================================= */

.review-quote {
  height: 4.2rem;

  margin-top: -0.2rem;

  color:
    #202030;

  font-family:
    Georgia,
    serif;

  font-size:
    5rem;

  font-weight:
    400;

  line-height:
    1;
}


/* =========================================================
   TEXT
========================================================= */

.review-text {
  max-width: 30rem;

  margin:
    0.8rem
    auto
    0;

  color:
    #747474;

  font-size: clamp(
    0.9rem,
    1vw,
    1.05rem
  );

  line-height:
    1.5;
}


/* =========================================================
   STARS
========================================================= */

.review-stars {
  display: flex;

  align-items: center;
  justify-content: center;

  gap:
    0.25rem;

  margin-top:
    2rem;

  color:
    #ffb51b;

  font-size:
    1rem;

  line-height:
    1;
}


/* =========================================================
   AVATAR
========================================================= */

.review-avatar {
  position: absolute;

  z-index: 5;

  bottom: -2.45rem;
  left: 50%;

  width: 5rem;
  height: 5rem;

  overflow: hidden;

  border:
    5px
    solid
    #ffffff;

  border-radius:
    50%;

  background:
    #eeeeee;

  box-shadow:
    0
    1rem
    2.5rem
    rgba(0, 0, 0, 0.08);

  transform:
    translateX(-50%);
}


.review-avatar img {
  width: 100%;
  height: 100%;

  object-fit: cover;

  object-position: center;
}


/* =========================================================
   PERSON
========================================================= */

.review-person {
  padding-top:
    3.4rem;

  text-align:
    center;
}


.review-person h3 {
  margin: 0;

  color:
    #111111;

  font-size: clamp(
    1rem,
    1.15vw,
    1.3rem
  );

  font-weight: 700;
}


.review-person p {
  margin:
    0.3rem
    0
    0;

  color:
    #999999;

  font-size: 0.82rem;
}


/* =========================================================
   BACK TO TOP
========================================================= */

.reviews-back-top {
  position: absolute;

  right:
    1.5rem;

  bottom:
    1.5rem;

  display: flex;

  width: 2.6rem;
  height: 2.6rem;

  align-items: center;
  justify-content: center;

  border:
    1px
    solid
    #222222;

  border-radius:
    50%;

  color:
    #111111;

  background:
    #ffffff;

  font-size:
    1rem;

  transition:
    color 180ms ease,
    background 180ms ease,
    transform 180ms ease;
}


.reviews-back-top:hover {
  color:
    #ffffff;

  background:
    #111111;

  transform:
    translateY(-3px);
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1000px) {

  .reviews-section {
    height: auto;

    min-height: 100svh;
  }


  .reviews-inner {
    min-height: 100svh;

    padding:
      5rem
      2rem;
  }


  .reviews-grid {
    grid-template-columns:
      repeat(
        2,
        minmax(
          0,
          1fr
        )
      );

    row-gap:
      5rem;
  }


  .review-item:nth-child(3) {
    grid-column:
      1 / -1;

    width:
      min(
        31rem,
        100%
      );

    justify-self:
      center;
  }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 650px) {

  .reviews-inner {
    justify-content:
      flex-start;

    padding:
      4rem
      1rem
      6rem;
  }


  .reviews-heading {
    margin-bottom:
      2.5rem;
  }


  .reviews-heading h2 {
    font-size:
      clamp(
        3rem,
        14vw,
        4.8rem
      );
  }


  .reviews-grid {
    display: flex;

    width: 100%;

    gap:
      1rem;

    overflow-x:
      auto;

    padding:
      0.25rem
      0.2rem
      4rem;

    scroll-snap-type:
      x mandatory;

    scrollbar-width:
      none;
  }


  .reviews-grid::-webkit-scrollbar {
    display: none;
  }


  .review-item,
  .review-item:nth-child(3) {
    flex:
      0
      0
      88%;

    width: auto;

    scroll-snap-align:
      center;
  }


  .review-card {
    min-height:
      21rem;
  }


  .review-text {
    font-size:
      0.92rem;
  }


  .reviews-back-top {
    right:
      1rem;

    bottom:
      1rem;
  }

}
/* =========================================================
   =========================================================
   SECTION 06
   APPOINTMENT
   =========================================================
========================================================= */

.appointment-section {
  position: relative;

  width: 100%;

  min-height: 100svh;

  padding:
    clamp(2rem, 5vw, 5rem);

  overflow: hidden;

  background:
    var(--blue);
}


/* =========================================================
   SHELL
========================================================= */

.appointment-shell {
  position: relative;

  display: grid;

  width: min(
    94rem,
    100%
  );

  min-height:
    calc(
      100svh - 10rem
    );

  margin:
    0 auto;

  grid-template-columns:
    56% 44%;

  overflow: hidden;

  border-radius:
    2rem;

  background:
    var(--cream);

  box-shadow:
    0
    2rem
    6rem
    rgba(
      25,
      55,
      110,
      0.15
    );
}


/* =========================================================
   LEFT SIDE
========================================================= */

.appointment-content {
  position: relative;

  z-index: 5;

  display: flex;

  flex-direction: column;

  justify-content: center;

  padding:
    clamp(2.5rem, 5vw, 6rem);
}


/* =========================================================
   HEADING
========================================================= */

.appointment-heading {
  max-width:
    43rem;

  margin-bottom:
    clamp(2rem, 3vw, 3.2rem);
}


.appointment-eyebrow {
  margin:
    0
    0
    0.8rem;

  color:
    var(--blue);

  font-size:
    0.75rem;

  font-weight:
    700;

  letter-spacing:
    0.16em;
}


.appointment-heading h2 {
  display: flex;

  flex-direction: column;

  margin: 0;

  color:
    #111111;

  font-family:
    "Italiana",
    serif;

  font-size:
    clamp(
      3.6rem,
      5.4vw,
      6.7rem
    );

  font-weight:
    400;

  line-height:
    0.88;

  letter-spacing:
    -0.035em;
}


.appointment-heading h2 span {
  color:
    var(--blue);
}


.appointment-intro {
  max-width:
    37rem;

  margin:
    1.5rem
    0
    0;

  color:
    #454545;

  font-size:
    clamp(
      0.9rem,
      1vw,
      1.05rem
    );

  line-height:
    1.55;
}


/* =========================================================
   FORM
========================================================= */

.appointment-form {
  display: grid;

  width: 100%;

  grid-template-columns:
    repeat(
      2,
      minmax(
        0,
        1fr
      )
    );

  gap:
    1.35rem
    1.1rem;
}


/* =========================================================
   FIELD
========================================================= */

.appointment-field {
  display: flex;

  min-width: 0;

  flex-direction: column;

  gap:
    0.55rem;
}


.appointment-field-full {
  grid-column:
    1 / -1;
}


.appointment-field label {
  color:
    #111111;

  font-size:
    0.82rem;

  font-weight:
    700;
}


.appointment-field label span {
  color:
    var(--blue);
}


/* =========================================================
   INPUT
========================================================= */

.appointment-field input,
.appointment-field select,
.appointment-field textarea {
  width: 100%;

  border:
    1px
    solid
    transparent;

  border-radius:
    1rem;

  outline:
    none;

  color:
    #171717;

  background:
    var(--treatment-pale);

  font-family:
    "Istok Web",
    sans-serif;

  font-size:
    0.95rem;

  transition:
    border-color
      180ms
      ease,

    background
      180ms
      ease,

    box-shadow
      180ms
      ease;
}


.appointment-field input,
.appointment-field select {
  height:
    3.7rem;

  padding:
    0
    1rem;
}


.appointment-field textarea {
  min-height:
    8.5rem;

  padding:
    1rem;

  resize:
    vertical;
}


/* =========================================================
   PLACEHOLDERS
========================================================= */

.appointment-field input::placeholder,
.appointment-field textarea::placeholder {
  color:
    #8c96aa;
}


/* =========================================================
   FOCUS
========================================================= */

.appointment-field input:focus,
.appointment-field select:focus,
.appointment-field textarea:focus {
  border-color:
    var(--blue);

  background:
    #ffffff;

  box-shadow:
    0
    0
    0
    4px
    rgba(
      86,
      137,
      247,
      0.12
    );
}


/* =========================================================
   DATE
========================================================= */

.appointment-field input[type="date"] {
  color:
    #4f5665;
}


/* =========================================================
   SUBMIT
========================================================= */

.appointment-submit-row {
  display: flex;

  grid-column:
    1 / -1;

  align-items: center;

  gap:
    1.4rem;

  margin-top:
    0.5rem;
}


.appointment-submit {
  display: inline-flex;

  min-height:
    3.8rem;

  align-items: center;
  justify-content: center;

  gap:
    1.25rem;

  padding:
    0.6rem
    1.8rem;

  border:
    0;

  border-radius:
    999px;

  color:
    #ffffff;

  background:
    var(--blue);

  font-family:
    "Istok Web",
    sans-serif;

  font-size:
    0.9rem;

  font-weight:
    700;

  cursor:
    pointer;

  transition:
    background
      220ms
      ease,

    transform
      220ms
      ease,

    box-shadow
      220ms
      ease;
}


.appointment-submit:hover {
  background:
    #111111;

  transform:
    translateY(-3px);

  box-shadow:
    0
    1rem
    2.5rem
    rgba(
      86,
      137,
      247,
      0.24
    );
}


.appointment-submit-arrow {
  display: inline-flex;

  width:
    1.9rem;

  height:
    1.9rem;

  align-items: center;
  justify-content: center;

  border-radius:
    50%;

  color:
    var(--blue);

  background:
    #ffffff;

  font-size:
    1.1rem;

  transition:
    transform
      180ms
      ease;
}


.appointment-submit:hover
.appointment-submit-arrow {
  transform:
    translateX(4px);
}


/* =========================================================
   FORM NOTE
========================================================= */

.appointment-form-note {
  max-width:
    16rem;

  margin: 0;

  color:
    #7b7b7b;

  font-size:
    0.75rem;

  line-height:
    1.4;
}


/* =========================================================
   SUCCESS
========================================================= */

.appointment-success {
  display: none;

  margin-top:
    1.5rem;

  align-items: center;

  gap:
    1rem;

  padding:
    1rem
    1.2rem;

  border-radius:
    1rem;

  color:
    #183353;

  background:
    #eaf0fb;
}


.appointment-success.is-visible {
  display: flex;
}


.appointment-success-icon {
  display: flex;

  width:
    2.6rem;

  height:
    2.6rem;

  flex:
    0 0 auto;

  align-items: center;
  justify-content: center;

  border-radius:
    50%;

  color:
    #ffffff;

  background:
    var(--blue);
}


.appointment-success strong {
  display: block;
}


.appointment-success p {
  margin:
    0.15rem
    0
    0;

  font-size:
    0.82rem;
}


/* =========================================================
   RIGHT SIDE
========================================================= */

.appointment-visual {
  position: relative;

  min-width: 0;

  overflow: hidden;

  background:
    #dfe9fa;
}


/* =========================================================
   IMAGE
========================================================= */

.appointment-image {
  position: absolute;

  inset: 0;

  width: 100%;
  height: 100%;

  object-fit: cover;

  object-position:
    center;

  transition:
    transform
    900ms
    cubic-bezier(
      0.22,
      1,
      0.36,
      1
    );
}


.appointment-section:hover
.appointment-image {
  transform:
    scale(1.025);
}


/* =========================================================
   IMAGE OVERLAY
========================================================= */

.appointment-image-overlay {
  position: absolute;

  z-index: 2;

  inset: 0;

  background:
    linear-gradient(
      180deg,

      rgba(
        17,
        17,
        17,
        0
      )
      45%,

      rgba(
        18,
        37,
        76,
        0.55
      )
      100%
    );
}


/* =========================================================
   VISUAL TEXT
========================================================= */

.appointment-visual-copy {
  position: absolute;

  z-index: 5;

  right:
    clamp(1.5rem, 3vw, 3rem);

  bottom:
    clamp(2rem, 4vw, 4rem);

  left:
    clamp(1.5rem, 3vw, 3rem);

  color:
    #ffffff;
}


.appointment-visual-copy p {
  margin:
    0
    0
    0.5rem;

  font-size:
    0.75rem;

  font-weight:
    700;

  letter-spacing:
    0.12em;

  text-transform:
    uppercase;
}


.appointment-visual-copy h3 {
  max-width:
    26rem;

  margin: 0;

  font-family:
    "Italiana",
    serif;

  font-size:
    clamp(
      2.6rem,
      3.7vw,
      4.8rem
    );

  font-weight:
    400;

  line-height:
    0.96;
}


/* =========================================================
   DECORATIVE ART
========================================================= */

.appointment-corner-art {
  position: absolute;

  z-index: 4;

  right:
    -3rem;

  top:
    -1rem;

  width:
    45%;

  max-width:
    22rem;

  opacity:
    0.72;

  pointer-events:
    none;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1050px) {

  .appointment-section {
    padding:
      2rem;
  }


  .appointment-shell {
    min-height:
      auto;

    grid-template-columns:
      1fr;
  }


  .appointment-content {
    padding:
      4rem
      3rem;
  }


  .appointment-visual {
    min-height:
      35rem;
  }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 650px) {

  .appointment-section {
    min-height:
      auto;

    padding:
      1rem;

    background:
      var(--blue);
  }


  .appointment-shell {
    border-radius:
      1.3rem;
  }


  .appointment-content {
    padding:
      3rem
      1.2rem;
  }


  .appointment-heading h2 {
    font-size:
      clamp(
        3.3rem,
        16vw,
        5rem
      );
  }


  .appointment-form {
    grid-template-columns:
      1fr;
  }


  .appointment-field-full {
    grid-column:
      auto;
  }


  .appointment-submit-row {
    grid-column:
      auto;

    flex-direction:
      column;

    align-items:
      stretch;
  }


  .appointment-submit {
    width:
      100%;
  }


  .appointment-form-note {
    max-width:
      none;

    text-align:
      center;
  }


  .appointment-visual {
    min-height:
      30rem;
  }


  .appointment-corner-art {
    width:
      55%;
  }

}