/* All Starr Coaching / Green and Wood theme */
:root {
  color-scheme:only light;
  --main:#46553A;
  --dark:#283326;
  --wood:#A77C4F;
  --black:#283326;
  --paper:#eef0e7;
  --soft:#dfe4d6;
  --light:#f7f8f2;
  --muted:#65705e;
  --line:#aeb9a3;
  --accent:#A77C4F;
  --image-one:url('images/fitness-one.jpg');
  --image-two:url('images/fitness-two.jpg');
  --image-three:url('images/fitness-three.jpg')
}


* {
  box-sizing:border-box
}

html {
  scroll-behavior:smooth
}

body {
  margin:0;
  background:var(--paper);
  color:var(--black);
  font-family:Arial,Helvetica,sans-serif;
  line-height:1.55
}

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

.skip-link {
  position:absolute;
  left:16px;
  top:-60px;
  z-index:30;
  padding:10px 14px;
  background:var(--light);
  color:var(--dark);
  font-weight:800
}

.skip-link:focus {
  top:16px
}

.nav {
  position:sticky;
  top:0;
  z-index:30;
  display:flex;
  align-items:center;
  padding:18px 6vw;
  background:var(--main);
  color:var(--light);
  border-bottom:2px solid var(--black)
}

.logo {
  margin-left:16px;
  font-size:18px;
  font-weight:900;
  letter-spacing:2px
}

.logo span,.eyebrow {
  color:var(--wood)
}

.nav-toggle {
  display:grid;
  width:58px;
  height:52px;
  align-content:center;
  gap:7px;
  border:0;
  border-right:1px solid rgba(247,248,242,.25);
  padding:0 14px 0 0;
  background:transparent;
  color:var(--light);
  cursor:pointer
}

.nav-toggle span {
  display:block;
  width:100%;
  height:3px;
  background:currentColor;
  border-radius:4px;
  transition:transform .2s ease,opacity .2s ease
}

.nav.is-open .nav-toggle span:nth-child(1) {
  transform:translateY(10px) rotate(45deg)
}

.nav.is-open .nav-toggle span:nth-child(2) {
  opacity:0
}

.nav.is-open .nav-toggle span:nth-child(3) {
  transform:translateY(-10px) rotate(-45deg)
}

.nav-actions {
  display:flex;
  gap:10px;
  align-items:center;
  margin-left:auto
}

body.menu-open {
  overflow:hidden
}

.site-drawer {
  position:fixed;
  z-index:20;
  top:0;
  bottom:0;
  left:0;
  display:flex;
  width:min(380px,92vw);
  flex-direction:column;
  padding:116px 38px 42px;
  background:var(--dark);
  color:var(--light);
  box-shadow:18px 0 42px rgba(0,0,0,.3);
  transform:translateX(-105%);
  transition:transform .25s ease
}

.site-drawer.is-open {
  transform:translateX(0)
}

.drawer-links {
  display:grid;
  margin-top:24px;
  border-top:1px solid #68725f
}

.drawer-links a {
  padding:18px 0;
  border-bottom:1px solid #68725f;
  font-size:clamp(28px,6vw,40px);
  font-weight:900;
  letter-spacing:-1px
}

.drawer-about {
  border-bottom:1px solid #68725f
}

.drawer-about-toggle {
  display:flex;
  width:100%;
  align-items:center;
  justify-content:space-between;
  padding:18px 0;
  border:0;
  background:transparent;
  color:var(--light);
  font:inherit;
  font-size:clamp(28px,6vw,40px);
  font-weight:900;
  letter-spacing:-1px;
  text-align:left;
  cursor:pointer
}

.drawer-chevron {
  width:14px;
  height:14px;
  margin-right:5px;
  border-right:2px solid var(--wood);
  border-bottom:2px solid var(--wood);
  transform:rotate(-45deg);
  transition:transform .24s cubic-bezier(.2,.8,.2,1)
}

.drawer-about.is-expanded .drawer-chevron {
  transform:rotate(45deg)
}

