/**
 * @license
 * MyFonts Webfont Build ID 3867246, 2020-12-16T11:57:38-0500
 * 
 * The fonts listed in this notice are subject to the End User License
 * Agreement(s) entered into by the website owner. All other parties are 
 * explicitly restricted from using the Licensed Webfonts(s).
 * 
 * You may obtain a valid license at the URLs below.
 * 
 * Webfont: Scotch Text Compressed Light by Positype
 * URL: https://www.myfonts.com/collections/positype-foundry

 * Webfont: Scotch Text Compressed Light Italic by Positype
 * URL: https://www.myfonts.com/collections/positype-foundry
 
 * © 2026 MyFonts Inc. */
@font-face {
  font-family: "Scotch Text Compressed";
  src: url("./webFonts/ScotchTextCompressedLight/font.woff2") format("woff2"),
       url("./webFonts/ScotchTextCompressedLight/font.woff") format("woff");
  font-style: normal;
  font-weight: 300;
  font-display: swap;
}
@font-face {
  font-family: "Scotch Text Compressed";
  src: url("./webFonts/ScotchTextCompressedLightItalic/font.woff2") format("woff2"),
       url("./webFonts/ScotchTextCompressedLightItalic/font.woff") format("woff");
  font-style: italic;
  font-weight: 300;
  font-display: swap;
}
:root{--burgundy:#4e1d12;--blue:#a6bbb9;--cream:#fbfaee;--text:#4e1d12;--font-display:"Scotch Text Compressed",Georgia,'Times New Roman',serif;--font-body:"Scotch Text Compressed",Georgia,'Times New Roman',serif}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:0}
body{margin:0;background:var(--burgundy);color:var(--text);font-family:var(--font-body);font-size:1.125rem;line-height:1.52;font-weight:300;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-underline-offset:.19em}
a:hover{text-decoration-thickness:2px}a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid currentColor;outline-offset:4px}
.skip-link{position:fixed;z-index:100;top:.75rem;left:.75rem;transform:translateY(-150%);background:#fff;color:#000;padding:.75rem 1.25rem;box-shadow:0 5px 20px #0003}.skip-link:focus{transform:translateY(0)}
.site-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:start}
.brand-panel{background:var(--burgundy);height:100svh;position:sticky;top:0;display:flex;justify-content:center;align-items:flex-start;padding:clamp(4.5rem,10vh,8rem) 8% 2rem}
.brand-panel__logo-link{display:block;width:min(100%,540px)}.brand-panel__logo{width:100%;height:auto}
.main{min-width:0}.panel{position:relative;min-height:760px;min-height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:5.5rem clamp(2rem,5vw,5.75rem);text-align:center}.panel--blue{background:var(--blue)}.panel--cream{background:var(--cream)}
.mobile-brand{display:none}.hero{justify-content:space-between;gap:2rem;padding-top:2.25rem;padding-bottom:2.5rem}.main-nav{display:flex;gap:clamp(.7rem,1.35vw,1.65rem);align-items:center;justify-content:center;flex-wrap:wrap;width:100%;font-size:clamp(.85rem,1.04vw,1rem)}.main-nav a{text-decoration:none;white-space:nowrap}.main-nav a:hover,.main-nav a:focus-visible{text-decoration:underline}.hero__center{display:flex;flex-direction:column;align-items:center;max-width:33rem;margin:auto 0}.hero h1{max-width:30rem;margin:0;font-family:var(--font-display);font-size:clamp(1.45rem,2.03vw,2.1rem);font-weight:400;line-height:1.27}.hero__center>p{margin:.24rem 0 0;font-size:clamp(1.25rem,1.73vw,1.7rem);line-height:1.25}.hero__center>.script-style{margin-top:.22rem;font-style:italic;font-size:clamp(1.35rem,1.65vw,1.75rem)}.hero__actions{display:grid;gap:.9rem;width:min(100%,250px);margin-top:clamp(3rem,9.5vh,7.5rem)}.outline-button{border:1px solid currentColor;display:block;min-height:45px;padding:.53rem .8rem;text-decoration:none;font-size:1.05rem;line-height:1.25}.outline-button:hover{background:var(--burgundy);color:var(--cream)}.scroll-prompt{font-size:.97rem;text-transform:uppercase;text-decoration:underline;text-underline-offset:.35rem}.scroll-prompt span{display:inline-block;margin-left:.35em}
.section-inner{width:100%;max-width:39rem;margin:auto}.eyebrow{margin:0 0 1.2rem;font-style:italic;font-size:clamp(.9rem,1.15vw,1.1rem);letter-spacing:.04em;text-transform:uppercase}.editorial h2,.footer-panel h2{font-weight:400;font-size:clamp(2.2rem,3vw,3.2rem);line-height:1.1;margin:0 0 1.6rem}.feature-copy{font-size:clamp(1.58rem,2.44vw,2.35rem);line-height:1.12;letter-spacing:-.012em;margin:1rem auto 0;max-width:34rem}.feature-copy--small{font-size:clamp(1.55rem,2.18vw,2.1rem)}.support-copy{font-size:clamp(1rem,1.25vw,1.2rem);margin:2.3rem auto 0;max-width:35rem}.eyes{width:min(75%,340px);margin:0 auto 1.4rem}.pill-button{display:block;margin:3rem auto 0;width:min(100%,30rem);padding:.75rem 1.5rem;border-radius:999px;background:var(--burgundy);color:var(--cream);font:inherit;text-align:center;text-decoration:none}.text-link{overflow-wrap:anywhere}.fine-print{font-size:.85rem;margin-top:2.5rem}
.footer-panel{justify-content:space-between;gap:3rem}.footer-panel .section-inner{margin:auto}.footer-panel h2{margin-bottom:1.3rem}.contact-email{font-size:clamp(1.1rem,1.7vw,1.6rem);overflow-wrap:anywhere}.signoff{font-style:italic;margin:2rem 0 0}.footer{display:flex;gap:.65rem;justify-content:center;flex-wrap:wrap;align-items:center;font-size:.82rem;width:100%;padding-top:2rem}.footer a{text-decoration:none}.footer a:hover{text-decoration:underline}
.visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.legal h1{font-size:clamp(2.7rem,4vw,4rem);font-weight:400;margin:1.2rem 0}.legal p,.legal li{font-size:1.03rem;line-height:1.65}.legal h2{font-size:1.55rem;margin:2rem 0 .6rem;font-weight:400}.legal a{text-decoration:underline}.legal .section-inner{text-align:left;max-width:43rem}.legal ul{padding-left:1.25rem}.legal .eyebrow{text-align:center}.legal h1{text-align:center}.legal .updated{text-align:center;font-style:italic}.legal .return-link{display:block;text-align:center;margin:2rem 0}.legal .return-link a{border-bottom:1px solid;text-decoration:none}
@media(max-width:1020px){.brand-panel{padding:5.5rem 6% 2rem}.panel{padding-left:2rem;padding-right:2rem}.main-nav{font-size:.9rem;gap:.7rem}}
@media(max-width:760px){body{font-size:1rem}.site-layout{display:block}.brand-panel{display:none}.mobile-brand{display:block;width:100%;max-width:calc(100vw - 2rem);margin:clamp(2rem,4.2vh,3rem) auto 0}.mobile-brand img{width:100%}.panel{min-height:780px;min-height:94svh;padding:4.5rem clamp(1.2rem,6vw,2.1rem)}.hero{min-height:820px;min-height:100svh;background:var(--burgundy);color:var(--blue);padding:0 1.4rem 2rem;gap:2rem;justify-content:space-between}.hero .main-nav{order:3;font-size:.94rem;gap:1rem .9rem}.hero__center{order:2;margin:auto 0}.hero h1{font-size:clamp(1.55rem,5.1vw,2.05rem)}.hero__center>p{font-size:clamp(1.25rem,4.7vw,1.8rem)}.hero__actions{margin-top:3.5rem;gap:.75rem;width:min(100%,240px)}.outline-button{min-height:44px}.scroll-prompt{order:4;margin-top:.5rem;font-size:.86rem}.eyebrow{font-size:.87rem}.editorial h2,.footer-panel h2{font-size:clamp(2.1rem,7vw,2.85rem)}.feature-copy{font-size:clamp(1.7rem,6.3vw,2.2rem);max-width:20rem;line-height:1.2}.feature-copy--small{font-size:clamp(1.5rem,5.5vw,1.9rem)}.support-copy{font-size:1.05rem}.eyes{width:min(76vw,320px)}.footer-panel{min-height:780px;min-height:95svh}.legal{padding:3rem 1.5rem;min-height:auto;text-align:left}.legal .main-nav{display:none}.legal h1{font-size:2.7rem}.legal .section-inner{padding:1.4rem 0}.legal .return-link{margin-top:2rem}}
@media(min-width:761px) and (max-height:690px){.panel{min-height:690px}.hero{min-height:690px}.hero__actions{margin-top:2rem}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation-duration:.01ms!important;transition-duration:.01ms!important}}

