/* Paste ONLY this code into CodePen's CSS panel. */
/* EDIT COLOURS: Change these variables to restyle the entire website. */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=DM+Serif+Display:ital@0;1&display=swap');
:root {
  --teal:#194e50;
  --teal-light:#3c8178;
  --cream:#fbf9f3;
  --mint:#eaf1ec;
  --sand:#e9d3a8;
  --ink:#183f41;
  --muted:#657b75;
  --white:#fff
}

* {
  box-sizing:border-box
}

html {
  scroll-behavior:smooth;
  scroll-padding-top:100px
}

body {
  margin:0;
  background:var(--cream);
  color:var(--ink);
  font:15px/1.65 'DM Sans',Arial,sans-serif
}

a {
  text-decoration:none;
  color:inherit
}

button,input {
  font:inherit
}

button {
  cursor:pointer
}

img {
  max-width:100%;
  display:block
}

h1,h2,h3 {
  font-family:'DM Serif Display',Georgia,serif;
  font-weight:400;
  letter-spacing:-.025em;
  line-height:1.12
}

h1 {
  font-size:clamp(54px,5.7vw,91px);
  margin:24px 0
}

h2 {
  font-size:clamp(38px,4vw,66px);
  margin:18px 0 25px
}

h3 {
  font-size:31px;
  margin:18px 0
}

em {
  font-weight:400;
  color:var(--teal-light)
}

p {
  margin:0 0 18px
}

.wrap {
  width:min(1200px,calc(100% - 52px));
  margin:auto
}

.eyebrow {
  font-size:11px;
  font-weight:700;
  letter-spacing:.17em;
  color:#328579;
  text-transform:uppercase
}

.eyebrow.light {
  color:#b6d9cb
}

.btn {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:var(--teal);
  border:1px solid var(--teal);
  border-radius:4px;
  padding:15px 24px;
  color:white;
  font-size:13px;
  font-weight:700;
  transition:.2s
}

.btn:hover {
  background:#286c6b;
  transform:translateY(-2px)
}

.announcement {
  padding:10px 15px;
  background:var(--teal);
  color:#f1f3e8;
  text-align:center;
  font-size:10px;
  letter-spacing:.13em;
  font-weight:700
}

.header {
  height:98px;
  position:sticky;
  top:0;
  z-index:20;
  background:var(--cream);
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 5%;
  gap:25px;
  border-bottom:1px solid #e0e7df
}

.logo {
  display:flex;
  align-items:center;
  gap:12px
}

.logo-icon {
  display:grid;
  place-items:center;
  background:var(--teal);
  color:var(--sand);
  height:53px;
  width:53px;
  border-radius:16px;
  font-size:32px
}

.logo strong {
  display:block;
  font:36px/.95 Georgia,serif;
  letter-spacing:-2px
}

.logo small {
  display:block;
  font-size:8px;
  letter-spacing:.19em;
  margin-top:8px
}

.header nav {
  display:flex;
  gap:24px;
  font-size:12px;
  font-weight:700
}

.header nav a:hover {
  color:var(--teal-light)
}

.menu-button {
  display:none;
  border:0;
  background:transparent;
  color:var(--ink);
  font-size:29px
}

.hero {
  display:grid;
  grid-template-columns:54% 46%;
  min-height:670px
}

