.studio-page{
  --font-display:Arial,Helvetica,sans-serif;
}

.studio-page .site-header nav a[aria-current="page"]{
  color:var(--clay);
}

.visit-hero{
  width:min(1260px,100% - 8vw);
  min-height:690px;
  margin:0 auto;
  padding:clamp(2.2rem,4.5vw,4.5rem) 0 clamp(4rem,7vw,6.5rem);
  display:grid;
  grid-template-columns:.86fr 1.14fr;
  align-items:center;
  gap:clamp(2.8rem,6vw,6.5rem);
}

.visit-hero-copy{
  max-width:540px;
}

.visit-hero-copy h1{
  font-size:clamp(3.65rem,5.2vw,5.6rem);
}

.visit-hero-copy .intro{
  max-width:29rem;
}

.visit-welcome{
  color:#655d56;
  margin:1.25rem 0 0;
  font-size:.7rem;
  font-weight:700;
}

.visit-welcome span{
  color:var(--clay);
  margin:0 .45rem;
}

.visit-hero-visual{
  min-height:575px;
  margin:0;
  padding:0 .9rem 1.2rem 0;
  position:relative;
}

.visit-hero-visual:before{
  content:"";
  background:var(--blush);
  border-radius:48% 52% 42% 58%;
  width:52%;
  height:48%;
  position:absolute;
  top:-3%;
  right:-2%;
  transform:rotate(6deg);
}

.visit-hero-visual img{
  z-index:1;
  object-fit:cover;
  object-position:48% center;
  border-radius:3.5rem 3.5rem 1.2rem;
  width:100%;
  height:560px;
  position:relative;
  box-shadow:0 26px 65px #231f1d24;
}

.visit-hero-visual figcaption{
  z-index:2;
  background:var(--butter);
  border-radius:999px;
  padding:.88rem 1.1rem;
  font:italic .78rem var(--font-display),Georgia,serif;
  position:absolute;
  bottom:2.9rem;
  left:-2rem;
  transform:rotate(-2deg);
  box-shadow:0 10px 26px #3c2a1c17;
}

.visit-trust{
  background:var(--butter);
  text-align:center;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1.5rem;
  padding:1.25rem max(5vw,50% - 590px);
}

.visit-trust p{
  margin:0;
  font:650 clamp(.86rem,1.2vw,1rem) var(--font-display),Georgia,serif;
}

.visit-trust span{
  color:var(--clay);
  margin-right:.5rem;
  font-size:.66rem;
}

.visit-section-heading{
  margin-bottom:2.6rem;
}

.visit-info-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:1rem;
}

.visit-info-card{
  background:var(--blush);
  border-radius:2rem 2rem .8rem;
  min-height:330px;
  padding:clamp(1.5rem,2.5vw,2.1rem);
  display:flex;
  flex-direction:column;
}

.visit-info-card--butter{
  background:#f2dfaa;
}

.visit-info-card--sage{
  background:#c8d3c2;
}

.visit-info-number{
  color:#241f1da3;
  margin:0 0 auto;
  font-size:.67rem;
  font-weight:750;
}

.visit-info-card h3{
  margin:2.3rem 0 1.2rem;
  font-size:clamp(1.85rem,2.6vw,2.7rem);
  line-height:1;
}

.visit-info-card p,
.visit-info-card address,
.hours-list{
  color:#564e48;
  margin:0;
  font-size:.79rem;
  line-height:1.65;
}

.visit-info-card address{
  font-style:normal;
  font-weight:650;
}

.visit-info-card address + p,
.visit-info-card--sage p + p{
  margin-top:.75rem;
}

.hours-list div{
  border-top:1px solid #241f1d2b;
  display:flex;
  justify-content:space-between;
  gap:1rem;
  padding:.8rem 0;
}

.hours-list div:last-child{
  border-bottom:1px solid #241f1d2b;
}

.hours-list dt{
  font-weight:700;
}

.hours-list dd{
  margin:0;
  text-align:right;
}

.detail-link{
  border-bottom:1px solid #241f1d66;
  align-self:flex-start;
  margin-top:auto;
  padding-top:1.1rem;
  padding-bottom:.22rem;
  font-size:.71rem;
  font-weight:750;
}

.map-section{
  background:var(--plum);
  color:var(--ivory);
  display:grid;
  grid-template-columns:minmax(300px,.72fr) minmax(0,1.28fr);
  align-items:stretch;
  gap:clamp(2rem,5vw,5rem);
  padding:clamp(4.5rem,7vw,7.5rem) max(5vw,50% - 600px);
}

.map-copy{
  align-self:center;
}

.map-copy h2{
  font-size:clamp(2.8rem,4vw,4.25rem);
}

.map-copy h2 em{
  color:var(--blush);
}

.map-copy address{
  border-top:1px solid #ffffff2e;
  color:#ded0d2;
  margin:1.8rem 0;
  padding-top:1.4rem;
  font-size:.87rem;
  font-style:normal;
  line-height:1.75;
}

.map-actions{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:.2rem;
}

.map-actions .button{
  margin-bottom:.9rem;
}

.map-actions > a:not(.button){
  color:#ded0d2;
  min-height:36px;
  display:inline-flex;
  align-items:center;
  border-bottom:1px solid transparent;
  font-size:.72rem;
}

.map-actions > a:not(.button):hover{
  border-bottom-color:#ded0d2;
}