.drawer-submenu {
  display:grid;
  gap:12px;
  max-height:0;
  overflow:hidden;
  padding:0 0 0 18px;
  opacity:0;
  transform:translateY(-6px);
  transition:max-height .3s cubic-bezier(.2,.8,.2,1),padding-bottom .3s cubic-bezier(.2,.8,.2,1),opacity .18s ease,transform .3s cubic-bezier(.2,.8,.2,1)
}

.drawer-about.is-expanded .drawer-submenu {
  max-height:110px;
  padding-bottom:19px;
  opacity:1;
  transform:translateY(0)
}

.drawer-submenu a {
  padding:0;
  border:0;
  color:#d9dfd1;
  font-size:15px;
  font-weight:800;
  letter-spacing:0
}

.drawer-submenu a span {
  color:var(--wood)
}

.drawer-links a:hover,
.drawer-links a:focus-visible {
  color:var(--wood)
}

.drawer-socials {
  display:grid;
  gap:13px;
  margin-top:auto
}

.drawer-socials > a,
.footer-socials a {
  display:flex;
  align-items:center;
  gap:9px;
  font-size:13px;
  font-weight:800
}

.drawer-socials svg,
.footer-socials svg {
  width:24px;
  height:24px;
  flex:none;
  fill:none;
  stroke:currentColor;
  stroke-width:2
}

.drawer-socials svg path,
.footer-socials svg path {
  fill:currentColor;
  stroke:none
}

.drawer-socials .social-dot,
.footer-socials .social-dot {
  fill:currentColor;
  stroke:none
}

.menu-overlay {
  position:fixed;
  z-index:15;
  inset:0;
  background:rgba(18,25,17,.58);
  opacity:0;
  pointer-events:none;
  transition:opacity .25s ease
}

.nav.is-open ~ .menu-overlay {
  opacity:1;
  pointer-events:auto
}

.nav-cta,.button {
  border:0;
  border-radius:3px;
  padding:11px 16px;
  font-weight:800;
  cursor:pointer
}

.nav-cta,.button-primary {
  background:var(--wood);
  color:var(--light)
}

.hero {
  max-width:1200px;
  margin:auto;
  padding:85px 6vw 120px;
  display:grid;
  grid-template-columns:.9fr 1.1fr;
  gap:7vw;
  align-items:center;
  background:var(--main);
  color:var(--light)
}

.eyebrow {
  font-size:11px;
  font-weight:900;
  letter-spacing:1.5px;
  text-transform:uppercase
}

.hero h1 {
  font-size:clamp(52px,7vw,100px);
  line-height:.93;
  letter-spacing:-5px;
  margin:20px 0
}

.intro {
  font-size:20px;
  color:#d9dfd1;
  max-width:470px
}

.hero-buttons {
  display:flex;
  align-items:center;
  gap:24px;
  margin-top:32px
}

.text-link {
  font-weight:800;
  border-bottom:2px solid var(--wood);
  padding-bottom:4px
}

.slideshow {
  height:600px;
  position:relative;
  overflow:hidden;
  border-radius:4px;
  background:var(--dark);
  border:2px solid var(--wood)
}

.slide {
  position:absolute;
  inset:0;
  background-size:cover;
  background-position:center;
  opacity:0;
  transition:opacity .8s
}

.slide.is-active {
  opacity:1
}

.slide:after {
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(0deg,rgba(40,51,38,.75),transparent 50%)
}

.slide span {
  position:absolute;
  z-index:1;
  left:28px;
  bottom:80px;
  color:var(--light);
  font-size:14px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:1px
}

.slide-one {
  background-image:var(--image-one)
}

.slide-two {
  background-image:var(--image-two)
}

.slide-three {
  background-image:var(--image-three)
}

.slide-controls {
  position:absolute;
  z-index:2;
  left:24px;
  bottom:25px;
  display:flex;
  gap:7px
}

.slide-button {
  width:34px;
  height:34px;
  border:1px solid var(--wood);
  background:transparent;
  color:var(--light);
  border-radius:50%;
  cursor:pointer
}

.slide-button.is-active {
  background:var(--wood)
}

.about,
.process {
  width:100%;
  max-width:none;
  margin:auto;
  padding:120px 6vw;
}