.hero-copy {
  padding:90px 7% 45px max(26px,calc((100vw - 1200px)/2));
  display:flex;
  flex-direction:column;
  background:linear-gradient(130deg,#fbf9f2,#f4f3e9)
}

.hero-copy .lead {
  font-size:16px;
  max-width:550px;
  color:var(--muted)
}

.actions {
  display:flex;
  align-items:center;
  gap:28px;
  margin:26px 0 55px
}

.text-link {
  font-size:13px;
  font-weight:700;
  border-bottom:1px solid;
  padding:5px
}

.stats {
  margin-top:auto;
  padding-top:25px;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  border-top:1px solid #cddcd2
}

.stats div {
  padding:0 12px;
  border-left:1px solid #cddcd2
}

.stats div:first-child {
  border:0;
  padding-left:0
}

.stats strong,.stats span {
  display:block
}

.stats strong {
  font:23px Georgia,serif;
  white-space:nowrap
}

.stats span {
  font-size:11px;
  color:var(--muted);
  margin-top:5px
}

.hero-photo {
  position:relative;
  min-height:550px;
  background:#d4e4dc
}

.hero-photo img {
  width:100%;
  height:100%;
  object-fit:cover
}

.photo-label {
  position:absolute;
  bottom:60px;
  left:-30px;
  background:#fff;
  display:flex;
  align-items:center;
  gap:15px;
  padding:19px 24px;
  box-shadow:0 15px 30px #142e2e27
}

.photo-label>span {
  font-size:32px;
  color:var(--teal-light)
}

.photo-label strong {
  display:block;
  font:26px Georgia,serif
}

.photo-label small {
  color:var(--muted);
  font-size:11px
}

.image-credit {
  position:absolute;
  bottom:12px;
  right:12px;
  color:#213e36;
  background:#ffffffe3;
  padding:3px 8px;
  font-size:10px
}

.why {
  text-align:center;
  padding:110px 0 120px
}

.why>p:not(.eyebrow) {
  color:var(--muted);
  max-width:590px;
  margin:0 auto
}

.features {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:34px;
  text-align:left;
  margin-top:80px
}

.features article {
  border-top:1px solid #c7d8d0;
  padding:25px 15px 0 0
}

.feature-icon {
  display:block;
  font-size:38px;
  color:var(--teal-light);
  height:68px
}

.features small {
  font-size:11px;
  color:#458b7b;
  letter-spacing:.13em;
  font-weight:700
}

.features p {
  color:var(--muted)
}

.studio {
  background:var(--teal);
  color:#fff;
  padding:105px 0
}

.studio-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8%;
  align-items:center
}

.studio-grid>img {
  width:100%;
  height:530px;
  object-fit:cover;
  background:#cfddd5
}

.studio-grid p:not(.eyebrow) {
  color:#d2e5db
}

.studio h2 {
  font-size:clamp(43px,4.5vw,68px)
}

.studio-facts {
  display:flex;
  gap:45px;
  margin:35px 0;
  padding-top:25px;
  border-top:1px solid #567f78
}

.studio-facts div {
  display:flex;
  align-items:center;
  gap:12px
}

.studio-facts strong {
  font:48px Georgia,serif;
  color:var(--sand)
}

.studio-facts span {
  font-size:12px
}

.cream-btn {
  background:var(--sand);
  color:var(--teal);
  border-color:var(--sand)
}

.cream-btn:hover {
  background:#ffe4b7
}

.story {
  display:grid;
  grid-template-columns:33% 1fr;
  gap:7%;
  padding:125px 0
}

.giant-quote {
  font:200px/.9 Georgia,serif;
  color:#dbe9df
}

.story p:not(.eyebrow) {
  font-size:16px;
  color:var(--muted)
}

.signature {
  font:italic 23px Georgia,serif!important;
  color:var(--teal-light)!important;
  margin-top:30px
}

.booking {
  background:var(--mint);
  padding:105px 0 125px
}

.booking-heading {
  display:flex;
  align-items:end;
  justify-content:space-between;
  gap:30px;
  margin-bottom:35px
}

.booking-heading p:not(.eyebrow) {
  max-width:590px;
  color:var(--muted)
}

.hours {
  background:#f8faf6;
  border:1px solid #d4e2d7;
  padding:15px 20px;
  font-size:12px;
  font-weight:700
}

.hours small {
  color:var(--muted);
  font-weight:400
}

.booking-grid {
  display:grid;
  grid-template-columns:1.2fr 1fr;
  gap:25px;
  align-items:start
}

.card {
  background:#fff;
  padding:30px;
  border:1px solid #e2e9e2;
  box-shadow:0 10px 25px #325b4711
}

.date-controls {
  display:flex;
  justify-content:space-between;
  align-items:end;
  gap:15px
}

.date-controls label {
  font-size:11px;
  letter-spacing:.15em;
  font-weight:700
}

.date-controls input {
  display:block;
  margin-top:10px;
  padding:11px;
  border:1px solid #cddbd0;
  color:var(--ink);
  border-radius:3px;
  width:200px;
  max-width:100%
}

.date-controls button {
  width:42px;
  height:42px;
  border:1px solid #cfded3;
  background:#f5f9f5;
  border-radius:3px;
  color:var(--teal);
  font-size:19px
}

.date-controls button:disabled {
  opacity:.35;
  cursor:not-allowed
}

.muted,.disclaimer {
  color:var(--muted);
  font-size:11px;
  line-height:1.6
}

.date-controls+.muted {
  margin:15px 0
}