.studio-social{
  border-top:1px solid #ffffff2e;
  max-width:19rem;
  margin-top:1.1rem;
  padding-top:1rem;
}

.studio-social p{
  color:#cdbfc1;
  margin:0 0 .35rem;
  font-size:.7rem;
  line-height:1.55;
}

.studio-social a{
  color:var(--ivory);
  align-items:center;
  gap:.35rem;
  min-height:36px;
  font-size:.72rem;
  font-weight:700;
  display:inline-flex;
}

.studio-social a:hover{
  color:var(--blush);
}

.map-frame{
  background:#ddd3c8;
  border-radius:2.6rem 2.6rem .9rem;
  min-height:530px;
  overflow:hidden;
  box-shadow:0 24px 54px #1b101329;
}

.map-frame iframe{
  border:0;
  width:100%;
  height:100%;
  min-height:530px;
}

.studio-experience{
  background:#e9e2d6;
  display:grid;
  grid-template-columns:1.06fr .94fr;
  align-items:center;
  gap:clamp(3rem,7vw,7rem);
}

.experience-image{
  border-radius:2.8rem 2.8rem 1rem;
  height:575px;
  min-height:575px;
  margin:0;
  position:relative;
  overflow:hidden;
  box-shadow:0 20px 54px #3026201f;
}

.experience-image img{
  object-fit:cover;
  object-position:48% center;
  width:100%;
  height:100%;
}

.experience-image figcaption{
  background:var(--ivory);
  border-radius:999px;
  padding:.72rem 1rem;
  font:italic .75rem var(--font-display),Georgia,serif;
  position:absolute;
  bottom:1.2rem;
  left:1.2rem;
}

.experience-copy{
  max-width:520px;
}

.experience-copy h2{
  font-size:clamp(2.9rem,4.3vw,4.65rem);
}

.experience-copy > p:not(.kicker){
  color:#625a52;
  margin:1.7rem 0;
  font-size:.91rem;
  line-height:1.75;
}

.experience-list{
  margin:0;
  padding:0;
  list-style:none;
}

.experience-list li{
  border-top:1px solid #241f1d24;
  padding:.86rem 0 .86rem 1.45rem;
  font-size:.78rem;
  position:relative;
}

.experience-list li:last-child{
  border-bottom:1px solid #241f1d24;
}

.experience-list li:before{
  content:"♥";
  color:var(--clay);
  font-size:.54rem;
  position:absolute;
  top:1rem;
  left:0;
}

.appointment-section{
  background:var(--clay);
  color:var(--cream);
  display:grid;
  grid-template-columns:1fr .9fr auto;
  align-items:center;
  gap:clamp(2rem,5vw,5rem);
}

.appointment-section .kicker{
  color:#f5ded5;
}

.appointment-section h2{
  font-size:clamp(2.55rem,3.6vw,3.8rem);
}

.appointment-section h2 em{
  color:var(--butter);
}

.appointment-section > p{
  color:#fff0e9;
  margin:0;
  font-size:.86rem;
  line-height:1.72;
}

.appointment-section .button{
  white-space:nowrap;
}

@media (width<=900px){
  .visit-hero{
    grid-template-columns:1fr;
    min-height:auto;
    padding-top:3.2rem;
  }

  .visit-hero-copy{
    max-width:680px;
  }

  .visit-hero-visual{
    min-height:590px;
    margin-left:2rem;
  }

  .visit-info-grid{
    grid-template-columns:1fr 1fr;
  }

  .visit-info-card--sage{
    grid-column:1/-1;
    min-height:260px;
  }

  .map-section,
  .studio-experience,
  .appointment-section{
    grid-template-columns:1fr;
  }

  .map-copy{
    max-width:650px;
  }

  .experience-copy{
    max-width:680px;
  }

  .appointment-section .button{
    justify-self:start;
  }
}

@media (width<=580px){
  .visit-hero{
    width:calc(100% - 10vw);
    padding:2.8rem 0 4.4rem;
  }

  .visit-hero-copy h1{
    font-size:clamp(3.05rem,15vw,3.75rem);
  }

  .visit-welcome span{
    display:none;
  }

  .visit-welcome{
    display:flex;
    flex-direction:column;
    gap:.25rem;
  }

  .visit-hero-visual{
    min-height:480px;
    margin:1.5rem 0 0 1rem;
    padding:0 .45rem .8rem 0;
  }

  .visit-hero-visual img{
    border-radius:2.4rem 2.4rem .9rem;
    min-height:460px;
  }

  .visit-hero-visual figcaption{
    max-width:78%;
    border-radius:1rem;
    bottom:2rem;
    left:-1rem;
  }

  .visit-trust{
    text-align:left;
    grid-template-columns:1fr;
    gap:.65rem;
    padding-block:1.1rem;
  }

  .visit-info-grid{
    grid-template-columns:1fr;
  }

  .visit-info-card,
  .visit-info-card--sage{
    grid-column:auto;
    min-height:285px;
  }

  .map-section{
    padding-inline:5vw;
  }

  .map-frame,
  .map-frame iframe{
    min-height:420px;
  }

  .map-frame{
    border-radius:2rem 2rem .75rem;
  }

  .studio-experience{
    padding-inline:5vw;
  }

  .experience-image{
    border-radius:2rem 2rem .75rem;
    height:420px;
    min-height:420px;
  }

  .appointment-section{
    padding-inline:5vw;
  }
}

@media (prefers-reduced-motion:reduce){
  .visit-hero-visual figcaption{
    transform:none;
  }
}