/* ============================================================
   Her Haus Aesthetics · herhausaesthetics.co.uk
   Brand: Haus Burgundy / Classic White / Powder Blue pop
   Type:  Imperial Script (logo) · Italianno (accents)
          Italiana (headings) · Cormorant Garamond (body)
          Montserrat (labels & buttons)
   ============================================================ */

:root{
  --burgundy:#5C1A1F;
  --burgundy-dark:#4A1216;
  --oxblood:#3B0F13;
  --white:#F7F6F2;      /* Classic White: page background   */
  --pure:#FFFFFF;       /* Pure White: cards & panels       */
  --powder:#C9D6E2;      /* the pop on burgundy backgrounds */
  --powder-deep:#A9BFD2; /* the pop on white backgrounds */
  --line:rgba(92,26,31,.22);
  --font-logo:'Imperial Script',cursive;
  --font-script:'Italianno',cursive;
  --font-display:'Italiana',serif;
  --font-body:'Cormorant Garamond',serif;
  --font-label:'Montserrat',sans-serif;
}

*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  background:var(--white);
  color:var(--oxblood);
  font-family:var(--font-body);
  font-size:1.19rem;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}

img{max-width:100%;display:block;}
a{color:var(--burgundy);}

/* ---------- utilities ---------- */
.container{max-width:1120px;margin:0 auto;padding:0 24px;}
.label{
  font-family:var(--font-label);
  font-size:.68rem;
  font-weight:500;
  letter-spacing:.32em;
  text-transform:uppercase;
  color:var(--burgundy);
}
.script-accent{
  font-family:var(--font-script);
  color:var(--burgundy);
  font-size:2.6rem;
  line-height:1;
}
.hairline{
  width:56px;height:0;
  border-top:1.5px solid var(--powder-deep);   /* the powder pop */
  margin:1.1rem 0 1.4rem;
}
.hairline.centered{margin-left:auto;margin-right:auto;}