.table-scroller {
  overflow-x:auto
}

table {
  width:100%;
  border-collapse:collapse;
  text-align:left;
  font-size:13px
}

th {
  font-size:10px;
  letter-spacing:.09em;
  color:#698278;
  background:#eef5ef;
  padding:14px
}

td {
  padding:13px 14px;
  border-bottom:1px solid #edf1ed
}

td:first-child {
  font-weight:700;
  white-space:nowrap
}

.slot-btn {
  border:1px solid var(--teal-light);
  background:#fff;
  color:var(--teal);
  border-radius:3px;
  font-weight:700;
  font-size:11px;
  padding:7px 13px
}

.slot-btn:hover,.slot-btn.chosen {
  background:var(--teal);
  color:#fff
}

.status-pill {
  color:#337960;
  background:#e9f3ed;
  border-radius:30px;
  padding:5px 9px;
  white-space:nowrap;
  font-size:10px
}

.disclaimer {
  margin-top:17px
}

.request-card h3 {
  font-size:39px
}

.selection {
  background:#eef5ef;
  padding:13px;
  border-left:3px solid #5eaa96;
  font-size:13px;
  color:#426a5c
}

.request-card form {
  display:flex;
  flex-direction:column
}

.request-card label {
  font-size:12px;
  font-weight:700;
  margin:16px 0 7px
}

.request-card input {
  border:1px solid #cddcd2;
  padding:12px 13px;
  background:#fafcf9;
  border-radius:3px;
  width:100%
}

.request-card input:focus,.date-controls input:focus {
  outline:2px solid #8cb9ad
}

.request-card .muted {
  margin-top:17px
}

.submit {
  width:100%;
  margin:5px 0
}

.feedback {
  font-weight:700;
  color:#277664;
  font-size:12px;
  min-height:18px;
  margin:10px 0 0
}

.faq {
  display:grid;
  grid-template-columns:1fr 1.2fr;
  gap:11%;
  padding:115px 0
}

.faq>div:first-child>p:not(.eyebrow) {
  color:var(--muted)
}

.outline-btn {
  background:transparent;
  color:var(--teal)
}

.outline-btn:hover {
  color:#fff
}

.faq details {
  border-bottom:1px solid #d4ded6
}

.faq summary {
  padding:23px 25px 23px 0;
  cursor:pointer;
  font-weight:700;
  list-style:none;
  position:relative
}

.faq summary:after {
  content:'+';
  position:absolute;
  right:5px;
  font-size:23px;
  font-weight:400
}

.faq details[open] summary:after {
  content:'−'
}

.faq details p {
  color:var(--muted)
}

.contact {
  background:var(--teal);
  color:#fff;
  padding:100px 0
}

.contact-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:15%
}

.contact h2 em {
  color:var(--sand)
}

.contact p {
  color:#d2e4dc
}

.contact-list>div {
  border-bottom:1px solid #4f807b;
  padding:0 0 15px;
  margin-bottom:20px
}

.contact-list small {
  display:block;
  letter-spacing:.17em;
  color:#b6d8ce;
  margin-bottom:8px
}

.contact-list strong {
  display:block;
  font:27px Georgia,serif
}

.contact-list p {
  font-size:11px
}

.footer {
  padding:50px 0 35px;
  display:flex;
  gap:15px;
  justify-content:space-between;
  align-items:center;
  flex-wrap:wrap
}

.footer-brand {
  font:32px Georgia,serif
}

.footer-brand small {
  font:9px 'DM Sans',sans-serif;
  letter-spacing:.12em
}

.footer p,.footer>div {
  color:var(--muted);
  font-size:11px;
  margin:0
}

.chat-toggle {
  position:fixed;
  right:25px;
  bottom:20px;
  z-index:40;
  border:0;
  background:var(--teal);
  color:white;
  padding:15px 22px;
  border-radius:35px;
  box-shadow:0 10px 28px #153c3c55;
  font-weight:700
}

.chat-panel {
  position:fixed;
  right:25px;
  bottom:83px;
  width:350px;
  max-width:calc(100vw - 30px);
  background:#fff;
  box-shadow:0 14px 45px #18353555;
  border-radius:12px;
  overflow:hidden;
  z-index:41
}

.chat-panel[hidden] {
  display:none
}

.chat-head {
  background:var(--teal);
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:15px
}

.chat-head button {
  background:transparent;
  border:0;
  color:#fff;
  font-size:26px
}