/* Keep the mobile privacy-page wordmark legible on its pale canvas. */
@media(max-width:760px){.legal .mobile-brand{background:var(--burgundy);padding:.7rem 1rem;border-radius:2px;margin:0 auto 2rem;width:100%}}

/* V1.1: designer's headings read as restrained editorial overlines. */
.editorial h2.eyebrow,.footer-panel h2.eyebrow{font-size:clamp(.9rem,1.15vw,1.1rem);line-height:1.3;letter-spacing:.04em;font-style:italic;text-transform:uppercase;font-weight:400;margin:0 0 1.2rem}
.form-placeholder{margin-top:2.25rem}
.form-placeholder .support-copy{margin-top:1.1rem}
.contact-address{font-style:normal;font-size:clamp(1.1rem,1.7vw,1.6rem);margin:0 auto .1rem}
@media(max-width:760px){.editorial h2.eyebrow,.footer-panel h2.eyebrow{font-size:.87rem}.form-placeholder{margin-top:2rem}}


/* V1.2 — spacing refinements matched against Figma desktop 1730px and mobile 402px frames. */
/* Keep all text centred vertically, including on small touch targets. */
.outline-button, .pill-button {
  display:flex; align-items:center; justify-content:center;
  text-align:center; line-height:1.25;
}
.outline-button { padding:.35rem .7rem; min-height:42px; }
.pill-button { min-height:48px; padding:.55rem 1rem; }