.about {
  display:block
}

.about h2,.process h2,.coaching h2 {
  font-size:clamp(38px,5vw,70px);
  line-height:1;
  letter-spacing:-3px;
  margin:0 0 30px;
  color:var(--dark)
}

.about p {
  max-width:650px;
  margin-left:auto;
  margin-right:auto;
  font-size:20px;
  color:var(--muted)
}

.stat-row {
  display:flex;
  gap:60px;
  margin-top:55px;
  justify-content:center
}

.stat-row strong {
  display:block;
  font-size:38px;
  color:var(--main)
}

.stat-row span {
  color:var(--muted);
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:1px
}

.coaching {
  padding:120px 6vw;
  background:var(--dark);
  color:var(--light);
  display:block
}

.about > div,
.coaching > div,
.process > div {
  width:100%;
  max-width:960px;
  margin:0 auto
}

.coaching h2 {
  text-align:center;
  color:var(--light)
}

.about > div {
  text-align:center
}

.offer-list {
  max-width:760px;
  margin:0 auto
}

.offer-list article {
  display:grid;
  grid-template-columns:55px 1fr 1fr;
  align-items:center;
  border-top:1px solid #68725f;
  padding:26px 0
}

.offer-list article span,.timeline b {
  color:var(--wood);
  font-weight:900
}

.offer-list h3 {
  font-size:25px;
  margin:0
}

.offer-list p {
  color:#cbd2c5;
  margin:0
}

.timeline {
  max-width:560px;
  margin:55px auto 0;
  border-left:2px solid var(--wood);
}

.timeline div {
  display:grid;
  grid-template-columns:70px 1fr;
  padding:0 0 26px 24px
}

.timeline p {
  margin:0;
  font-size:18px
}

.contact {
  padding:100px 6vw;
  text-align:center;
  background:var(--soft);
  border-top:2px solid var(--wood)
}

.contact h2 {
  font-size:clamp(40px,6vw,82px);
  line-height:.95;
  letter-spacing:-4px;
  margin:20px auto 35px;
  max-width:800px;
  color:var(--dark)
}

.contact .eyebrow {
  color:var(--dark)
}

footer {
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  padding:28px 6vw;
  background:var(--black);
  color:var(--light);
  font-size:12px;
  letter-spacing:1px
}

footer span,
.footer-links {
  color:#bdc7b9
}

.footer-socials {
  flex-direction:row;
  flex-wrap:wrap;
  justify-content:flex-end;
  justify-self:end;
  gap:14px;
  color:#bdc7b9
}

footer > div {
  display:flex;
  flex-direction:column;
  gap:7px
}

footer > div:first-child {
  justify-self:start
}

.footer-links {
  flex-direction:row;
  flex-wrap:wrap;
  justify-content:center;
  gap:14px;
  font-size:11px
}

.footer-links a {
  text-decoration:underline;
  text-underline-offset:3px
}

@media(max-width:800px) {
.hero {
  grid-template-columns:1fr;
  padding-top:55px
}

.slideshow {
  height:460px
}

.offer-list article {
  grid-template-columns:45px 1fr
}

.offer-list p {
  grid-column:2
}

.contact {
  text-align:left
}


}

@media(max-width:520px) {
  .nav {
    padding:12px 5vw
  }

  .nav-toggle {
    width:42px;
    height:44px;
    padding-right:10px;
    gap:6px
  }

  .logo {
    margin-left:10px;
    white-space:nowrap;
    font-size:15px;
    letter-spacing:1.5px
  }

  .nav-cta {
    padding:10px 12px;
    font-size:13px;
    white-space:nowrap
  }

.hero h1 {
  letter-spacing:-3px
}

.slideshow {
  height:390px
}

.stat-row {
  gap:25px
}

.stat-row strong {
  font-size:30px
}

footer {
  display:block
}

footer > div,
footer > div:first-child,
.footer-links,
.footer-socials {
  align-items:center;
  justify-content:center;
  justify-self:auto;
  text-align:center
}

footer span,
.footer-links,
.footer-socials {
  display:block;
  margin-top:8px
}

.footer-links a,
.footer-socials a {
  display:inline-block;
  margin:0 12px 8px 0
}

.drawer-socials {
  margin-top:26px
}


}