.chat-messages {
  height:260px;
  overflow-y:auto;
  padding:15px;
  background:#f6faf6
}

.bubble {
  font-size:12px;
  line-height:1.5;
  padding:11px 13px;
  border-radius:12px;
  margin-bottom:12px;
  max-width:90%;
  white-space:pre-wrap
}

.bubble.bot {
  background:#deede5
}

.bubble.user {
  background:var(--teal);
  color:white;
  margin-left:auto
}

.chat-panel form {
  display:flex;
  border-top:1px solid #d9e5dd
}

.chat-panel input {
  border:0;
  outline:0;
  padding:13px;
  width:100%;
  min-width:0
}

.chat-panel form button {
  background:transparent;
  border:0;
  font-size:19px;
  color:var(--teal);
  padding:0 15px
}

.chat-note {
  display:block;
  text-align:center;
  font-size:10px;
  padding:5px;
  color:var(--muted)
}

@media(max-width:1000px) {
  .header nav {
    gap:12px
  }

  .header nav a {
    font-size:11px
  }

  .hero-copy {
    padding-left:32px
  }

  .stats strong {
    font-size:19px
  }

}

@media(max-width:800px) {
  .header {
    height:76px;
    padding:0 20px
  }

  .logo strong {
    font-size:29px
  }

  .logo-icon {
    width:44px;
    height:44px
  }

  .menu-button {
    display:block;
    margin-left:auto
  }

  .header nav {
    display:none;
    position:absolute;
    top:76px;
    left:0;
    right:0;
    flex-direction:column;
    gap:18px;
    padding:22px;
    background:var(--cream);
    box-shadow:0 10px 20px #142d2d33
  }

  .header nav.show {
    display:flex
  }

  .header-btn {
    display:none
  }

  .hero {
    grid-template-columns:1fr
  }

  .hero-copy {
    padding:65px 26px 36px
  }

  .hero-photo {
    min-height:380px;
    height:420px
  }

  .photo-label {
    left:25px;
    bottom:23px
  }

  .features {
    grid-template-columns:1fr;
    gap:20px;
    margin-top:55px
  }

  .why {
    padding:75px 0
  }

  .studio-grid,.story,.booking-grid,.faq,.contact-grid {
    grid-template-columns:1fr;
    gap:35px
  }

  .studio {
    padding:70px 0
  }

  .studio-grid>img {
    height:400px
  }

  .story {
    padding:80px 0
  }

  .giant-quote {
    display:none
  }

  .booking {
    padding:70px 0
  }

  .booking-heading {
    align-items:start;
    flex-direction:column
  }

  .faq {
    padding:80px 0
  }

  .contact {
    padding:75px 0
  }

}

@media(max-width:500px) {
  .wrap {
    width:calc(100% - 34px)
  }

  .announcement {
    font-size:8px;
    letter-spacing:.06em
  }

  .hero h1 {
    font-size:52px
  }

  .actions {
    align-items:start;
    flex-direction:column;
    gap:18px
  }

  .stats strong {
    font-size:16px
  }

  .stats span {
    font-size:9px
  }

  .stats div {
    padding:0 6px
  }

  .hero-photo {
    height:330px;
    min-height:330px
  }

  .why h2,.booking h2 {
    font-size:42px
  }

  .studio h2,.contact h2 {
    font-size:43px
  }

  .card {
    padding:18px 14px
  }

  th,td {
    padding:11px 8px
  }

  .studio-facts strong {
    font-size:37px
  }

  .chat-toggle {
    right:12px;
    bottom:12px
  }

  .chat-panel {
    right:12px;
    bottom:75px
  }

}

