.reveal
{
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.reveal.revealed
{
  opacity: 1;
  transform: none;
}
@keyframes heroReveal
{
  from
  {
    opacity: 0;
    transform: translateY(24px);
  }
  to
  {
    opacity: 1;
    transform: translateY(0);
  }
}
.hero-copy > *
{
  opacity: 0;
  animation: heroReveal 0.8s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.hero-copy .eyebrow
{
  animation-delay: 0.1s;
}
.hero-copy h1
{
  animation-delay: 0.2s;
}
.hero-copy .hero-intro
{
  animation-delay: 0.3s;
}
.hero-copy .hero-actions
{
  animation-delay: 0.4s;
}
.hero-copy .hero-note
{
  animation-delay: 0.5s;
}
.hero-image-wrap
{
  animation: imageReveal 1.2s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes imageReveal
{
  from
  {
    opacity: 0;
    clip-path: inset(0 0 100% 0);
    transform: scale(1.06);
  }
  to
  {
    opacity: 1;
    clip-path: inset(0);
    transform: scale(1);
  }
}
@media (prefers-reduced-motion: reduce)
{
  *,
  *::before,
  *::after
  {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}
@media (max-width: 800px)
{
  .desktop-nav.mobile-open
  {
    display: flex;
    position: absolute;
    top: 72px;
    left: 0;
    right: 0;
    margin: 0;
    padding: 22px 8vw;
    background: var(--cream);
    border-bottom: 1px solid var(--line);
    flex-direction: column;
    gap: 20px;
    z-index: 4;
  }
}
:root
{
  --ink:#171515;
  --paper:#f6f2ed;
  --blush:#e6b3ae;
  --rose:#c96e6a;
  --cream:#fffaf6;
  --line:rgba(23,21,21,.18);
  --serif:'Playfair Display',Georgia,serif;
  --sans:'Manrope',Arial,sans-serif;
  --mono:'DM Mono',monospace
}
*
{
  box-sizing:border-box
}
html
{
  scroll-behavior:smooth
}
body
{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:14px;
  line-height:1.5
}
button,a
{
  font:inherit;
  color:inherit
}
button
{
  cursor:pointer
}
a
{
  text-decoration:none
}
.announcement
{
  height:30px;
  background:var(--ink);
  color:#fffaf6;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:24px;
  font:10px var(--mono);
  letter-spacing:.16em
}
.site-header
{
  height:86px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 5vw;
  border-bottom:1px solid var(--line);
  background:var(--paper);
  position:relative;
  z-index:5
}
.brand
{
  display:flex;
  align-items:center;
  gap:11px
}
.brand-mark
{
  width:34px;
  height:34px;
  background:var(--rose);
  color:white;
  border-radius:50%;
  display:grid;
  place-items:center;
  font:italic 14px var(--serif)
}
.brand-name
{
  font:700 11px var(--mono);
  letter-spacing:.05em
}
.brand-name b
{
  display:block;
  font-weight:400;
  font-size:9px;
  letter-spacing:.22em;
  color:var(--rose);
  margin-top:1px
}
.desktop-nav
{
  display:flex;
  gap:33px;
  margin-left:auto;
  margin-right:46px
}
.desktop-nav a
{
  font-size:11px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.06em;
  transition:color .2s
}
.desktop-nav a:hover,.footer-links a:hover
{
  color:var(--rose)
}
.button
{
  border:1px solid transparent;
  padding:14px 21px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:20px;
  text-transform:uppercase;
  letter-spacing:.09em;
  font-size:10px;
  font-weight:800;
  transition:transform .25s,background .25s,color .25s
}
.button:hover
{
  transform:translateY(-3px)
}
.button span
{
  font-size:16px;
  font-weight:400;
  line-height:0
}
.button-dark
{
  background:var(--ink);
  color:#fffaf6
}
.button-dark:hover
{
  background:var(--rose)
}
.button-light
{
  background:#fffaf6;
  color:var(--ink)
}
.button-light:hover
{
  background:var(--blush)
}
.button-outline
{
  border-color:var(--ink);
  background:transparent
}
.button-outline:hover
{
  background:var(--ink);
  color:#fffaf6
}
.menu-toggle
{
  display:none;
  background:none;
  border:0;
  padding:10px
}
.menu-toggle span
{
  display:block;
  background:var(--ink);
  height:1px;
  width:25px;
  margin:6px
}
.hero
{
  min-height:calc(100vh - 116px);
  display:grid;
  grid-template-columns:47% 53%;
  position:relative;
  overflow:hidden
}
.hero-copy
{
  padding:clamp(70px,10vw,140px) 5vw 90px;
  display:flex;
  flex-direction:column;
  justify-content:center
}
.eyebrow,.section-label
{
  font:10px var(--mono);
  text-transform:uppercase;
  letter-spacing:.18em;
  color:var(--rose);
  display:flex;
  align-items:center;
  gap:12px
}
.eyebrow-line
{
  display:inline-block;
  width:38px;
  height:1px;
  background:var(--rose)
}
h1,h2
{
  font:500 clamp(54px,6.2vw,94px)/.93 var(--serif);
  letter-spacing:-.05em;
  margin:27px 0 28px
}
h1 em,h2 em
{
  font-style:italic;
  color:var(--rose)
}
.hero-intro
{
  font-size:15px;
  line-height:1.7;
  max-width:325px;
  margin:0 0 34px;
  color:#57504d
}
.hero-actions
{
  display:flex;
  gap:28px;
  align-items:center
}
.text-link,.arrow-link
{
  font:10px var(--mono);
  text-transform:uppercase;
  letter-spacing:.1em;
  border-bottom:1px solid var(--ink);
  padding-bottom:5px
}
.text-link span
{
  font-size:17px;
  margin-left:8px
}
.hero-note
{
  display:flex;
  align-items:center;
  gap:14px;
  margin-top:70px;
  font:10px var(--mono);
  line-height:1.6;
  text-transform:uppercase;
  letter-spacing:.07em
}
.hero-note b
{
  font-weight:400;
  color:var(--rose)
}
.sparkle
{
  font-size:24px;
  color:var(--rose)
}
.hero-visual
{
  background:var(--blush);
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:680px
}
.hero-image-wrap
{
  width:69%;
  height:78%;
  overflow:hidden;
  position:relative;
  margin-left:-13%
}
.hero-image-wrap img
{
  width:100%;
  height:100%;
  object-fit:cover;
  filter:saturate(.8)
}
.hero-sticker
{
  position:absolute;
  right:10%;
  top:15%;
  width:116px;
  height:116px;
  background:var(--ink);
  color:#fffaf6;
  border-radius:50%;
  display:grid;
  place-items:center;
  text-align:center;
  transform:rotate(12deg);
  font:21px/1.05 var(--serif)
}
.hero-sticker i
{
  font-size:25px;
  color:var(--blush)
}
.hero-sticker strong
{
  position:absolute;
  bottom:11px;
  right:14px;
  color:var(--rose);
  font-size:15px
}
.hero-vertical
{
  position:absolute;
  right:5%;
  bottom:15%;
  writing-mode:vertical-rl;
  font:9px var(--mono);
  letter-spacing:.15em
}
.hero-scroll
{
  position:absolute;
  bottom:8%;
  left:8%;
  font:10px var(--mono);
  text-transform:uppercase;
  letter-spacing:.1em
}
.hero-scroll span
{
  font-size:18px;
  margin-left:10px
}
.hero-bottom
{
  position:absolute;
  bottom:26px;
  left:5%;
  right:5%;
  display:flex;
  align-items:center;
  gap:17px;
  font:9px var(--mono);
  letter-spacing:.12em
}
.hero-bottom span:last-child
{
  margin-left:auto
}
.hero-progress
{
  height:1px;
  background:var(--line);
  flex:0 1 170px
}
.hero-progress i
{
  display:block;
  width:30%;
  height:1px;
  background:var(--rose)
}
.marquee
{
  background:var(--rose);
  color:#fffaf6;
  overflow:hidden;
  white-space:nowrap;
  padding:13px 0
}
.marquee div
{
  display:flex;
  justify-content:space-around;
  align-items:center;
  min-width:1100px;
  font:11px var(--mono);
  letter-spacing:.2em
}
.marquee b
{
  font:18px var(--serif);
  color:var(--ink)
}
.section-pad
{
  padding:120px 9vw
}
.section-label
{
  margin-bottom:55px
}
.experience
{
  background:var(--cream)
}
.experience-grid
{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12%;
  border-bottom:1px solid var(--line);
  padding-bottom:75px
}
.experience-title h2,.services h2,.gallery h2,.about h2
{
  font-size:clamp(48px,5.5vw,78px);
  margin:0
}
.outline-number
{
  color:transparent;
  -webkit-text-stroke:1px var(--rose);
  font:italic 75px var(--serif);
  margin-top:50px
}
.experience-text
{
  padding-top:8px;
  max-width:375px
}
.experience-text p
{
  font-size:16px;
  line-height:1.8;
  color:#635c58;
  margin:0 0 25px
}
.experience-text strong
{
  color:var(--ink)
}
.arrow-link
{
  display:inline-flex;
  align-items:center;
  gap:24px;
  margin-top:18px
}
.arrow-link span
{
  font-size:18px
}
.experience-details
{
  display:grid;
  grid-template-columns:repeat(3,1fr) 1.3fr;
  margin-top:38px;
  gap:30px;
  align-items:center
}
.experience-details>div:not(.details-image)
{
  display:flex;
  gap:16px;
  align-items:flex-start
}
.experience-details b
{
  font:12px var(--mono);
  color:var(--rose)
}
.experience-details span
{
  font:12px var(--mono);
  line-height:1.5
}
.experience-details strong
{
  font-weight:400
}
.details-image
{
  height:130px;
  overflow:hidden
}
.details-image img
{
  width:100%;
  height:100%;
  object-fit:cover
}
.services
{
  background:var(--paper)
}
.services-header,.gallery-heading
{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  margin-bottom:75px
}
.services-header p,.gallery-heading p
{
  font:12px var(--mono);
  line-height:1.6;
  text-transform:uppercase;
  letter-spacing:.05em;
  margin:0 8% 8px 0
}
.service-list
{
  border-top:1px solid var(--line)
}
.service-item
{
  border:0;
  border-bottom:1px solid var(--line);
  width:100%;
  background:transparent;
  padding:28px 2px;
  display:grid;
  grid-template-columns:7% 28% 1fr 17% 3%;
  text-align:left;
  align-items:center;
  transition:padding .25s,background .25s
}
.service-item:hover,.service-item.active
{
  padding-left:18px;
  background:var(--blush)
}
.service-index
{
  font:11px var(--mono);
  color:var(--rose)
}
.service-name
{
  font:italic 31px var(--serif)
}
.service-desc,.service-price
{
  font:11px var(--mono);
  color:#766e69
}
.service-price
{
  text-align:right;
  font-size:10px
}
.service-arrow
{
  font-size:20px;
  text-align:right
}
.services-cta
{
  margin-top:46px
}
.gallery
{
  background:var(--ink);
  color:#fffaf6
}
.gallery .section-label
{
  color:var(--blush)
}
.gallery-heading p
{
  color:#d5c7c0
}
.gallery h2 em
{
  color:var(--blush)
}
.gallery-grid
{
  display:grid;
  grid-template-columns:1.1fr .72fr;
  grid-template-rows:280px 220px;
  gap:18px
}
.gallery-card
{
  margin:0;
  position:relative;
  overflow:hidden;
  background:#333
}
.gallery-card img
{
  width:100%;
  height:100%;
  object-fit:cover;
  filter:saturate(.72);
  transition:transform .6s,filter .6s
}
.gallery-card:hover img
{
  transform:scale(1.06);
  filter:saturate(1)
}
.gallery-tall
{
  grid-row:span 2
}
.gallery-wide
{
  grid-column:2
}
.gallery-card figcaption
{
  position:absolute;
  bottom:0;
  left:0;
  right:0;
  padding:17px 20px;
  background:linear-gradient(transparent,rgba(0,0,0,.62));
  display:flex;
  justify-content:space-between;
  font:10px var(--mono);
  letter-spacing:.08em;
  text-transform:uppercase
}
.gallery-card figcaption b
{
  font-size:18px;
  font-weight:400
}
.about
{
  background:var(--paper);
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:11%;
  align-items:center
}
.about-image
{
  height:590px;
  position:relative;
  background:var(--blush);
  padding:20px 0 0 20px
}
.about-image img
{
  width:100%;
  height:100%;
  object-fit:cover;
  filter:saturate(.75)
}
.image-caption
{
  position:absolute;
  bottom:-22px;
  right:-12px;
  background:var(--rose);
  color:#fffaf6;
  border-radius:50%;
  width:112px;
  height:112px;
  display:grid;
  place-items:center;
  text-align:center;
  font:13px/1.1 var(--serif);
  transform:rotate(-10deg)
}
.image-caption em
{
  font-size:18px
}
.about-copy p
{
  font-size:16px;
  line-height:1.8;
  color:#635c58;
  max-width:390px
}
.signature
{
  font:italic 29px var(--serif);
  margin:38px 0 12px
}
.signature span
{
  color:var(--rose);
  font-size:20px
}
.booking-banner
{
  background:var(--blush);
  text-align:center;
  padding:120px 20px 130px;
  position:relative;
  overflow:hidden
}
.booking-banner p
{
  font:10px var(--mono);
  letter-spacing:.2em;
  text-transform:uppercase
}
.booking-banner h2
{
  font-size:clamp(55px,7vw,100px);
  margin:20px 0 35px
}
.booking-orbit
{
  position:absolute;
  font-size:260px;
  color:rgba(255,250,246,.28);
  line-height:1;
  left:8%;
  top:15%;
  transform:rotate(20deg)
}
.site-footer
{
  background:var(--ink);
  color:#fffaf6;
  padding:55px 5vw 26px
}
.site-footer .brand-name
{
  color:#fffaf6
}
.footer-top
{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding-bottom:65px;
  border-bottom:1px solid rgba(255,255,255,.22)
}
.footer-links
{
  display:flex;
  gap:35px;
  font:10px var(--mono);
  text-transform:uppercase;
  letter-spacing:.08em
}
.footer-bottom
{
  display:flex;
  justify-content:space-between;
  padding-top:20px;
  color:#9d8e87;
  font:9px var(--mono);
  letter-spacing:.08em
}
.booking-modal
{
  position:fixed;
  inset:0;
  z-index:20;
  display:none
}
.booking-modal.open
{
  display:block
}
.modal-backdrop
{
  position:absolute;
  inset:0;
  background:rgba(23,21,21,.7);
  backdrop-filter:blur(4px)
}
.modal-panel
{
  position:absolute;
  right:0;
  top:0;
  bottom:0;
  width:min(570px,100%);
  background:var(--cream);
  padding:75px clamp(30px,6vw,75px);
  overflow:auto;
  animation:slideIn .35s ease
}
.modal-close
{
  position:absolute;
  right:30px;
  top:25px;
  border:0;
  background:none;
  font-size:30px;
  font-weight:300
}
.modal-panel h2
{
  font-size:65px;
  margin:25px 0 15px
}
.modal-panel>p
{
  color:#706864;
  max-width:310px;
  margin-bottom:40px
}
.modal-panel form
{
  display:grid;
  gap:19px
}
.modal-panel label
{
  display:grid;
  gap:8px;
  font:10px var(--mono);
  letter-spacing:.1em;
  text-transform:uppercase
}
.modal-panel input,.modal-panel select
{
  border:0;
  border-bottom:1px solid var(--line);
  background:transparent;
  padding:11px 0;
  font:14px var(--sans);
  outline:0;
  border-radius:0
}
.modal-panel input:focus,.modal-panel select:focus
{
  border-color:var(--rose)
}
.modal-panel form .button
{
  margin-top:15px
}
.form-success
{
  display:none;
  text-align:center;
  color:var(--rose);
  font:20px var(--serif);
  padding-top:35px
}
.form-success span
{
  display:block;
  font-size:36px;
  margin-bottom:10px
}
.form-success small
{
  display:block;
  color:#756c68;
  font:11px var(--mono);
  margin-top:10px
}
.form-success.visible
{
  display:block
}
body.modal-open
{
  overflow:hidden
}
@keyframes slideIn
{
  from
  {
    transform:translateX(100%)
  }
  to
  {
    transform:translateX(0)
  }
}
@media(max-width:800px)
{
  .announcement
  {
    font-size:8px;
    gap:9px
  }
  .site-header
  {
    height:72px;
    padding:0 6vw
  }
  .desktop-nav,.header-cta
  {
    display:none
  }
  .menu-toggle
  {
    display:block
  }
  .hero
  {
    display:block;
    min-height:auto
  }
  .hero-copy
  {
    padding:75px 8vw 65px
  }
  .hero-copy h1
  {
    font-size:62px
  }
  .hero-note
  {
    margin-top:50px
  }
  .hero-visual
  {
    min-height:570px
  }
  .hero-image-wrap
  {
    width:76%;
    height:84%;
    margin-left:-7%
  }
  .hero-sticker
  {
    right:7%;
    top:10%;
    width:100px;
    height:100px
  }
  .hero-vertical
  {
    right:3%;
    bottom:18%;
    font-size:8px
  }
  .hero-scroll
  {
    bottom:5%;
    left:8%;
    font-size:8px
  }
  .hero-bottom
  {
    bottom:17px
  }
  .hero-bottom span:last-child
  {
    display:none
  }
  .section-pad
  {
    padding:80px 8vw
  }
  .section-label
  {
    margin-bottom:35px
  }
  .experience-grid,.about
  {
    grid-template-columns:1fr;
    gap:42px
  }
  .experience-grid
  {
    padding-bottom:55px
  }
  .outline-number
  {
    margin-top:25px
  }
  .experience-details
  {
    grid-template-columns:1fr 1fr;
    gap:25px
  }
  .details-image
  {
    grid-column:span 2
  }
  .services-header,.gallery-heading
  {
    display:block;
    margin-bottom:42px
  }
  .services-header p,.gallery-heading p
  {
    margin:20px 0 0
  }
  .service-item
  {
    grid-template-columns:10% 1fr 8%;
    grid-template-rows:auto auto;
    gap:5px 10px;
    padding:21px 0
  }
  .service-item:hover,.service-item.active
  {
    padding-left:9px
  }
  .service-name
  {
    font-size:26px
  }
  .service-desc
  {
    grid-column:2;
    grid-row:2
  }
  .service-price
  {
    display:none
  }
  .service-arrow
  {
    grid-column:3;
    grid-row:1 / span 2
  }
  .gallery-grid
  {
    display:grid;
    grid-template-columns:1fr 1fr;
    grid-template-rows:260px 220px
  }
  .gallery-tall
  {
    grid-row:auto;
    grid-column:span 2
  }
  .gallery-small,.gallery-wide
  {
    grid-column:auto
  }
  .gallery-card figcaption
  {
    padding:12px;
    font-size:8px
  }
  .about-image
  {
    height:450px;
    padding:12px 0 0 12px
  }
  .about-copy
  {
    padding-top:30px
  }
  .booking-banner
  {
    padding:85px 20px 100px
  }
  .booking-orbit
  {
    font-size:170px;
    left:0;
    top:10%
  }
  .footer-top
  {
    display:block;
    padding-bottom:40px
  }
  .footer-links
  {
    flex-wrap:wrap;
    gap:18px;
    margin-top:35px
  }
  .footer-bottom
  {
    display:block;
    line-height:2
  }
  .footer-bottom span
  {
    display:block
  }
  .modal-panel
  {
    padding-top:65px
  }
  .modal-panel h2
  {
    font-size:57px
  }
}