.logo span,.hero .eyebrow {
  color:var(--wood)
}

.contact .eyebrow {
  color:var(--dark)
}


.process {
  background:var(--paper);
  border-top:1px solid var(--paper);
  border-bottom:1px solid var(--paper);
  display:block
}


.process h2,.process .timeline p {
  color:var(--dark)
}

.process h2 {
  text-align:center
}


.process .timeline b {
  color:var(--wood);
  text-align:center
}


.nav-cta:focus-visible,.button:focus-visible,.text-link:focus-visible,.slide-button:focus-visible,.nav-toggle:focus-visible,.footer-links a:focus-visible,.enquiry-form input:focus-visible,.enquiry-form textarea:focus-visible,.enquiry-form select:focus-visible,.calendar-nav:focus-visible,.calendar-days button:focus-visible {
  outline:3px solid var(--black);
  outline-offset:3px
}

.booking-page {
  min-height:100vh;
  background:var(--paper)
}

.booking-main {
  width:100%;
  max-width:960px;
  margin:0 auto;
  padding:100px 6vw 140px
}

.booking-intro {
  max-width:700px;
  margin:0 auto 60px;
  text-align:center
}

.booking-intro h1,
.confirmation h1 {
  margin:20px 0 25px;
  color:var(--dark);
  font-size:clamp(42px,6vw,78px);
  line-height:.96;
  letter-spacing:-4px
}

.booking-intro > p:last-child,
.confirmation > p:not(.eyebrow) {
  max-width:600px;
  margin:0 auto;
  color:var(--muted);
  font-size:18px
}

.enquiry-form {
  max-width:760px;
  margin:0 auto;
  padding:40px;
  background:var(--soft);
  border:1px solid var(--line)
}

.form-grid {
  display:grid;
  gap:24px
}

.form-grid-two {
  grid-template-columns:1fr 1fr
}

.enquiry-form label,
.availability-fieldset legend {
  display:block;
  color:var(--dark);
  font-size:14px;
  font-weight:800
}

.enquiry-form label > span,
.availability-fieldset legend::after {
  color:var(--wood)
}

.enquiry-form input:not([type="checkbox"]),
.enquiry-form textarea,
.enquiry-form select {
  display:block;
  width:100%;
  margin-top:8px;
  padding:13px 14px;
  background:var(--light);
  border:1px solid var(--line);
  border-radius:3px;
  color:var(--dark);
  font:inherit
}

.enquiry-form textarea {
  resize:vertical
}

.availability-fieldset {
  margin:28px 0;
  padding:24px;
  border:1px solid var(--line)
}

.field-help {
  margin:6px 0 20px;
  color:var(--muted);
  font-size:14px
}

.calendar {
  max-width:420px;
  margin:0 auto 22px
}

.calendar.is-disabled {
  opacity:.45;
  pointer-events:none
}

.calendar-header,
.calendar-weekdays,
.calendar-days {
  display:grid;
  grid-template-columns:repeat(7,1fr);
  gap:6px
}

.calendar-header {
  grid-template-columns:40px 1fr 40px;
  align-items:center;
  margin-bottom:14px;
  text-align:center
}

.calendar-nav,
.calendar-days button {
  border:1px solid var(--line);
  background:var(--light);
  color:var(--dark);
  cursor:pointer
}

.calendar-nav {
  width:34px;
  height:34px;
  border-radius:50%
}

.calendar-weekdays {
  margin-bottom:6px;
  color:var(--muted);
  font-size:11px;
  font-weight:800;
  text-align:center;
  text-transform:uppercase
}

.calendar-days button,
.calendar-days > span {
  min-height:38px;
  padding:8px 4px;
  border-radius:3px;
  text-align:center
}

.calendar-days button:disabled {
  opacity:.35;
  cursor:not-allowed
}

.calendar-days button.is-selected {
  background:var(--wood);
  border-color:var(--wood);
  color:var(--light)
}