@media (min-width:761px) {
  /* The fixed wordmark sits lower than in the first prototype. */
  .brand-panel { padding-top:41.2svh; }
  .hero .main-nav { transform:translateY(20px); }
  .hero__center { transform:translateY(8.3rem); }
  /* The licensed compressed face now provides its own correct letter proportions. */
  .hero h1 { font-size:24px; white-space:normal; }
  .hero__center>p { font-size:24px; }
  .hero__center>.script-style { font-size:clamp(1.25rem,1.5vw,1.6rem); margin-top:.3rem; }
  .hero__actions { width:min(100%,200px); margin-top:clamp(4.5rem,13.8svh,9rem); gap:1.1rem; }
  #about h2.eyebrow { margin-bottom:3.6rem; }
  #margot .eyes { margin-bottom:4.85rem; }
  #margot h2.eyebrow { margin-bottom:4.4rem; }
  #book .section-inner { transform:translateY(-6rem); }
  #book h2.eyebrow { margin-bottom:2.3rem; }
  #membership .section-inner { transform:translateY(-5.9rem); }
  #membership h2.eyebrow { margin-bottom:2.5rem; }
}
@media (max-width:760px) {
  /* Design uses six equal viewport-height colour bands. */
  .panel, .footer-panel, .hero { min-height:100svh; }
  .mobile-brand { max-width:calc(100vw - 3.75rem); margin-top:clamp(5.6rem,11.7svh,7.5rem); }
  .hero h1 { font-size:clamp(18px,5.22vw,21px); line-height:1.25; white-space:normal; }
  .hero__center>p { font-size:clamp(18px,5.22vw,21px); }
  .hero__center>.script-style { font-size:clamp(1.2rem,5.1vw,1.4rem); }
  .hero__actions { width:min(100%,150px); gap:11px; margin-top:1.25rem; }
  .outline-button { min-height:44px; padding:.25rem .3rem; font-size:.91rem; }
  .scroll-prompt { text-transform:none; }
  #about h2.eyebrow { margin-bottom:2.2rem; }
  #about .section-inner { transform:translateY(-6px); }
  #margot .eyes { width:min(66vw,270px); margin-bottom:3.9rem; }
  #margot h2.eyebrow { margin-bottom:4.4rem; }
  #margot .section-inner { transform:translateY(5px); }
  #book h2.eyebrow { margin-bottom:2.3rem; }
  #membership h2.eyebrow { margin-bottom:2.5rem; }
  .pill-button { min-height:48px; }
}
/* Fine alignment of mobile content with the supplied 402px Figma layout. */
@media (max-width:760px) {
  .hero__center { transform:translateY(-42px); }
  .hero .main-nav { transform:translateY(18px); }
  #book .section-inner { transform:translateY(-5rem); }
  #membership .section-inner { transform:translateY(-2.2rem); }
  #contact .section-inner { transform:translateY(2.8rem); }
}


