/*
 * The Loft — warm studio theme
 * Brings the site in line with the refreshed salon: warm-white base, earthy
 * neutrals, and pops of burnt orange, teal and leafy green (brand kit V3).
 *
 * Loaded after each page's inline styles. Every rule is scoped under
 * `html body :is(<page roots>)` so it outranks the page's own `#root .x`
 * selectors without needing to touch them.
 */

html body :is(#loft-home,#loft-about,#loft-services-page,#loft-portfolio,#loft-contact,#loft-blog,#loft-post){
  /* Brand kit palette */
  --ink:#2f2926;          /* warm charcoal (text) */
  --ink-soft:#5f524a;
  --cream:#f3ece6;        /* brand warm white */
  --cream-light:#faf6f1;
  --sand:#ede3d5;         /* deeper cream for alternating sections */
  --clay:#b75a34;         /* brand burnt orange */
  --clay-dark:#96462a;
  --rose:#d9b79c;         /* brand blush */
  --caramel:#c7885a;
  --sage:#6e7d66;         /* brand sage, deepened for text */
  --teal:#5e8d95;         /* brand teal */
  --teal-deep:#3f6b73;    /* teal for light-on-colour sections */
  --leaf:#56704c;         /* leafy green from the studio plants */
  --line:rgba(47,41,38,.14);

  background:var(--cream-light);

  /* ---------- Shared chrome ---------- */

  ::selection{background:var(--clay);color:var(--cream-light)}
  .loft-grain{opacity:.03}

  .loft-topbar{background:var(--teal-deep);color:var(--cream-light)}
  .loft-marquee__track i{background:var(--rose)}

  .loft-header{color:var(--ink)}
  .loft-header.is-sticky{background:rgba(250,246,241,.94)}
  .loft-header .loft-brand img,
  .loft-header.is-sticky .loft-brand img{filter:none!important}
  .loft-header-book{color:var(--clay)}

  .loft-mobile-menu{background:var(--teal-deep);color:var(--cream-light)}
  .loft-mobile-menu .loft-mobile-book{border-color:rgba(255,255,255,.5)}

  .loft-btn--dark{background:var(--teal-deep);color:var(--cream-light)}
  .loft-btn--dark .loft-btn__circle{background:var(--clay);color:#fff}
  .loft-btn--dark:hover{background:var(--ink);color:var(--cream-light)}
  .loft-btn--outline .loft-btn__circle{background:var(--teal-deep);color:var(--cream-light)}
  .loft-btn--outline:hover{background:var(--teal-deep);border-color:var(--teal-deep);color:var(--cream-light)}

  .loft-image-reveal:after{background:var(--sand)}
  .loft-cursor.is-hover{background:rgba(183,90,52,.14)}

  /* Photo captions: warm brown fade instead of near-black */
  .loft-ribbon__item figcaption,
  .about-gallery figcaption{background:linear-gradient(transparent,rgba(58,40,30,.72))}

  /* ---------- Heroes: warm white instead of solid terracotta ---------- */

  :is(.loft-hero,.about-hero,.services-hero,.portfolio-hero,.contact-hero){
    background:var(--cream);
    color:var(--ink)!important;
  }
  :is(.loft-hero,.about-hero,.services-hero,.portfolio-hero,.contact-hero) h1{color:var(--ink)!important}
  :is(.loft-hero__title,.about-hero h1,.services-hero h1,.portfolio-hero h1,.contact-hero h1) em{color:var(--clay)!important}
  :is(.loft-hero,.about-hero,.services-hero,.portfolio-hero,.contact-hero) .loft-eyebrow{color:var(--clay)!important}
  :is(.loft-hero__intro,.about-hero__intro,.services-hero__intro,.portfolio-hero__copy>p,.contact-hero__intro){color:var(--ink-soft)!important}
  :is(.loft-hero,.about-hero,.services-hero,.portfolio-hero,.contact-hero) .loft-text-link,
  :is(.loft-hero,.about-hero,.services-hero,.portfolio-hero,.contact-hero) .loft-arrow-link{color:var(--ink)!important;border-color:var(--ink)}
  :is(.loft-hero,.about-hero,.services-hero,.portfolio-hero,.contact-hero) .loft-btn--dark{background:var(--clay);color:#fff}
  :is(.loft-hero,.about-hero,.services-hero,.portfolio-hero,.contact-hero) .loft-btn--dark .loft-btn__circle{background:var(--teal-deep)}
  :is(.loft-hero,.about-hero,.services-hero,.portfolio-hero,.contact-hero) .loft-btn--dark:hover{background:var(--clay-dark)}
  .contact-hero .loft-btn--light{background:var(--clay);color:#fff!important}
  .contact-hero .loft-btn--light .loft-btn__circle{background:var(--teal-deep);color:#fff}

  /* Home hero details */
  .loft-hero:before{background:linear-gradient(115deg,transparent 0 48%,rgba(183,90,52,.55) 48.1% 48.25%,transparent 48.4%)}
  .loft-hero__orb{border-color:var(--clay);opacity:.22}
  .loft-stars{color:var(--clay)}
  .loft-rating small,.loft-hero__trust p{color:var(--ink-soft)}
  .loft-trust-divider{background:var(--line)}
  .loft-vertical-copy,.about-hero__line{color:rgba(47,41,38,.5)}
  .loft-scroll-cue{color:var(--ink-soft)}
  .loft-scroll-cue i{background:var(--line)}
  .loft-scroll-cue i:after{background:var(--clay)}
  .loft-hero__arch{box-shadow:0 30px 80px rgba(92,58,36,.22)}
  .loft-hero__image-shade{background:linear-gradient(to bottom,rgba(60,35,20,0),rgba(60,35,20,.12))}
  .loft-floating-card{background:rgba(255,251,246,.96)}


  /* About hero */
  .about-hero__image{box-shadow:0 30px 80px rgba(92,58,36,.22)}

  /* Services / contact heroes: full-bleed photo on the right */
  .services-hero__visual:after{background:var(--sand)!important}
  :is(.services-hero__copy,.contact-hero__copy,.portfolio-hero__copy){position:relative}
  :is(.services-hero__copy,.contact-hero__copy,.portfolio-hero__copy):before{
    content:"";position:absolute;pointer-events:none;z-index:0;
    right:3%;bottom:0;width:min(250px,30%);aspect-ratio:3/4;
    background:url("/images/plant-bird-of-paradise.webp") right bottom/contain no-repeat;
    filter:drop-shadow(0 10px 12px rgba(60,40,25,.18));
  }
  .contact-hero__copy:before{background-image:url("/images/plant-palm.webp");width:min(270px,32%)}
  .portfolio-hero__copy:before{
    top:95px;bottom:auto;right:6%;width:min(230px,30%);aspect-ratio:1;
    background:url("/images/plant-trailing-vine.webp") right top/contain no-repeat;filter:none;
  }
  :is(.services-hero__copy,.contact-hero__copy,.portfolio-hero__copy)>*{position:relative;z-index:1}

  /* Portfolio hero */
  .portfolio-hero__small{border-color:var(--cream)}
  .portfolio-hero__main{box-shadow:0 30px 80px rgba(92,58,36,.22)}

  /* ---------- Former charcoal sections ---------- */

  /* Image backdrops → soft sand */
  :is(.loft-story__visual,.about-editorial,.about-craft__images,.contact-map-wrap){background:var(--sand)}
  :is(.loft-story__image-small,.about-editorial__small,.about-craft__image-small){border-color:var(--sand)}
  .loft-story__stamp{border-color:rgba(183,90,52,.45);color:var(--clay)}
  .about-editorial:after{background:var(--teal-deep)}
  .about-editorial__quote{text-shadow:none}
  .about-editorial__quote span{color:var(--rose)}

  /* Text-on-colour sections → brand teal */
  :is(.loft-services,.services-specialisms,.perm-details__consult,.contact-card--dark,.loft-contact-card){background:var(--teal-deep)}
  .loft-services .loft-section-title em,
  .services-specialisms .loft-section-title em{color:var(--rose)}
  .loft-section-head__copy,
  .loft-service-row>p{color:rgba(255,255,255,.82)}
  .loft-service-row__number,
  .loft-service-row__title small{color:rgba(255,255,255,.7)}
  .loft-service-row:hover{color:var(--rose)}
  .loft-service-row__image{box-shadow:0 22px 50px rgba(20,40,45,.35)}
  .loft-services .loft-btn--cream .loft-btn__circle{background:var(--clay)}
  .perm-details__consult p,
  .contact-card--dark p{color:rgba(255,255,255,.84)!important}
  .loft-contact-card>a small{color:rgba(255,255,255,.72)}
  .loft-contact-card__button{background:var(--clay)}
  .specialism-list span{color:var(--rose)}

  /* Leafy green: portfolio strip */
  .portfolio-feature-strip{background:var(--leaf)}
  .portfolio-feature-strip p{color:rgba(255,255,255,.84)!important}

  /* Perm feature + Wella: calm sand sections with dark type */
  :is(.perm-feature,.wella-section){background:var(--sand);color:var(--ink)!important}
  :is(.perm-feature,.wella-section) :is(h2,.perm-lead){color:var(--ink)!important}
  :is(.perm-feature,.wella-section) .loft-section-title em{color:var(--clay)!important}
  :is(.perm-feature,.wella-section) .loft-kicker{color:var(--clay)!important}
  .perm-feature__copy>p:not(.loft-kicker):not(.perm-lead),
  .wella-section__copy>p:not(.loft-kicker),
  .perm-note p{color:var(--ink-soft)!important}
  .perm-note{border-color:var(--line)}
  .perm-note strong{color:var(--teal-deep)}
  .perm-feature__stamp{background:var(--cream-light)}

  .services-specialisms .loft-kicker,
  .perm-details__consult .loft-kicker{color:var(--rose)!important}

  /* Burnt-orange sections stay as the brand pop, with clearer body copy */
  :is(.loft-booking,.about-booking,.services-booking,.portfolio-booking,.contact-booking){background:var(--clay)}
  :is(.loft-type-marquee,.about-marquee){background:var(--clay)}
  .loft-booking__copy>p:not(.loft-kicker):not(.loft-booking__note),
  .about-booking__copy>p:not(.loft-kicker),
  .services-booking p:not(.loft-kicker),
  .portfolio-booking>div:last-child p,
  .contact-booking__copy>p{color:rgba(255,255,255,.9)!important}
  .loft-booking__note{color:rgba(255,255,255,.85)}
  .services-booking .loft-btn--dark{background:var(--teal-deep)}
  .services-booking .loft-btn--dark .loft-btn__circle{background:var(--cream);color:var(--ink)}

  /* Light sections: a touch warmer */
  .loft-review{background:linear-gradient(rgba(243,236,230,.9),rgba(243,236,230,.9)),url("/images/bg-monstera-light.jpg") right center/cover no-repeat}
  .loft-review:before{color:rgba(183,90,52,.08)}
  .loft-visit__perks{color:var(--leaf)}
  .loft-feature>span{color:var(--teal)}
  .service-nav a:hover{background:var(--teal-deep);border-color:var(--teal-deep);color:var(--cream-light)!important}
  .service-row--consult{background:rgba(94,141,149,.08)}

  /* ---------- Footer: leafy green with trailing plants ---------- */

  .loft-footer{position:relative;overflow:visible;background:var(--leaf);color:var(--cream-light)}
  .loft-footer__statement em,
  .loft-footer__middle nav span,
  .loft-footer__newsletter>span{color:var(--rose)}
  .loft-footer__middle nav a:hover{color:var(--rose)}
  .loft-footer__newsletter p{color:rgba(255,255,255,.78)}
  .loft-footer__newsletter input::placeholder{color:rgba(255,255,255,.6)}
  .loft-footer__bottom{color:rgba(255,255,255,.72)}
  .loft-footer__top,.loft-footer__bottom{border-color:rgba(255,255,255,.2)}
  .loft-social-icons a{border-color:rgba(255,255,255,.35)}
  .loft-social-icons a:hover{background:var(--clay);border-color:var(--clay)}
}

@media (max-width:760px){
  html body :is(#loft-home,#loft-about,#loft-services-page,#loft-portfolio,#loft-contact,#loft-blog,#loft-post){
    :is(.services-hero__copy,.contact-hero__copy,.portfolio-hero__copy):before{display:none}
  }
}

/* Home: a potted plant standing on the footer edge, in front of the visit section */
html body #loft-home .loft-visit{padding-bottom:240px}
html body #loft-home .loft-footer:before{
  content:"";position:absolute;right:clamp(16px,6vw,96px);top:-200px;width:200px;height:200px;pointer-events:none;
  background:url("/images/plant-potted-calathea.webp") center bottom/contain no-repeat;
  filter:drop-shadow(0 10px 10px rgba(30,40,25,.2));
}
@media (max-width:760px){
  html body #loft-home .loft-visit{padding-bottom:190px}
  html body #loft-home .loft-footer:before{width:150px;height:150px;top:-150px}
}

/* Services price list: package contents under the service name */
html body #loft-services-page .service-row>span:first-child small{display:block;margin-top:4px;font-size:11px;letter-spacing:.02em}

/* Services + contact heroes run their photo to the top edge; keep the nav readable over it */
html body :is(#loft-services-page,#loft-contact) .loft-header:not(.is-sticky){
  background:rgba(243,236,230,.92);backdrop-filter:blur(14px);border-bottom:1px solid var(--line);
}

/* About editorial quote: on phones the panel spans the photo, so fade it out instead */
@media (max-width:760px){
  html body :is(#loft-about,#loft-blog,#loft-post) .about-editorial:after{
    background:linear-gradient(180deg,var(--teal-deep) 0%,rgba(63,107,115,.82) 60%,rgba(63,107,115,0) 100%);
  }
}

/* ---------- More plants, each page its own ---------- */

/* Home intro: pothos pot sitting on the aside copy, vines trailing down its left side.
   In the image the pot base is ~29% down and ~53% across; the vines run between ~19% and ~45% across. */
html body #loft-home .loft-intro__aside{position:relative;z-index:1;--pothos:340px}
html body #loft-home .loft-intro__aside:before{
  content:"";position:absolute;z-index:-1;pointer-events:none;
  width:var(--pothos);height:var(--pothos);
  left:calc(var(--pothos) * -.48 - 14px);top:calc(var(--pothos) * -.32 + 4px);
  background:url("/images/plant-hanging-pothos-v2.webp") center/contain no-repeat;
}
@media (max-width:760px){
  /* No empty space beside the copy on phones, so indent it to make room for the vines */
  html body #loft-home .loft-intro__aside{--pothos:240px;padding-left:76px;margin-top:110px}
  html body #loft-home .loft-intro__aside:before{left:-34px}
}

/* About values: a leafy garland draped across the top */
html body #loft-about .about-values{position:relative}
html body #loft-about .about-values:before{
  /* the garland sits ~35% down its square canvas, so pull the box up to hang it from the top edge */
  content:"";position:absolute;right:clamp(16px,6vw,110px);top:calc(min(480px,45vw) * -.3);width:min(480px,45vw);aspect-ratio:1;pointer-events:none;
  background:url("/images/plant-garland.webp") center/contain no-repeat;
}

/* ---------- Studio backgrounds ---------- */

/* Home gallery strip on reclaimed wood, like the salon floor and shelves */
html body #loft-home .loft-ribbon{
  background:linear-gradient(rgba(243,236,230,.18),rgba(243,236,230,.18)),url("/images/bg-wood.jpg") center/cover;
}
html body #loft-home .loft-ribbon__hint{color:var(--ink)}
html body #loft-home .loft-ribbon__item{box-shadow:0 18px 40px rgba(60,35,20,.28)}