.time-label {
  max-width:420px;
  margin:0 auto 20px
}

.checkbox-label {
  display:flex !important;
  align-items:center;
  justify-content:center;
  gap:10px;
  cursor:pointer
}

.privacy-check {
  display:flex !important;
  align-items:flex-start;
  justify-content:center;
  gap:10px;
  margin:0 0 24px;
  font-weight:400 !important
}

.privacy-check input {
  width:18px;
  height:18px;
  margin-top:2px;
  accent-color:var(--wood)
}

.privacy-check a {
  text-decoration:underline;
  text-underline-offset:3px;
  font-weight:800
}

.sensitive-data-note {
  display:block;
  margin:8px 0 0;
  color:var(--muted);
  font-size:13px;
  font-weight:400;
  line-height:1.45
}

.form-honeypot {
  position:absolute;
  left:-10000px;
  width:1px;
  height:1px;
  overflow:hidden
}

.checkbox-label input {
  width:18px;
  height:18px;
  accent-color:var(--wood)
}

.form-submit {
  display:block;
  margin:0 auto
}

.form-status {
  min-height:24px;
  margin:18px 0 0;
  color:var(--dark);
  text-align:center
}

.confirmation {
  max-width:700px;
  margin:0 auto;
  padding:18vh 6vw;
  text-align:center
}

.confirmation .button {
  display:inline-block;
  margin-top:32px
}

.admin-main {
  width:100%;
  max-width:960px;
  margin:0 auto;
  padding:90px 6vw 140px
}

.admin-login {
  max-width:520px;
  margin:0 auto;
  text-align:center
}

.admin-login h1,
.admin-header h1 {
  margin:20px 0 35px;
  color:var(--dark);
  font-size:clamp(42px,6vw,76px);
  line-height:.96;
  letter-spacing:-4px
}

.admin-login .enquiry-form {
  text-align:left
}

.admin-header {
  display:flex;
  align-items:end;
  justify-content:space-between;
  margin-bottom:45px
}

.admin-header h1 {
  margin-bottom:0
}

.admin-header > p {
  color:var(--muted);
  font-weight:800
}

.enquiry-list {
  display:grid;
  gap:18px
}

.enquiry-card {
  padding:26px 30px;
  background:var(--soft);
  border:1px solid var(--line)
}

.enquiry-card header {
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:20px;
  margin-bottom:16px;
  padding-bottom:12px;
  border-bottom:1px solid var(--line)
}

.enquiry-card h2 {
  margin:0;
  color:var(--dark);
  font-size:24px
}

.enquiry-card time,
.enquiry-card p {
  color:var(--muted);
  font-size:14px
}

.enquiry-card p {
  margin:8px 0
}

.enquiry-card strong {
  color:var(--dark)
}

.enquiry-card .enquiry-reason {
  margin-top:18px;
  color:var(--dark);
  white-space:normal
}

.empty-state {
  padding:40px;
  background:var(--soft);
  color:var(--muted);
  text-align:center
}

.legal-page {
  min-height:100vh;
  background:var(--paper)
}

.legal-main {
  width:100%;
  max-width:880px;
  margin:0 auto;
  padding:80px 6vw 120px
}

.legal-main h1 {
  margin:18px 0 28px;
  color:var(--dark);
  font-size:clamp(42px,6vw,72px);
  line-height:.98;
  letter-spacing:-3px
}

.legal-main h2 {
  margin:42px 0 12px;
  color:var(--dark);
  font-size:26px
}

.legal-main p,
.legal-main li {
  color:var(--muted)
}

.legal-main a {
  color:var(--dark);
  font-weight:800;
  text-decoration:underline;
  text-underline-offset:3px
}

.legal-main .legal-intro {
  max-width:680px;
  color:var(--dark);
  font-size:19px
}

.info-page {
  min-height:100vh;
  background:var(--paper)
}

.info-main {
  width:100%;
  max-width:1200px;
  margin:0 auto
}

.info-hero {
  max-width:1200px;
  padding:105px 10vw 115px;
  background:var(--main);
  color:var(--light)
}