/* V1.3: align section anchors exactly with viewport top, without an old panel strip. */
.panel[id] { scroll-margin-top: 0; }

/* Smooth half-second colour inversion for both button styles. */
.outline-button, .pill-button {
  transition: background-color .5s ease, color .5s ease, border-color .5s ease;
}
.outline-button { background-color: transparent; }
/* The outline button is burgundy on the desktop's pale blue hero. */
.hero .outline-button:hover,
.hero .outline-button:focus-visible {
  background-color: var(--burgundy);
  color: var(--blue);
}
/* The mobile hero has the opposite palette. */
@media (max-width:760px) {
  .hero .outline-button:hover,
  .hero .outline-button:focus-visible {
    background-color: var(--blue);
    color: var(--burgundy);
  }
}
.pill-button { border:1px solid var(--burgundy); }
.pill-button:hover,
.pill-button:focus-visible {
  background-color: transparent;
  color: var(--burgundy);
}

/* V1.6: match reservation email CTA to the existing outlined hero buttons. */
.booking-cta {
  width:min(100%,200px);
  margin:3rem auto 0;
  color:var(--burgundy);
}
@media (max-width:760px) {
  .booking-cta { width:min(100%,150px); }
}


/* V1.8: accessible announcement when visitors request online booking. */
.booking-notice {
  position:fixed;
  width:min(34rem, calc(100% - 2rem));
  max-height:calc(100dvh - 2rem);
  overflow-y:auto;
  padding:clamp(2.25rem, 5vw, 3.5rem) clamp(1.4rem, 4vw, 3rem);
  border:1px solid var(--burgundy);
  border-radius:0;
  background:var(--cream);
  color:var(--burgundy);
  box-shadow:0 20px 70px rgba(30,12,9,.25);
  text-align:center;
}
.booking-notice::backdrop { background:rgba(20,9,7,.7); }
.booking-notice__close {
  position:absolute;
  top:.55rem;
  right:.55rem;
  display:flex;
  align-items:center;
  justify-content:center;
  width:44px;
  height:44px;
  padding:0;
  border:0;
  background:transparent;
  color:var(--burgundy);
  font:inherit;
  font-size:2rem;
  line-height:1;
  cursor:pointer;
}
/* V1.13: keep the close control borderless, including when the modal opens.
   Give keyboard users an underline rather than a box around the X. */
.booking-notice__close:focus-visible {
  outline: none;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: .18em;
}
.booking-notice h2 {
  font-size:clamp(1.8rem, 4vw, 2.5rem);
  font-weight:300;
  line-height:1.2;
  margin:0 0 1.4rem;
}
.booking-notice p {
  margin:0;
  font-size:clamp(1.05rem, 2.5vw, 1.3rem);
  line-height:1.5;
}
.booking-notice p a { overflow-wrap:anywhere; }
.booking-notice__email {
  max-width:220px;
  margin:2rem auto 0;
  cursor:pointer;
}
@media(max-width:760px) {
  .booking-notice { padding:3.1rem 1.4rem 2.3rem; }
}

/* V1.9: Hero headlines use Figma's confirmed 24px desktop size.
   Mobile hero is 21px at the 402px Figma frame to keep the heading on one line. */

/* V1.10 — Figma typography scale: 36px principal editorial copy, 18px nav.
   Use the same primary-copy size for each landing-page section, rather than
   making the About paragraph larger than the Margot, Book or Membership text.
   Legal policy body copy and secondary enquiries intentionally remain smaller. */