/* NEW SIMDENTIA SECTIONS — edit these rules to change their appearance */
.photo-caption { font-size:12px; margin:20px 0 12px; color:#d2e5db; }
.photo-caption a { text-decoration:underline; text-underline-offset:3px; }
.equipment-section { padding-top:105px; padding-bottom:110px; }
.equipment-heading { max-width:760px; margin-bottom:45px; }
.equipment-heading p:not(.eyebrow) { color:var(--muted); }
.equipment-columns { display:grid; grid-template-columns:1fr 1fr; gap:26px; }
.equipment-card { padding:40px; border:1px solid #cdded5; background:#fff; }
.equipment-card.provided { background:#e7f1eb; }
.equipment-card.bring { background:#fffdf7; }
.equipment-card h3 { font-size:37px; margin:8px 0 23px; }
.mini-label { font-weight:700; letter-spacing:.14em; color:#348476; font-size:11px; }
.equipment-card ul { margin:0; padding-left:23px; }
.equipment-card li { margin:0 0 11px; color:#425f56; }
.equipment-footnote { color:var(--muted); font-size:12px; margin-top:24px; }
.pricing-section { padding:95px 0 108px; background:var(--teal); color:white; }
.pricing-heading { max-width:780px; margin-bottom:38px; }
.pricing-heading h2 em { color:var(--sand); }
.pricing-heading p:not(.eyebrow) { color:#d2e4dc; }
.pricing-grid { display:grid; grid-template-columns:1fr 1fr; gap:24px; }
.price-card { padding:38px; background:#fdfbf5; color:var(--ink); border-radius:6px; }
.price-card.early { background:#e5f0e8; }
.price-card h3 { margin:18px 0 10px; }
.price-card>p:not(.price-amount) { color:var(--muted); min-height:77px; }
.offer-pill { display:inline-block; background:#1b6760; color:white; border-radius:50px; font-weight:700; font-size:11px; padding:7px 12px; letter-spacing:.08em; }
.offer-pill.standard { background:#e7ecdf; color:var(--teal); }
.price-amount { font:56px/1.2 Georgia,serif; margin:15px 0; }
.price-amount span { font:14px 'DM Sans',sans-serif; color:#5c7169; }
.pricing-notice { color:#c6e0d8; font-size:12px; margin-top:24px; }
.extra-services { padding-top:110px; padding-bottom:118px; }
.extras-intro { max-width:620px; }
.extra-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:28px; margin-top:43px; }
.extra-grid article { padding:27px 23px 21px; border-top:2px solid #a9cdbd; background:#f0f5ef; }
.extra-grid h3 { font-size:30px; }
.extra-grid p { color:var(--muted); }
.booking-price-note { display:flex; flex-wrap:wrap; gap:12px; align-items:center; background:#fff; border-left:4px solid var(--teal-light); padding:14px 22px; margin-bottom:25px; color:var(--teal); font-size:13px; }
.booking-price-note span { color:#9bb7aa; }
@media(max-width:900px) {
  .equipment-columns,.pricing-grid { grid-template-columns:1fr; }
  .extra-grid { grid-template-columns:1fr; }
  .price-card>p:not(.price-amount) { min-height:0; }
}
@media(max-width:600px) {
  .equipment-section,.extra-services { padding-top:70px; padding-bottom:70px; }
  .pricing-section { padding:70px 0; }
  .equipment-card,.price-card { padding:24px; }
  .equipment-card h3,.price-card h3 { font-size:29px; }
  .price-amount { font-size:45px; }
}

/* A compact navigation is necessary with the added pricing & equipment links. */
@media(min-width:801px) and (max-width:1120px) {
 .header{height:76px;padding:0 20px;}
 .menu-button{display:block;margin-left:auto;}
 .header nav{display:none;position:absolute;top:76px;left:0;right:0;flex-direction:column;gap:18px;padding:22px;background:var(--cream);box-shadow:0 10px 20px #142d2d33;}
 .header nav.show{display:flex;}
 .header-btn{display:none;}
}

/* Live booking and Stripe payment styles */
.payment-return{background:#e2f3e9;border:1px solid #8bc8ab;color:#144b42;padding:18px 22px;margin:0 0 22px;border-radius:5px;font-weight:600}
.request-card .check-row{display:flex;align-items:flex-start;gap:10px;line-height:1.45;font-size:12px;font-weight:500;margin:15px 0 0;cursor:pointer}
.request-card .check-row input{margin:2px 0 0;width:17px;min-width:17px;height:17px;padding:0;accent-color:var(--teal)}
.request-card .acknowledgement{background:#f0f5ec;padding:13px;margin-top:24px;border-radius:4px}
.booking-total{margin:18px 0 12px;font-weight:700;font-size:20px;color:var(--teal);padding:13px 16px;background:#e7f1ec;border-radius:5px}
.checkout-disclaimer{font-size:11px;color:#687b75;line-height:1.5;margin:12px 0 0}
.feedback.is-error{color:#ae3727}
.slot-btn:disabled,.submit:disabled{cursor:not-allowed;opacity:.52}
.turnstile-wrap:not(:empty){margin:14px 0}