.info-hero h1,
.info-cta h2 {
  max-width:780px;
  margin:18px 0 25px;
  font-size:clamp(46px,7vw,86px);
  line-height:.94;
  letter-spacing:-4px
}

.info-hero > p:last-child {
  max-width:640px;
  color:#d9dfd1;
  font-size:20px
}

.info-grid,
.service-list {
  display:grid;
  max-width:960px;
  margin:0 auto;
  padding:100px 6vw;
  gap:18px
}

.info-grid {
  grid-template-columns:repeat(3,1fr)
}

.info-grid article,
.service-list article {
  border-top:2px solid var(--wood);
  padding:22px 0
}

.info-grid span,
.service-list span {
  color:var(--wood);
  font-weight:900
}

.info-grid h2,
.service-list h2 {
  margin:16px 0 10px;
  color:var(--dark);
  font-size:28px;
  line-height:1.05
}

.info-grid p,
.service-list p,
.info-cta p {
  color:var(--muted)
}

.service-list {
  gap:0
}

.service-list article {
  display:grid;
  grid-template-columns:80px 1fr;
  gap:20px
}

.service-list h2 {
  margin-top:0;
  font-size:34px
}

.service-list p {
  max-width:600px;
  margin-bottom:0;
  font-size:18px
}

.info-cta {
  padding:90px 10vw;
  background:var(--soft)
}

.info-cta h2 {
  max-width:850px;
  color:var(--dark)
}

.info-cta > p:not(.eyebrow) {
  max-width:620px;
  font-size:18px
}

.info-cta .button {
  display:inline-block;
  margin-top:12px
}

@media(max-width:700px) {
  .info-hero {
    padding:70px 6vw 78px
  }

  .info-grid {
    grid-template-columns:1fr;
    padding:70px 6vw
  }

  .service-list {
    padding:70px 6vw
  }

  .info-cta {
    padding:70px 6vw
  }
}

@media(max-width:600px) {
  .drawer-socials {
    margin-top:26px
  }
}

@media (prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto
  }

  .slide {
    transition:none
  }
}

@media(max-width:600px) {
  .booking-main {
    padding-top:70px
  }

  .enquiry-form {
    padding:24px
  }

  .form-grid-two {
    grid-template-columns:1fr
  }

  .availability-fieldset {
    padding:16px
  }

  .admin-main {
    padding-top:70px
  }

  .admin-header,
  .enquiry-card header {
    display:block
  }

  .admin-header > p,
  .enquiry-card time {
    display:block;
    margin-top:10px
  }

  .enquiry-card {
    padding:22px
  }
}


/* =========================================================
   ALL STARR - LEGAL PAGE FINAL LAYOUT
   ========================================================= */

body.legal-page {
  min-height:100vh !important;
  display:flex !important;
  flex-direction:column !important;
  background:var(--paper) !important;
}

body.legal-page main.legal-main {
  flex:1 0 auto !important;
  display:block !important;
  box-sizing:border-box !important;
  width:calc(100% - 12vw) !important;
  max-width:1100px !important;
  min-width:0 !important;
  margin-left:auto !important;
  margin-right:auto !important;
  padding:80px 0 120px !important;
}

body.legal-page main.legal-main h1,
body.legal-page main.legal-main h2,
body.legal-page main.legal-main p,
body.legal-page main.legal-main li {
  box-sizing:border-box !important;
}

body.legal-page main.legal-main h1,
body.legal-page main.legal-main h2 {
  width:100% !important;
}

body.legal-page main.legal-main h1 {
  max-width:100% !important;
}

body.legal-page main.legal-main h2 {
  max-width:100% !important;
}

body.legal-page main.legal-main p {
  width:100% !important;
  max-width:900px !important;
}

body.legal-page main.legal-main p.legal-intro {
  max-width:850px !important;
}

body.legal-page footer {
  margin-top:auto !important;
  flex-shrink:0 !important;
}

@media (max-width:700px) {
  body.legal-page main.legal-main {
    width:calc(100% - 12vw) !important;
    padding:60px 0 80px !important;
  }

  body.legal-page main.legal-main p {
    max-width:100% !important;
  }
}