*,*::before,*::after {
  box-sizing:border-box
}
html {
  scroll-behavior:smooth
}
body {
  margin:0
}
img {
  display:block;
  max-width:100%
}
a {
  color:inherit;
  text-decoration:none
}
button,input,textarea,select {
  font:inherit
}
button {
  cursor:pointer
}
button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible {
  outline:3px solid #f2ab56;
  outline-offset:3px
}
section[id] {
  scroll-margin-top:90px
}
.wrap {
  width:min(1200px,calc(100% - 48px));
  margin:auto
}
.demo {
  position:fixed;
  bottom:12px;
  left:12px;
  z-index:40;
  background:#101010d9;
  color:white;
  padding:7px 10px;
  border:1px solid #ffffff4a;
  border-radius:4px;
  font:600 10px/1.2 system-ui;
  letter-spacing:.08em
}
.menu {
  display:none;
  background:none;
  border:1px solid currentColor;
  padding:10px 13px;
  color:inherit
}
.links {
  display:flex;
  align-items:center;
  gap:28px
}
.links a {
  transition:opacity .2s
}
.links a:hover {
  opacity:.65
}
footer {
  padding:32px 0
}
footer .wrap {
  display:flex;
  justify-content:space-between;
  gap:20px;
  flex-wrap:wrap
}
footer small {
  opacity:.65
}
@media(max-width:720px) {
  .wrap {
    width:min(100% - 32px,1200px)
  }
  .menu {
    display:block
  }
  .links {
    display:none;
    position:absolute;
    top:100%;
    left:0;
    right:0;
    background:var(--nav-bg,#171717);
    padding:24px;
    flex-direction:column;
    align-items:stretch;
    gap:18px;
    z-index:20
  }
  .links.open {
    display:flex
  }
}
@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto
  }
  *,*:before,*:after {
    animation:none!important;
    transition:none!important
  }
}
body {
  font:400 15px/1.75 'DM Sans',sans-serif;
  color:#344237;
  background:#fcfaf5;
  --nav-bg:#33493d
}
h1,h2,h3 {
  font-family:Fraunces,Georgia,serif;
  font-weight:400;
  letter-spacing:-.055em
}
h1 i,h2 i {
  color:#769682;
  font-weight:400
}
p {
  margin-top:0
}
.notice {
  padding:8px;
  background:#365043;
  color:#ecf1e9;
  text-align:center;
  font:700 10px 'DM Sans';
  letter-spacing:.14em
}
.notice span {
  margin-left:15px
}
.head {
  display:flex;
  justify-content:space-between;
  align-items:center;
  min-height:91px;
  gap:20px
}
header {
  background:#fcfaf5;
  position:relative;
  z-index:20
}
.logo {
  display:flex;
  align-items:center;
  font:500 34px Fraunces;
  letter-spacing:-.07em
}
.logo span {
  font:38px Georgia;
  color:#8d9d64;
  margin-right:9px
}
.logo small {
  font:700 9px 'DM Sans';
  letter-spacing:.13em;
  align-self:flex-end;
  margin:0 0 12px 8px
}
.links {
  font-size:12px;
  font-weight:600
}
.nav-join {
  padding:13px 19px;
  border:1px solid #68876c;
  border-radius:35px
}
.hero {
  background:#dfe9dc
}
.hero-grid {
  min-height:650px;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:4%;
  align-items:center
}
.hero-content {
  padding:75px 0
}
.eyebrow {
  display:block;
  font:700 10px 'DM Sans';
  letter-spacing:.19em;
  color:#678573
}
.hero h1 {
  font-size:clamp(61px,6.4vw,103px);
  line-height:1.12;
  margin:24px 0
}
.hero-content p {
  max-width:420px;
  color:#5a7460;
  line-height:1.9
}
.round-button {
  border:0;
  background:#355444;
  border-radius:35px;
  color:#fff;
  padding:16px 25px;
  font-size:13px;
  font-weight:700;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:40px
}
.sun-mark {
  display:flex;
  align-items:center;
  gap:12px;
  color:#69866c;
  font:35px Georgia;
  margin-top:90px
}
.sun-mark span {
  font:700 10px 'DM Sans';
  letter-spacing:.17em
}
.hero-visual {
  align-self:stretch;
  position:relative;
  min-height:600px;
  display:flex;
  align-items:center
}
.hero-visual img {
  height:calc(100% - 70px);
  width:100%;
  object-fit:cover;
  border-radius:220px 220px 8px 8px
}
.floating-note {
  position:absolute;
  bottom:75px;
  left:-35px;
  background:#fffdf7;
  padding:22px;
  font-size:10px;
  letter-spacing:.14em;
  font-weight:700;
  box-shadow:0 8px 40px #16382720
}
.floating-note span {
  margin-left:35px
}
.hero-bottom {
  border-top:1px solid #b5c6b3;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8%;
  padding:25px;
  color:#52745a;
  font-size:11px;
  letter-spacing:.14em;
  font-weight:700
}
.about {
  padding:140px 0
}
.about-grid {
  display:grid;
  grid-template-columns:.6fr 1.4fr;
  gap:55px
}
.about h2 {
  font-size:clamp(42px,5.4vw,76px);
  line-height:1.2;
  margin:0 0 30px
}
.about p {
  max-width:670px;
  line-height:2;
  color:#778478
}
.under {
  display:inline-block;
  border-bottom:1px solid #5b7e64;
  padding-bottom:9px;
  font-size:13px;
  font-weight:700
}
.offerings {
  background:#f0f2e9;
  padding:105px 0 125px
}
.section-title {
  text-align:center;
  margin-bottom:55px
}
.section-title h2,.schedule h2,.join h2 {
  font-size:clamp(43px,5.5vw,72px);
  line-height:1.18;
  margin:20px 0
}
.offering-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:24px
}
.offering-img {
  height:380px;
  position:relative;
  overflow:hidden;
  border-radius:160px 160px 6px 6px
}
.offering-img img {
  height:100%;
  width:100%;
  object-fit:cover;
  transition:transform .4s
}
.offering-grid article:hover img {
  transform:scale(1.045)
}
.offering-img span {
  position:absolute;
  left:20px;
  bottom:20px;
  background:#f5f7ec;
  border-radius:50%;
  padding:10px 15px;
  font:700 12px 'DM Sans'
}
.offering-grid h3 {
  font-size:29px;
  margin:20px 0 8px
}
.offering-grid p {
  color:#798b7c;
  font-size:13px;
  max-width:270px
}
.offering-grid a {
  font-size:12px;
  font-weight:700;
  border-bottom:1px solid #67806a
}
.interlude {
  background:#314b3c;
  color:#eff3eb;
  text-align:center;
  padding:100px 0
}
.interlude span {
  font-size:45px;
  color:#b6c9a8
}
.interlude h2 {
  font-size:clamp(36px,4.2vw,62px);
  max-width:900px;
  margin:25px auto 38px;
  line-height:1.3
}
.interlude h2 i {
  color:#aecbb1
}
.interlude p {
  font-size:10px;
  letter-spacing:.2em
}
.schedule {
  padding:115px 0
}
.schedule-heading {
  display:flex;
  justify-content:space-between;
  align-items:end;
  gap:40px
}
.schedule-heading p {
  max-width:260px;
  color:#829080
}
.day-tabs {
  display:flex;
  gap:8px;
  margin:30px 0 20px;
  flex-wrap:wrap
}
.day-tabs button {
  background:#e7eee3;
  border:0;
  border-radius:28px;
  padding:11px 23px;
  font-size:11px;
  font-weight:700
}
.day-tabs button.active {
  background:#365443;
  color:white
}
.class-row {
  display:grid;
  grid-template-columns:160px 1fr auto;
  gap:25px;
  align-items:center;
  border-bottom:1px solid #d9e2d7;
  padding:25px 12px
}
.class-row:first-child {
  border-top:1px solid #d9e2d7
}
.class-row>span {
  font-size:12px;
  color:#7d9280;
  font-weight:700
}
.class-row h3 {
  font-size:28px;
  margin:0
}
.class-row p {
  font-size:12px;
  color:#90a094;
  margin:0
}
.class-row a {
  font-size:12px;
  font-weight:700
}
.sample {
  color:#829083;
  font-size:11px;
  margin-top:24px
}
.join {
  background:#dce7d9
}
.join-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  min-height:620px
}
.join-photo img {
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center
}
.join-copy {
  padding:80px 12%;
  align-self:center
}
.join-copy p {
  color:#6c8570
}
.join form {
  display:grid;
  gap:13px;
  margin:25px 0 15px
}
.join label {
  font-size:11px;
  font-weight:700;
  display:grid;
  gap:6px
}
.join input {
  padding:13px 15px;
  border:1px solid #b8cabb;
  background:#f7faf6
}
.join small {
  color:#758f79;
  font-size:11px
}
footer {
  background:#324a3d;
  color:#f3f6ed
}
footer strong {
  font:27px Fraunces
}
@media(max-width:850px) {
  .hero-grid {
    grid-template-columns:1fr 1fr
  }
  .hero-visual {
    min-height:450px
  }
  .hero h1 {
    font-size:60px
  }
  .offering-img {
    height:280px
  }
  .join-copy {
    padding:50px 8%
  }
}
@media(max-width:660px) {
  .hero-grid,.about-grid,.join-grid {
    grid-template-columns:1fr
  }
  .hero-grid {
    gap:0
  }
  .hero-content {
    padding:60px 0 20px
  }
  .sun-mark {
    margin-top:40px
  }
  .hero-visual {
    min-height:400px;
    height:400px
  }
  .hero-visual img {
    height:100%;
    border-radius:190px 190px 5px 5px
  }
  .floating-note {
    bottom:10px;
    left:0
  }
  .hero-bottom {
    gap:15px;
    font-size:8px
  }
  .about,.offerings,.schedule {
    padding:75px 0
  }
  .offering-grid {
    grid-template-columns:1fr
  }
  .offering-img {
    height:390px
  }
  .schedule-heading {
    display:block
  }
  .class-row {
    grid-template-columns:85px 1fr;
    gap:14px
  }
  .class-row a {
    grid-column:2
  }
  .join-photo img {
    height:400px
  }
  .join-copy {
    padding:65px 0
  }
  .hero h1 {
    font-size:62px
  }
}