/* Services CTA: monstera and stone scene */
html body #loft-services-page .services-booking{
  background:linear-gradient(rgba(243,232,218,.55),rgba(243,232,218,.55)),url("/images/bg-monstera-stone.jpg") center bottom/cover no-repeat;
  color:var(--ink)!important;
}
html body #loft-services-page .services-booking h2{color:var(--ink)!important}
html body #loft-services-page .services-booking .loft-section-title em,
html body #loft-services-page .services-booking .loft-kicker{color:var(--clay)!important}
html body #loft-services-page .services-booking p:not(.loft-kicker){color:var(--ink-soft)!important}
html body #loft-services-page .services-booking .loft-btn--outline{border-color:var(--ink);color:var(--ink)}
html body #loft-services-page .services-booking .loft-btn--outline .loft-btn__circle{background:var(--teal-deep);color:#fff}
html body #loft-services-page .services-booking .loft-btn--outline:hover{background:var(--ink);color:var(--cream-light)}
html body #loft-services-page .services-booking .loft-btn--dark{background:var(--clay)}
html body #loft-services-page .services-booking .loft-btn--dark .loft-btn__circle{background:var(--teal-deep);color:#fff}

/* About + blog CTA: wood slice on a soft wall, warmed up */
html body :is(#loft-about,#loft-blog,#loft-post) .about-booking{
  background:linear-gradient(rgba(240,226,208,.45),rgba(240,226,208,.45)),url("/images/bg-wood-slice.jpg") center bottom/cover no-repeat;
  color:var(--ink);
  /* copy sits on the wall; the wood slice becomes a podium beneath it */
  min-height:880px;align-content:start;place-items:start center;padding-top:64px;
}
html body :is(#loft-about,#loft-blog,#loft-post) .about-booking:before,
html body :is(#loft-about,#loft-blog,#loft-post) .about-booking:after{border-color:rgba(183,90,52,.2)}
html body :is(#loft-about,#loft-blog,#loft-post) .about-booking__stamp{border-color:rgba(183,90,52,.45);color:var(--clay)}
html body :is(#loft-about,#loft-blog,#loft-post) .about-booking h2{color:var(--ink)!important}
html body :is(#loft-about,#loft-blog,#loft-post) .about-booking h2 em,
html body :is(#loft-about,#loft-blog,#loft-post) .about-booking .loft-kicker{color:var(--clay)!important}
html body :is(#loft-about,#loft-blog,#loft-post) .about-booking__copy>p:not(.loft-kicker){color:var(--ink-soft)!important}
html body :is(#loft-about,#loft-blog,#loft-post) .about-booking .loft-text-link{color:var(--ink)!important}
html body :is(#loft-about,#loft-blog,#loft-post) .about-booking a.loft-btn--cream{background:var(--clay)!important;color:#fff!important}
html body :is(#loft-about,#loft-blog,#loft-post) .about-booking a.loft-btn--cream span{color:#fff!important}
html body :is(#loft-about,#loft-blog,#loft-post) .about-booking a.loft-btn--cream .loft-btn__circle{background:var(--teal-deep)!important}

@media (max-width:760px){
  html body #loft-home .loft-intro:before{width:130px;height:190px;right:10px}
  html body #loft-about .about-values:before{width:70vw;top:-21vw;right:0}
  html body :is(#loft-about,#loft-blog,#loft-post) .about-booking{min-height:640px;padding-top:80px;background-size:auto 100%}
}

/* ---------- Readability: small labels and eyebrows (WCAG AA contrast) ---------- */
/* Brand burnt orange stays for large headings and fills; tiny text uses a deeper shade on light
   backgrounds and white on teal, green and orange panels. The :not(#_) bumps specificity past the
   pages own #root .section .label rules. */

html body :is(#loft-home,#loft-about,#loft-services-page,#loft-portfolio,#loft-contact,#loft-blog,#loft-post){
  --clay-text:#9a4a2c;
  --rose-light:#efd9c8;

  /* Small orange text on light backgrounds */
  :is(.loft-kicker,.loft-eyebrow,.loft-header-book,.loft-stars,
      .contact-card small,.contact-card>span,.contact-map-copy li span,
      .service-category__heading p,.service-category__heading>span,
      .featured-grid article>span,.loft-story__stamp,.about-value>span,.about-experience__list span,.perm-details__process li>span,.portfolio-quote>p,
      .loft-visit__address span,.loft-review__stars,.loft-review__google,
      .portfolio-hero__stamp small,.portfolio-hero__stamp span,.contact-hero__badge small,.contact-hero__badge span):not(#_){color:var(--clay-text)!important}
  .loft-feature>span{color:var(--teal-deep)}
  :is(.loft-vertical-copy,.about-hero__line){color:var(--ink-soft)}

  /* Labels and body copy on teal / green panels */
  :is(.loft-services,.services-specialisms,.perm-details__consult,.contact-card--dark,.loft-contact-card,.portfolio-feature-strip,.about-editorial__quote)
    :is(.loft-kicker,small,span):not(.loft-btn *):not(.loft-btn__circle):not(#_),
  :is(.loft-contact-card>p,.perm-details__consult>span):not(#_){color:#fff!important}
  :is(.loft-services,.services-specialisms,.perm-details__consult,.contact-card--dark,.loft-contact-card,.portfolio-feature-strip) p:not(#_){color:rgba(255,255,255,.94)!important}
  :is(.loft-services .loft-section-title em,.services-specialisms .loft-section-title em,.about-editorial__quote em):not(#_){color:var(--rose-light)!important}

  /* Burnt-orange panels and buttons: pure white for small text */
  :is(.loft-booking,.portfolio-booking,.contact-booking) :is(.loft-kicker,p,.loft-booking__note a):not(.loft-book-option *):not(#_),
  .loft-book-option:not(:hover) :is(small,i,strong):not(#_),
  :is(.loft-contact-card__button,.services-booking .loft-btn--dark,.services-booking .loft-btn--dark span):not(#_){color:#fff!important}
  .loft-booking__note a{border-color:rgba(255,255,255,.8)}

  /* Footer on leafy green */
  .loft-footer__statement em:not(#_){color:var(--rose-light)!important}
  :is(.loft-footer__middle nav span,.loft-footer__newsletter>span,.loft-footer__newsletter p,.loft-footer__bottom,.loft-footer__bottom a):not(#_){color:#fff!important}
  .loft-footer__middle nav a:hover:not(#_){color:var(--rose-light)!important}

  .loft-topbar{color:#fff}
}

/* ---------- Brand sage (#a9b4a0) in place of teal on the inner pages ----------
   The homepage has its own copy of this in loft-boho.css. Sage is too light for white
   text, so everything sitting on it switches to the dark ink colour; arrow circles on
   buttons become cream with a burnt orange arrow. */

html body :is(#loft-about,#loft-services-page,#loft-portfolio,#loft-contact,#loft-blog,#loft-post){
  --teal:#a9b4a0;
  --teal-deep:#a9b4a0;
  --sage-text:#5c6a55;
  --sage-ink:#3f4b3a;

  /* Top bar and mobile menu */
  .loft-topbar:not(#_):not(#__){color:var(--ink)}
  .loft-marquee__track i{background:var(--clay)}
  .loft-mobile-menu{color:var(--ink)}
  .loft-mobile-menu .loft-mobile-book{border-color:rgba(47,41,38,.4)}

  /* Buttons */
  .loft-btn--dark:not(:hover),
  .loft-btn--dark:not(:hover) span:not(.loft-btn__circle){color:var(--ink)}
  :is(.loft-hero,.about-hero,.services-hero,.portfolio-hero,.contact-hero) .loft-btn--dark:not(:hover),
  :is(.loft-hero,.about-hero,.services-hero,.portfolio-hero,.contact-hero) .loft-btn--dark:not(:hover) span:not(.loft-btn__circle){color:#fff}
  .loft-btn--outline .loft-btn__circle{color:var(--ink)}
  .loft-btn--outline:hover,.loft-btn--outline:hover span{color:var(--ink)}
  .loft-btn--dark .loft-btn__circle,
  :is(.loft-hero,.about-hero,.services-hero,.portfolio-hero,.contact-hero) .loft-btn--dark .loft-btn__circle,
  .contact-hero .loft-btn--light .loft-btn__circle{background:var(--cream-light);color:var(--clay)}
  .services-booking .loft-btn--dark .loft-btn__circle:not(#_){background:var(--cream-light);color:var(--clay)}
  .services-booking .loft-btn--outline .loft-btn__circle:not(#_){color:var(--ink)}
  .about-booking a.loft-btn--cream .loft-btn__circle:not(#_){background:var(--cream-light)!important;color:var(--clay)!important}
  .service-nav a:hover:not(#_):not(#__){color:var(--ink)!important}
  .service-row--consult{background:rgba(169,180,160,.2)}

  /* Small text that was teal */
  :is(.perm-note strong,.loft-feature>span):not(#_){color:var(--sage-text)}

  /* Panels that were teal: sage with dark text */
  :is(.services-specialisms,.perm-details__consult,.contact-card--dark,.loft-contact-card,.about-editorial__quote){color:var(--ink)}
  :is(.services-specialisms,.perm-details__consult,.contact-card--dark,.loft-contact-card,.about-editorial__quote)
    :is(h1,h2,h3,h4,p,li,span,small,strong,blockquote,cite,dt,dd,a,div):not(.loft-btn):not(.loft-btn *):not(.loft-contact-card__button):not(.loft-contact-card__button *):not(#_):not(#__){color:var(--ink)!important}
  :is(.services-specialisms,.perm-details__consult,.contact-card--dark,.loft-contact-card,.about-editorial__quote) em:not(.loft-btn *):not(#_):not(#__){color:var(--sage-ink)!important}
  :is(.services-specialisms,.perm-details__consult,.contact-card--dark,.loft-contact-card) *:not(.loft-btn):not(.loft-btn *){border-color:rgba(47,41,38,.16)}
}

@media (max-width:760px){
  html body :is(#loft-about,#loft-blog,#loft-post) .about-editorial:after{
    background:linear-gradient(180deg,#a9b4a0 0%,rgba(169,180,160,.86) 60%,rgba(169,180,160,0) 100%);
  }
}

/* ---------- Teal accents, echoing the velvet sofa in the salon ----------
   Kept to small details: the round stamp badges and text links on hover.
   Deep teal reads well on cream (about 5.7:1). */

html body :is(#loft-home,#loft-about,#loft-services-page,#loft-portfolio,#loft-contact,#loft-blog,#loft-post){
  --brand-teal:#3f6b73;

  /* Stamp badges */
  :is(.loft-story__stamp,.about-hero__card,.perm-feature__stamp,.contact-hero__badge,.about-booking__stamp,.portfolio-hero__stamp):not(#_):not(#__){
    color:var(--brand-teal)!important;border-color:rgba(63,107,115,.5)!important;
  }
  :is(.loft-story__stamp,.about-hero__card,.perm-feature__stamp,.contact-hero__badge,.about-booking__stamp,.portfolio-hero__stamp)
    :is(span,small,strong,p,em,b):not(#_):not(#__){color:var(--brand-teal)!important}
  .loft-floating-card--bottom text{fill:var(--brand-teal)}

  /* Text links turn teal on hover */
  :is(.loft-text-link,.loft-arrow-link,.loft-menu__all,.loft-review__google,.contact-card__email,
      .contact-card a:not(.loft-btn),.loft-visit__address a,.loft-booking__note a):hover:not(#_):not(#__){
    color:var(--brand-teal)!important;border-color:var(--brand-teal)!important;
  }
  :is(.loft-text-link,.loft-arrow-link,.loft-menu__all,.loft-review__google,.contact-card__email,
      .contact-card a:not(.loft-btn),.loft-visit__address a,.loft-booking__note a){transition:color .3s,border-color .3s}
}

/* About editorial: the small corner photo is gone, so the section fits the main image and quote */
html body #loft-about .about-editorial{min-height:0}

/* Portfolio + Contact booking: the monstera and stone scene used on Services, instead of solid orange */
html body :is(#loft-portfolio,#loft-contact) :is(.portfolio-booking,.contact-booking){
  background:linear-gradient(rgba(243,232,218,.6),rgba(243,232,218,.6)),url("/images/bg-monstera-stone.jpg") center bottom/cover no-repeat;
  color:var(--ink);
}
html body :is(#loft-portfolio,#loft-contact) :is(.portfolio-booking,.contact-booking) h2{color:var(--ink)!important}
html body :is(#loft-portfolio,#loft-contact) :is(.portfolio-booking,.contact-booking) h2 em{color:var(--clay)!important}
html body :is(#loft-portfolio,#loft-contact) :is(.portfolio-booking,.contact-booking) .loft-kicker:not(#_):not(#__){color:var(--clay-text,#9a4a2c)!important}
html body :is(#loft-portfolio,#loft-contact) :is(.portfolio-booking>div:last-child p,.contact-booking__copy>p):not(#_):not(#__){color:var(--ink-soft)!important}
/* Buttons: first solid burnt orange, second outlined, matching the homepage booking */
html body :is(#loft-portfolio,#loft-contact) :is(.portfolio-booking>div:last-child a,.contact-booking__buttons a){
  border-color:rgba(47,41,38,.35);color:var(--ink);background:rgba(250,246,241,.55);
}
html body :is(#loft-portfolio,#loft-contact) :is(.portfolio-booking>div:last-child a:first-of-type,.contact-booking__buttons a:first-child){
  background:var(--clay);border-color:var(--clay);color:#fff;
}
html body :is(#loft-portfolio,#loft-contact) :is(.portfolio-booking>div:last-child a,.contact-booking__buttons a):hover{
  background:var(--ink);border-color:var(--ink);color:var(--cream-light);
}

/* Footer social icons: Services, Portfolio and Contact were missing the round icon buttons the other pages have */
html body :is(#loft-services-page,#loft-portfolio,#loft-contact) .loft-social-icons{display:flex;gap:12px}
html body :is(#loft-services-page,#loft-portfolio,#loft-contact) .loft-social-icons a{width:46px;height:46px;display:grid;place-items:center;border:1px solid rgba(255,255,255,.35);border-radius:50%;transition:background-color .3s,border-color .3s}
html body :is(#loft-services-page,#loft-portfolio,#loft-contact) .loft-social-icons svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.6}
html body :is(#loft-services-page,#loft-portfolio,#loft-contact) .loft-social-icons a:nth-child(2) svg,
html body :is(#loft-services-page,#loft-portfolio,#loft-contact) .loft-social-icons a:nth-child(3) svg{fill:currentColor;stroke:none}

/* Contact booking: keep the label and heading clear of the dark monstera leaf on the left */
html body #loft-contact .contact-booking{
  background:linear-gradient(90deg,rgba(243,232,218,.9) 0%,rgba(243,232,218,.78) 45%,rgba(243,232,218,.5) 100%),url("/images/bg-monstera-stone.jpg") center bottom/cover no-repeat;
}

/* Page heroes: Playfair sits lower on the line than Italiana did, so give the title room above the intro */
html body :is(#loft-about,#loft-portfolio,#loft-contact) :is(.about-hero,.portfolio-hero,.contact-hero) h1{margin-bottom:34px}
html body #loft-portfolio .portfolio-quote p{margin-top:32px!important}
html body #loft-portfolio .portfolio-booking{
  background:linear-gradient(90deg,rgba(243,232,218,.9) 0%,rgba(243,232,218,.78) 45%,rgba(243,232,218,.5) 100%),url("/images/bg-monstera-stone.jpg") center bottom/cover no-repeat;
}

/* Services booking: the arrow sits in a cream circle, so it must not inherit the button's white text */
html body #loft-services-page .services-booking .loft-btn--dark .loft-btn__circle:not(#_):not(#__){background:var(--cream-light)!important;color:var(--clay)!important}

/* Rounded pill buttons on every page, matching the homepage */
html body :is(#loft-home,#loft-about,#loft-services-page,#loft-portfolio,#loft-contact,#loft-blog,#loft-post)
  :is(.loft-btn,.loft-mobile-book,.loft-book-option,.loft-contact-card__button,.blog-article__book,
      .portfolio-booking>div:last-child a,.contact-booking__buttons a,.service-nav a){border-radius:999px}
html body :is(#loft-portfolio,#loft-contact) :is(.portfolio-booking>div:last-child a,.contact-booking__buttons a){padding-left:26px;padding-right:24px}