/* ---------- buttons ---------- */
.btn{
  display:inline-block;
  font-family:var(--font-label);
  font-size:.7rem;
  font-weight:500;
  letter-spacing:.28em;
  text-transform:uppercase;
  text-decoration:none;
  padding:1rem 2.1rem;
  border:1px solid var(--burgundy);
  transition:background .25s ease,color .25s ease,border-color .25s ease;
  cursor:pointer;
}
.btn-solid{background:var(--burgundy);color:var(--white);}
.btn-solid:hover{background:var(--burgundy-dark);border-color:var(--burgundy-dark);}
.btn-outline{background:transparent;color:var(--burgundy);}
.btn-outline:hover{background:var(--burgundy);color:var(--white);}
.btn-powder{background:var(--powder-deep);color:var(--burgundy);border-color:var(--powder-deep);font-weight:600;}
.btn-powder:hover{background:#8BA5BD;border-color:#8BA5BD;color:var(--oxblood);}

/* ---------- header / nav ---------- */
.site-header{
  background:var(--white);
  border-bottom:1px solid var(--line);
  position:sticky;top:0;z-index:50;
}
.nav-wrap{
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  padding:.9rem 24px;max-width:1120px;margin:0 auto;
}
.nav-logo{justify-self:start;}
.nav-links{justify-self:center;}
.nav-book{justify-self:end;padding:.7rem 1.4rem;}
.nav-logo{
  font-family:var(--font-logo);
  font-weight:400;
  font-size:2.2rem;
  color:var(--burgundy);
  text-decoration:none;
  line-height:1;
}
.nav-links{display:flex;align-items:center;gap:2.2rem;list-style:none;}
.nav-links a:not(.btn){
  font-family:var(--font-label);
  font-size:.7rem;
  font-weight:400;
  letter-spacing:.26em;
  text-transform:uppercase;
  color:var(--oxblood);
  text-decoration:none;
  padding-bottom:4px;
  border-bottom:1.5px solid transparent;
  transition:border-color .2s ease,color .2s ease;
}
.nav-links a:not(.btn):hover,
.nav-links a:not(.btn)[aria-current="page"]{
  border-bottom-color:var(--powder-deep); /* the powder pop */
  color:var(--burgundy);
}
.nav-links .btn{padding:.7rem 1.4rem;}
.nav-toggle{
  display:none;background:none;border:none;cursor:pointer;
  font-family:var(--font-label);font-size:.7rem;letter-spacing:.26em;
  text-transform:uppercase;color:var(--burgundy);
}

/* ---------- hero (reversed: logo on burgundy panel) ---------- */
.hero{
  text-align:center;
  padding:6.5rem 24px 5.5rem;
  background:var(--burgundy);
}
.hero-script{
  display:block;
  font-weight:400;
  font-family:var(--font-logo);
  font-size:clamp(4.6rem,10.5vw,7.8rem);
  color:var(--white);
  line-height:.9;
}
.hero-haus{
  display:block;
  font-weight:400;
  font-family:var(--font-display);
  font-size:clamp(1.9rem,4vw,3rem);
  letter-spacing:.16em;
  text-indent:.16em;
  color:var(--white);
  margin-top:-.4rem;
}
.hero-sub{
  margin-top:1.6rem;
  font-family:var(--font-label);
  font-size:.8rem;
  font-weight:600;
  letter-spacing:.3em;
  text-transform:uppercase;
  color:#D8E4EF;                    /* the powder pop, brightened for depth */
}
.hero-btns{margin-top:2.6rem;display:flex;gap:1rem;justify-content:center;flex-wrap:wrap;}
.hero .btn-solid{
  background:var(--white);color:var(--burgundy);border-color:var(--white);
}
.hero .btn-solid:hover{background:var(--powder);border-color:var(--powder);color:var(--burgundy);}
.hero .btn-outline{
  color:var(--white);border-color:rgba(247,246,242,.7);
}
.hero .btn-outline:hover{background:var(--white);color:var(--burgundy);border-color:var(--white);}
.hero .btn-powder{background:var(--powder-deep);color:var(--burgundy);border-color:var(--powder-deep);}
.hero .btn-powder:hover{background:#8BA5BD;border-color:#8BA5BD;}

/* ---------- trust strip (inverted: white on white page, hairline-framed) ---------- */
.trust-strip{
  background:var(--white);
  border-bottom:1px solid var(--line);
}
.trust-strip .container{
  display:flex;justify-content:space-between;align-items:center;
  gap:1.5rem;padding:1.1rem 24px;flex-wrap:wrap;
}
.trust-strip span{
  font-family:var(--font-label);
  font-size:.62rem;
  letter-spacing:.26em;
  text-transform:uppercase;
  color:var(--burgundy);
}

/* ---------- sections ---------- */
.section{padding:5.5rem 0;}
.section-head{max-width:640px;}
.section-head.centered{margin:0 auto;text-align:center;}
.section-title{
  font-family:var(--font-display);
  font-weight:400;
  font-size:2.1rem;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--burgundy);
  margin-top:.6rem;
}
.section p + p{margin-top:1rem;}

/* ---------- home intro (two column) ---------- */
.intro-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:4rem;align-items:center;
}
.intro-panel{
  background:var(--burgundy);
  color:var(--white);
  padding:3.6rem 3rem;
  text-align:center;
}
.intro-panel .big-script{
  font-family:var(--font-script);
  font-size:2.9rem;
  line-height:1.15;
  color:var(--white);
}
.intro-panel .attr-line{
  width:34px;margin:1.6rem auto 0;
  border-top:1.5px solid var(--powder);   /* the powder pop */
}
.intro-panel .label{color:#D8E4EF;font-weight:600;margin-top:1rem;display:block;}

/* ---------- treatment cards ---------- */
.cards{
  display:grid;grid-template-columns:repeat(3,1fr);gap:1.6rem;margin-top:3rem;
}
.card{
  background:var(--pure);
  border:1px solid var(--line);
  border-top:2px solid var(--burgundy);
  padding:2.2rem 1.9rem;
  display:flex;flex-direction:column;
}
.card h3{
  font-family:var(--font-display);
  font-weight:400;
  font-size:1.25rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--burgundy);
}
.card .card-line{width:34px;border-top:1.5px solid var(--powder-deep);margin:.9rem 0 1rem;}
.card p{font-size:1.05rem;line-height:1.6;}
.card .card-note{
  margin-top:auto;padding-top:1.2rem;
  font-family:var(--font-label);
  font-size:.62rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--burgundy);
}

/* ---------- review ---------- */
.review{
  background:var(--burgundy);
  color:var(--white);
  text-align:center;
}
.review .container{max-width:820px;padding-top:5rem;padding-bottom:5rem;}
.review .big-script{
  font-family:var(--font-script);
  font-size:3rem;
  color:#D8E4EF;                     /* the powder pop */
  line-height:1;
}
.review blockquote{
  margin-top:1.8rem;
  font-size:1.28rem;
  line-height:1.7;
  font-style:italic;
}
.review cite{
  display:block;margin-top:1.6rem;
  font-family:var(--font-label);font-style:normal;
  font-size:.66rem;letter-spacing:.3em;text-transform:uppercase;
  color:rgba(247,246,242,.85);
}