@media (min-width: 761px) {
  .main-nav, .hero .main-nav { font-size: 18px; }
  .editorial .feature-copy,
  .editorial .feature-copy--small { font-size: 36px; }
}
@media (max-width: 760px) {
  /* Preserve the separate mobile composition while matching typographic hierarchy. */
  .hero .main-nav { font-size: 18px; }
  .editorial .feature-copy,
  .editorial .feature-copy--small {
    font-size: clamp(27px, 7.2vw, 30px);
    line-height: 1.17;
  }
}

/* V1.12 — HubSpot membership form (desktop and mobile)
   The embed is populated asynchronously. Top-align this section so its heading
   never shifts above the visible panel as HubSpot measures/renders the form.
   Unlike the previous layout, do not translate or vertically auto-centre it. */
#membership {
  justify-content: flex-start;
  align-items: center;
  height: auto;
  min-height: 100svh;
  padding-top: clamp(3rem, 7svh, 5.5rem);
  padding-bottom: clamp(3rem, 7svh, 5.5rem);
}
#membership .section-inner {
  transform: none;
  margin: 0 auto;
  width: 100%;
}
#membership .form-placeholder {
  width: 100%;
  margin-top: 2.25rem;
}
#membership .hbspt-form,
#membership .hs-form-frame,
#membership iframe {
  max-width: 100%;
}
/* Reserve the form's initial area before the external script finishes loading.
   min-height, rather than height, lets longer forms expand without clipping. */
#membership .hs-form-frame {
  display: block;
  width: 100%;
  min-height: 420px;
}
@media (max-width:760px) {
  #membership {
    padding-top: clamp(2.75rem, 6svh, 4.25rem);
    padding-bottom: clamp(2.75rem, 6svh, 4.25rem);
  }
  #membership .form-placeholder { margin-top: 2rem; }
}


/* V1.14 — cookie choice banner: lightweight, keyboard-friendly and on-brand. */
.cookie-banner[hidden] { display: none !important; }
.cookie-banner {
  position: fixed;
  z-index: 200;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 1.2rem 2rem;
  padding: clamp(1.2rem, 3vw, 1.8rem) max(1.2rem, env(safe-area-inset-left))
           calc(clamp(1.2rem, 3vw, 1.8rem) + env(safe-area-inset-bottom))
           max(1.2rem, env(safe-area-inset-right));
  background: var(--cream);
  color: var(--burgundy);
  border-top: 1px solid var(--burgundy);
  box-shadow: 0 -8px 30px rgba(35, 18, 11, .14);
  text-align: left;
}
.cookie-banner__text { flex: 1 1 20rem; max-width: 46rem; }
.cookie-banner h2 { margin: 0 0 .25rem; font-size: 1.35rem; font-weight: 300; line-height: 1.3; }
.cookie-banner p { margin: 0; font-size: 1rem; line-height: 1.45; }
.cookie-banner__actions { display: flex; flex-wrap: wrap; gap: .65rem; justify-content: center; }
.cookie-button {
  min-height: 44px;
  min-width: 150px;
  padding: .65rem 1.1rem;
  border: 1px solid var(--burgundy);
  border-radius: 0;
  background: transparent;
  color: var(--burgundy);
  font: inherit;
  font-size: 1rem;
  line-height: 1.2;
  cursor: pointer;
  transition: background-color .5s ease, color .5s ease;
}
.cookie-button:hover { background: var(--burgundy); color: var(--cream); }
.cookie-button:focus-visible, .footer-cookie-settings:focus-visible,
.inline-cookie-settings:focus-visible { outline: 3px solid currentColor; outline-offset: 3px; }
.footer-cookie-settings, .inline-cookie-settings {
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: .19em;
}
.footer-cookie-settings { font-size: inherit; text-decoration: none; }
.footer-cookie-settings:hover { text-decoration: underline; }
.inline-cookie-settings { font-size: inherit; }
@media (max-width: 760px) {
  .cookie-banner { gap: 1rem; }
  .cookie-banner__text { flex-basis: 100%; }
  .cookie-banner__actions { width: 100%; }
  .cookie-button { flex: 1 1 130px; min-width: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .cookie-button { transition: none; }
}

/* V1.15: Instagram CTA directly beneath the contact sign-off.
   Reuses the same outline, vertical centring and 0.5s hover inversion as other buttons. */
.instagram-cta {
  width: min(100%, 200px);
  margin: 2rem auto 0;
}
@media (max-width: 760px) {
  .instagram-cta { width: min(100%, 150px); }
}