/* MITOHA: warm ink as the main colour, coral only for actions */
body{letter-spacing:.05em;font-feature-settings:"palt"}
h1,h2,h3{font-weight:500}
:focus-visible{outline-color:var(--color-ink)}

.header-cta{background:transparent;border-radius:0;border-bottom:2px solid var(--color-coral);padding:.35rem 0;color:var(--color-ink);font-size:var(--step-0);font-weight:700}
.header-cta:hover{transform:none;color:var(--color-ink)}
.site-menu nav a:focus-visible,.footer :focus-visible,.booking :focus-visible{outline-color:var(--color-yellow)}

.hero{height:clamp(40rem,calc(100svh - 5rem),47.5rem);min-height:0;background:var(--color-base)}
.hero picture{z-index:-2}
.hero::after{display:none}
.hero__copy{width:var(--inner);margin-inline:auto;padding-top:clamp(7rem,12vw,10.5rem);position:relative;z-index:1}
.hero h1{max-width:none;font-size:clamp(4.25rem,5.5vw,5.7rem);line-height:1.05;letter-spacing:-.02em}
.hero h1 span:last-child{color:var(--color-ink)}
.hero__copy>p:not(.eyebrow){font-size:var(--step-1);max-width:none;white-space:nowrap;margin:var(--space-lg) 0 var(--space-xl)}
.hero__note{right:max(4vw,calc((100vw - 70rem)/2));bottom:var(--space-xl);z-index:1;color:var(--color-ink)}

.section--plum{background:var(--color-ink);color:var(--color-base);border-top:1px solid var(--color-ink)}
.section--plum h2{color:var(--color-yellow)}
.section--pale{background:var(--color-base);border-top:1px solid var(--color-ink)}
.section-no,.intro h2 span{color:var(--color-ink)}

.style-grid{grid-template-columns:repeat(2,1fr);gap:var(--space-xl);background:none;border:0}
.style-card{min-height:0;padding:0;background:transparent;color:var(--color-base);display:block;overflow:visible}
.style-card::after{display:none}
.style-card img{position:static;display:block;width:100%;height:auto;aspect-ratio:3/4;object-fit:cover;object-position:center;z-index:auto}
.style-card>div{height:auto;padding:var(--space-md) 0 var(--space-sm);display:grid;gap:.35rem;border-bottom:1px solid rgba(251,248,240,.55)}
.style-card h3{font-size:var(--step-2)}
.style-card span{opacity:.84}

.stylist-grid{grid-template-columns:repeat(2,1fr);gap:var(--space-xl) var(--space-3xl)}
.stylist-grid article{display:grid;grid-template-columns:6.5rem 1fr;column-gap:var(--space-md);align-items:start;border-top:1px solid var(--color-ink);padding-top:var(--space-md)}
.stylist-grid .avatar{grid-row:1 / span 3;width:6.5rem;height:8rem;border-radius:0;object-fit:cover}
.stylist-grid p{margin:0 0 var(--space-xs)}
.stylist-grid h3{margin-bottom:var(--space-xs)}

.flow ol{border-left-color:var(--color-ink)}
.flow li span{background:var(--color-ink)}
.access{background:var(--color-base);border-top:1px solid var(--color-ink)}
.access__grid{gap:var(--space-2xl)}
.access .eyebrow::before{content:"";display:inline-block;width:2.5rem;height:.5rem;margin-right:.6rem;background:var(--color-yellow)}
.text-link--demo{cursor:default;text-decoration:none;border-bottom:2px solid var(--color-ink);padding-bottom:.25rem}

.booking{background:var(--color-ink);color:var(--color-base);border-top:1px solid var(--color-ink)}
.booking .eyebrow,.booking h2,.booking-demo-note{color:var(--color-base)}
.booking-form{background:var(--color-base);color:var(--color-ink);border:0;border-top:3px solid var(--color-coral);border-radius:0}
.booking-demo-note{font-size:var(--step--1);margin-top:var(--space-lg);opacity:.85}
.booking-links{display:grid;gap:.5rem;margin-top:var(--space-lg);max-width:19rem}.booking-links a{display:flex;justify-content:space-between;align-items:center;padding:.8rem 1rem;background:var(--color-coral);color:var(--color-ink);font-weight:700;text-decoration:none}.booking-links a:hover{transform:translateX(.2rem)}.check a{text-decoration:underline;text-underline-offset:.24em}.staff-days{display:block;margin-top:.55rem;color:var(--color-ink);font-size:var(--step--1);font-weight:700}
.check{align-items:start;line-height:1.5}
.check input{width:1.25rem;height:1.25rem;flex:0 0 auto;margin:.1rem 0 0}
.header-cta,.button{font-size:var(--step-0);font-weight:700}
.button--plum,.button:disabled{background:var(--color-coral);color:var(--color-ink);cursor:not-allowed;opacity:1}

@media(max-width:700px){
  .hero{height:calc(100svh - 4.5rem);min-height:37rem}
  .hero picture img{object-position:70% 35%}
  .hero::after{display:block;background:linear-gradient(180deg,rgba(251,248,240,.88) 0%,rgba(251,248,240,.12) 44%,rgba(251,248,240,.48) 100%);z-index:-1}
  .hero__copy{padding-top:3rem}
  .hero h1{font-size:clamp(2.7rem,11vw,3.05rem);line-height:1.1;letter-spacing:0}
  .hero__copy>p:not(.eyebrow){font-size:var(--step-0);white-space:normal;margin:var(--space-md) 0 var(--space-lg)}
  .hero__note{right:var(--space-sm);bottom:var(--space-sm)}
  .style-grid,.stylist-grid{grid-template-columns:1fr;gap:var(--space-xl)}
  .style-card img{height:auto}
  .stylist-grid article{grid-template-columns:5.25rem 1fr}
  .stylist-grid .avatar{width:5.25rem;height:6.5rem}
  .access__grid{gap:var(--space-xl)}
}