/* ---------- about page ---------- */
.about-grid{display:grid;grid-template-columns:5fr 7fr;gap:4rem;align-items:start;}
.about-photo{
  background:var(--pure);
  border:1px solid var(--line);
  aspect-ratio:4/5;
  display:flex;align-items:center;justify-content:center;
  text-align:center;padding:2rem;
}
.about-photo .label{opacity:.6;}
.checklist{list-style:none;margin-top:1.6rem;}
.checklist li{
  padding:.85rem 0 .85rem 1.6rem;
  border-bottom:1px solid var(--line);
  position:relative;
  font-size:1.08rem;
}
.checklist li::before{
  content:"";
  position:absolute;left:0;top:1.35rem;
  width:9px;height:9px;
  background:var(--powder-deep);           /* the powder pop */
}

/* ---------- contact ---------- */
.contact-grid{display:grid;grid-template-columns:5fr 7fr;gap:4rem;align-items:start;}
.contact-form{
  background:var(--pure);
  border:1px solid var(--line);
  padding:2.6rem;
}
.form-row{margin-bottom:1.4rem;}
.form-row label{
  display:block;
  font-family:var(--font-label);
  font-size:.64rem;font-weight:500;
  letter-spacing:.24em;text-transform:uppercase;
  color:var(--burgundy);
  margin-bottom:.5rem;
}
.form-row input,
.form-row select,
.form-row textarea{
  width:100%;
  font-family:var(--font-body);
  font-size:1.08rem;
  color:var(--oxblood);
  background:var(--white);
  border:1px solid var(--line);
  padding:.85rem 1rem;
  outline:none;
  transition:border-color .2s ease,box-shadow .2s ease;
}
.form-row input:focus,
.form-row select:focus,
.form-row textarea:focus{
  border-color:var(--powder-deep);         /* the powder pop */
  box-shadow:0 0 0 3px rgba(169,191,210,.4);
}
.form-consent{
  display:flex;gap:.7rem;align-items:flex-start;
  font-size:.98rem;line-height:1.5;margin-bottom:1.6rem;
}
.form-consent input{margin-top:.35rem;}
.form-status{margin-top:1.2rem;font-size:1.05rem;display:none;}
.form-status.ok{display:block;color:var(--burgundy);}
.form-status.err{display:block;color:#8a1f1f;}
.hp-field{position:absolute;left:-9999px;opacity:0;height:0;overflow:hidden;}

/* ---------- footer ---------- */
.site-footer{
  background:var(--burgundy);
  color:var(--white);
  margin-top:4rem;
}
.footer-main{
  display:grid;grid-template-columns:1fr 1fr 1fr;gap:3rem;
  padding:4rem 24px 3rem;max-width:1120px;margin:0 auto;
}
.footer-logo{display:flex;flex-direction:column;align-items:flex-start;}
.fl-script{font-family:var(--font-logo);font-weight:400;font-size:3.8rem;line-height:.85;color:var(--white);}
.fl-haus{
  font-family:var(--font-display);
  font-size:1.15rem;letter-spacing:.34em;text-indent:.34em;
  color:var(--white);
  border:1.5px solid rgba(247,246,242,.9);
  padding:.4rem .85rem .3rem;
  margin-top:8px;
}
.site-footer h4{
  font-family:var(--font-label);
  font-size:.68rem;font-weight:600;
  letter-spacing:.3em;text-transform:uppercase;
  color:#D8E4EF;                           /* the powder pop, brightened */
  margin-bottom:1rem;
}
.site-footer ul{list-style:none;}
.site-footer li{margin-bottom:.55rem;font-size:1.02rem;}
.site-footer a{color:rgba(247,246,242,.92);text-decoration:none;border-bottom:1px solid transparent;}
.site-footer a:hover{border-bottom-color:var(--powder);}
.footer-bar{
  border-top:1px solid rgba(247,246,242,.2);
  padding:1.2rem 24px;
  text-align:center;
  font-family:var(--font-label);
  font-size:.6rem;letter-spacing:.24em;text-transform:uppercase;
  color:rgba(247,246,242,.6);
}

/* ---------- responsive ---------- */
@media (max-width:860px){
  .intro-grid,.about-grid,.contact-grid{grid-template-columns:1fr;gap:2.5rem;}
  .cards{grid-template-columns:1fr;}
  .footer-main{grid-template-columns:1fr;gap:2.2rem;}
  .nav-links{
    display:none;
    position:absolute;top:100%;left:0;right:0;
    background:var(--white);
    border-bottom:1px solid var(--line);
    flex-direction:column;
    padding:1.4rem 24px 1.8rem;
    gap:1.2rem;
  }
  .nav-links.open{display:flex;}
  .nav-toggle{display:block;margin-left:auto;}
  .nav-wrap{display:flex;justify-content:space-between;gap:1rem;}
  .nav-book{padding:.6rem 1rem;}
  .trust-strip .container{justify-content:center;text-align:center;}
}