/* Pearl satin and black brand palette. */
:root {
  --ink: #0b0b0c;
  --ink-soft: #171719;
  --paper: #f3f1eb;
  --paper-strong: #fffefa;
  --muted: #a9a39a;
  --line: rgba(255, 254, 249, .2);
  --line-dark: rgba(11, 11, 12, .17);
  --acid: #111113;
  --acid-dark: #000;
  --copper: #b9b3aa;
  --copper-deep: #4b4945;
  --gold: #d8d2c8;
  --v4-night: #0b0b0c;
  --v4-night-soft: #171719;
  --v4-cream: #f3f1eb;
  --v4-cream-soft: #ddd8d0;
  --v4-copper: #111113;
  --v4-copper-light: #6f6b65;
  --v4-ink: #0b0b0c;
  --v4-line: rgba(255, 254, 249, .2);
}

html,
body { background: #0b0b0c; }
body::before { opacity: .035; }

/* Pearl navigation with black wordmark and controls. */
.site-header {
  color: #0b0b0c;
  border-color: rgba(11,11,12,.16);
  background:
    linear-gradient(112deg, rgba(255,255,255,.96), rgba(229,225,217,.94) 56%, rgba(255,255,255,.94)),
    #f3f1eb;
  box-shadow: 0 18px 55px rgba(0,0,0,.2), inset 0 1px rgba(255,255,255,.9);
}
.site-header::before {
  opacity: .38;
  background: radial-gradient(ellipse at center, #0b0b0c 0 1.4px, transparent 1.8px) 0 0 / 12px 5px repeat-x;
}
.site-header .brand img { filter: grayscale(1) invert(1) brightness(.12); }
.brand span { color: #57534e; }
.site-nav { border-color: rgba(11,11,12,.13); background: rgba(255,255,255,.38); }
.site-nav a { color: #353331; }
.site-nav a:hover,
.site-nav a[aria-current="page"] { color: #fffefa; background: #111113; }
.site-nav a[aria-current="page"]::before { background: #fffefa; box-shadow: 0 0 0 3px rgba(255,255,255,.17); }
.language-toggle { color: #0b0b0c; border-color: rgba(11,11,12,.22); background: rgba(255,255,255,.4); }
.language-toggle:hover { color: #fffefa; background: #111113; }
.header-book,
.header-book:hover {
  color: #fffefa !important;
  background: #111113 !important;
  box-shadow: inset 0 1px rgba(255,255,255,.15), 0 10px 24px rgba(0,0,0,.18);
}
.header-book::before {
  background: linear-gradient(115deg, transparent 33%, rgba(255,255,255,.78) 36% 42%, transparent 45%), #050505;
  box-shadow: 5px 0 #393939, -3px 0 #000;
}

/* Satin hero surface. */
.hero {
  color: #0b0b0c;
  background:
    radial-gradient(ellipse at 18% 10%, rgba(255,255,255,.98), transparent 28rem),
    linear-gradient(132deg, transparent 0 18%, rgba(143,137,127,.12) 31%, transparent 43%),
    linear-gradient(52deg, transparent 0 24%, rgba(255,255,255,.7) 38%, transparent 52%),
    linear-gradient(116deg, #f8f6f1 0 48%, #d8d3cb 49%, #111113 70% 100%);
}
.hero::before {
  background:
    linear-gradient(90deg, transparent 49.9%, rgba(11,11,12,.14) 50%, transparent 50.2%),
    radial-gradient(circle at 51% 28%, rgba(255,255,255,.32), transparent 25rem);
  mix-blend-mode: multiply;
}
.hero-word { opacity: .09; -webkit-text-stroke-color: rgba(11,11,12,.75); }
.hero-copy { color: #0b0b0c; }
.hero-copy .eyebrow { color: #353331; }
.hero-copy h1 span:last-child { color: #0b0b0c; }
.hero-intro { color: #504d48; }
.hero-trust { border-color: rgba(11,11,12,.2); }
.hero-trust dd { color: #625e58; }
.hero-actions .button-acid { color: #fffefa; background: #111113; border-color: #111113; }
.hero-actions .button-acid:hover { color: #0b0b0c; background: #fffefa; border-color: #0b0b0c; }
.hero-actions .text-link { color: #0b0b0c; border-color: rgba(11,11,12,.3); }
.hero-media::after { background: linear-gradient(90deg, rgba(11,11,12,.18), transparent 24%), linear-gradient(0deg, rgba(11,11,12,.36), transparent 40%); }
.hero-media-tag { color: #fffefa; background: rgba(11,11,12,.84); border-color: rgba(255,255,255,.48); }
.braid-aura span { background: linear-gradient(transparent, rgba(255,255,255,.42) 15%, rgba(125,121,114,.13) 75%, transparent); }
.hero-braid .braid-bead,
.braid-bead {
  border-color: #f5f2eb;
  background: linear-gradient(90deg, #090909, #f2eee7 31%, #77736d 65%, #fffefa);
  box-shadow: 0 5px 10px rgba(0,0,0,.45);
}
.braid-pin { background: #fffefa; }
.braid-pin::before { background: radial-gradient(circle at 32% 28%, #fff, #bcb7ae 48%, #171719); }

.ticker { color: #fffefa; background: #0b0b0c; }
.ticker i { background: #e2ddd5; }

/* Dark and pearl sections alternate like folded fabric. */
.service-section,
.reviews-section,
.catalogue-section,
.full-gallery {
  color: #f7f4ee;
  background:
    radial-gradient(circle at 88% 12%, rgba(255,255,255,.06), transparent 30rem),
    linear-gradient(135deg, #070708, #18181a 58%, #09090a) !important;
}
.service-section::before { -webkit-text-stroke-color: rgba(255,255,255,.42); }
.gallery-section,
.about-section,
.faq-section,
.booking-section,
.portfolio-intro,
.service-guidance {
  color: #0b0b0c;
  background:
    radial-gradient(ellipse at 9% 14%, rgba(255,255,255,.95), transparent 28rem),
    linear-gradient(128deg, transparent 0 24%, rgba(130,125,117,.08) 36%, transparent 49%),
    #efede7 !important;
}
.care-note,
.gallery-book,
.service-help {
  color: #0b0b0c;
  background:
    linear-gradient(128deg, rgba(255,255,255,.8), transparent 34%),
    #d8d4cc !important;
}
.care-note .eyebrow,
.care-note h2,
.care-note p,
.care-note a { color: #0b0b0c; }
.care-note img { filter: grayscale(.35) saturate(.7); }

.eyebrow,
.eyebrow.acid { color: #8f8980; }
.gallery-section .eyebrow,
.about-section .eyebrow,
.faq-section .eyebrow,
.booking-section .eyebrow,
.portfolio-intro .eyebrow,
.service-guidance .eyebrow { color: #4f4c47; }
.section-heading > p,
.gallery-section .section-heading > p { color: #5e5a54; }

.service-card {
  border-color: rgba(255,255,255,.15);
  background: rgba(255,255,255,.045);
}
.service-card-body { background: linear-gradient(180deg, rgba(255,255,255,.035), transparent); }
.service-section .service-card:not(.request-card),
.catalogue-section .service-card:not(.request-card),
.service-section .service-card:not(.request-card) h3,
.catalogue-section .service-card:not(.request-card) h3,
.service-section .service-card:not(.request-card) .service-details,
.catalogue-section .service-card:not(.request-card) .service-details,
.service-section .service-card:not(.request-card) .service-details strong,
.catalogue-section .service-card:not(.request-card) .service-details strong { color: #f7f4ee; }
.service-section .service-card:not(.request-card) .service-details span,
.catalogue-section .service-card:not(.request-card) .service-details span { color: #aaa59d; }
.service-category { color: #c8c2b8; }
.service-action { color: #fffefa; }
.request-card { color: #0b0b0c; background: #e2ded6; }
.request-card h3,
.request-card .service-details,
.request-card .service-details strong,
.request-card .service-details span { color: #0b0b0c; }
.request-card .service-category,
.request-card .service-action { color: #0b0b0c; }
.request-card .service-card-body::before { color: #55514b; }
.category-rail a:hover { background: rgba(255,255,255,.06); }
.category-rail a::after { color: #d4cfc7; }

.button-acid { color: #fffefa; background: #111113; border-color: #111113; }
.button-acid:hover { color: #0b0b0c; background: #fffefa; border-color: #0b0b0c; }
.button-dark { color: #fffefa; background: #111113; border-color: #111113; }
.button-dark:hover { color: #0b0b0c; background: #dad5cd; border-color: #0b0b0c; }
.text-link:hover { color: #5c5852; border-color: #5c5852; }

.booking-intro { border-color: rgba(11,11,12,.25); }
.booking-steps li { border-color: rgba(11,11,12,.18); }
.booking-steps li > span { color: #fffefa; background: #111113; }
.booking-prep { background: #d9d5cd; }
.about-portrait span { color: #fffefa; background: #111113; }
.stars,
.review-stars { color: #e0dbd2; }
.review-card { border-color: rgba(255,255,255,.16); background: rgba(255,255,255,.035); }
.faq-item { border-color: rgba(11,11,12,.2); }
.faq-item summary::after { color: #0b0b0c; }

/* Monochrome woven transition. */
.woven-break {
  background:
    radial-gradient(ellipse at center, rgba(255,255,255,.09), transparent 24rem),
    linear-gradient(90deg, #050506, #242426 50%, #050506);
}
.woven-break .strand-glint { stroke: rgba(255,255,255,.28); }
.tightening-label { color: #d5d0c8; border-color: rgba(255,255,255,.13); background: rgba(0,0,0,.46); }

/* Gallery and portfolio. */
.gallery-item { background: #cbc7c0; box-shadow: 0 14px 34px rgba(0,0,0,.09); }
.gallery-item::after { color: #fffefa; border-color: rgba(255,255,255,.25); background: rgba(8,8,9,.8); }
.portfolio-photo { border-color: rgba(255,255,255,.13); background: #171719; }
.portfolio-photo > span { color: #fffefa; border-color: rgba(255,255,255,.15); background: rgba(8,8,9,.78); }
.portfolio-intro a { color: #0b0b0c; }
.gallery-book p:not(.eyebrow),
.service-help > div > p:last-child { color: #4d4a45; }

/* Secondary pages and catalogue tools. */
.page-hero {
  color: #fffefa;
  background:
    radial-gradient(circle at 16% 15%, rgba(255,255,255,.09), transparent 28rem),
    linear-gradient(135deg, #080809, #1c1c1e) !important;
}
.page-hero-copy > p:last-child { color: #c6c1b9; }
.service-guidance article { border-color: rgba(11,11,12,.15); }
.service-guidance article > span { color: #fffefa; background: #111113; }
.service-guidance p { color: #595650; }
.service-guidance a { color: #0b0b0c; }
.catalogue-heading > p,
.service-meta { color: #b8b3ab; }
.search-field,
.filter-button { border-color: rgba(255,255,255,.17); }
.filter-button { color: #d3cec6; }
.filter-button.is-active { color: #0b0b0c; background: #f4f1eb; }
.search-field input { color: #fffefa; }
.recently-viewed { background: #171719; }

/* Footer and dark contact areas. */
.visit-section,
.site-footer { color: #f7f4ee; background: #070708 !important; }
.site-footer .button-acid,
.footer-cta .button-acid { color: #0b0b0c; background: #f3f1eb; border-color: #f3f1eb; }
.site-footer .button-acid:hover,
.footer-cta .button-acid:hover { color: #fffefa; background: #222224; }

/* Dialogs remain calm and high contrast. */
.dialog-shell,
.service-dialog-shell { color: #0b0b0c; background: #f4f1eb; }
.dialog-header { background: #fffefa; border-color: rgba(11,11,12,.15); }
.booking-frame-wrap { background: #e0dcd5; }
.dialog-note,
.detail-notes { color: #504d48; background: #dfdbd3; }
.detail-notes { border-left-color: #111113; }
.icon-button { border-color: rgba(11,11,12,.2); }
.lightbox { background: rgba(0,0,0,.96); }

@media (max-width: 900px) {
  .menu-toggle { border-color: rgba(11,11,12,.2); background: rgba(255,255,255,.34); }
  .menu-toggle span:not(.sr-only) { background: #0b0b0c; }
  .site-nav { color: #0b0b0c; background: rgba(246,243,237,.98); }
  .hero { background: #f3f1eb; }
  .hero-media::after { background: linear-gradient(0deg, #f3f1eb 0, transparent 42%); }
  .hero-copy { color: #0b0b0c; }
}

/* Final detail pass: one atelier-like component language. */
:root {
  --polish-radius: 18px;
  --polish-radius-large: 26px;
  --polish-shadow: 0 18px 48px rgba(10, 10, 11, .12);
}

.site-header {
  border-radius: var(--polish-radius);
  box-shadow: 0 18px 55px rgba(0,0,0,.15), inset 0 1px rgba(255,255,255,.94);
}
.site-header::before {
  left: 18px;
  right: 18px;
  bottom: 0;
  height: 1px;
  opacity: .55;
  background: linear-gradient(90deg, transparent, rgba(11,11,12,.25) 18%, rgba(11,11,12,.08) 50%, rgba(11,11,12,.25) 82%, transparent);
}
.site-nav { border-radius: 14px; }
.site-nav a { min-width: 68px; }
.site-nav a[aria-current="page"]::before { display: none; content: none; }

.header-book,
.header-book:hover {
  min-width: 126px;
  min-height: 48px;
  padding: 0 22px;
  border: 1px solid #111113;
  border-radius: 13px;
}
.header-book::before { display: none; content: none; }
.header-book > span { position: relative; z-index: 1; }

.button {
  min-height: 54px;
  padding-inline: 27px;
  border-radius: 999px;
}
.home-service-actions {
  justify-content: flex-start;
  gap: 12px;
}
.home-service-actions .button,
.consult-link {
  min-height: 54px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 27px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 750;
  line-height: 1.2;
  text-align: center;
}
.consult-link {
  color: #f7f4ee;
  border: 1px solid rgba(255,255,255,.28);
  background: rgba(255,255,255,.055);
  text-decoration: none;
  transition: color 180ms ease, background 180ms ease, border-color 180ms ease;
}
.consult-link:hover {
  color: #111113;
  border-color: #f3f1eb;
  background: #f3f1eb;
}

.hero-word,
.hero-media-tag { display: none !important; }
.photographic-braid,
.photographic-page-braid,
.photographic-woven-braid {
  clip-path: none;
  mix-blend-mode: normal;
}
.photographic-braid {
  transform: scaleX(.86);
  filter: grayscale(1) brightness(.42) contrast(1.58) drop-shadow(0 22px 18px rgba(0,0,0,.5));
}

/* Loose fibres narrow into one continuous photographic plait. */
.woven-break {
  --strand-scale: .82;
  height: clamp(170px, 15vw, 228px);
  margin-block: -18px;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(ellipse at center, rgba(255,255,255,.075), transparent 32rem),
    linear-gradient(90deg, #050506, #1e1e20 50%, #050506);
}
.loose-hair-svg {
  inset: 7% 0 !important;
  height: 86% !important;
  filter: drop-shadow(0 8px 8px rgba(0,0,0,.55));
}
.woven-break .loose-strands { transform: scaleY(var(--strand-scale)); }
.woven-break .fibre {
  fill: none;
  stroke-width: 2.5;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}
.woven-break .fibre-heavy { stroke-width: 5; }
.woven-break .fibre-fine { stroke-width: 1.15; opacity: .88; }
.woven-break .fibre-shadow { stroke: rgba(0,0,0,.74); stroke-width: 12; opacity: .75; }
.woven-core {
  z-index: 4;
  top: 50%;
  left: 50%;
  width: min(58vw, 820px);
  height: clamp(132px, 12vw, 178px);
  transform: translate(-50%, -50%) scaleX(var(--core-scale));
  opacity: var(--core-opacity);
  filter: drop-shadow(0 17px 14px rgba(0,0,0,.62));
  overflow: visible;
}
.photographic-woven-braid {
  position: absolute;
  top: 50%;
  left: 50%;
  width: clamp(78px, 6.8vw, 98px);
  height: min(55vw, 780px);
  transform: translate(-50%, -50%) rotate(90deg);
  background-image: url("/images/stock/cc0-braid-cutout.png");
  background-size: 100% 100%;
  filter: grayscale(1) brightness(.62) contrast(1.46);
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(180deg, transparent, #000 8%, #000 92%, transparent);
}

.service-card { border-radius: var(--polish-radius); overflow: hidden; }
.gallery-item,
.portfolio-photo { border-radius: var(--polish-radius); overflow: hidden; }
.care-note { border-block: 1px solid rgba(11,11,12,.13); }
.care-note > img { filter: grayscale(.24) saturate(.72) contrast(1.03); }
.care-note > div > p:not(.eyebrow) { color: #56524c; }

.booking-section {
  min-height: 0;
  padding: clamp(18px, 2.5vw, 38px);
  gap: 12px;
}
.booking-compact { grid-template-columns: minmax(0,.86fr) minmax(0,1.14fr); }
.booking-intro {
  padding: clamp(58px, 7vw, 104px);
  border: 1px solid rgba(11,11,12,.14);
  border-radius: var(--polish-radius-large);
  background: rgba(255,255,255,.42);
  box-shadow: inset 0 1px rgba(255,255,255,.84);
}
.booking-intro > p:not(.eyebrow) { color: #514e49; }
.booking-steps { gap: 12px; }
.booking-steps li {
  min-height: 150px;
  padding: 30px clamp(24px, 4vw, 56px);
  border: 1px solid rgba(11,11,12,.13) !important;
  border-radius: var(--polish-radius);
  background: rgba(255,255,255,.34);
}
.booking-steps p { color: #5e5a54; }
.booking-prep {
  padding: 26px clamp(24px, 4vw, 56px);
  border: 0;
  border-radius: var(--polish-radius);
  background: #111113;
}
.booking-prep .eyebrow { color: #d6d1c8; }
.booking-prep ul { color: #d6d1c8; }
.booking-prep li { border-left-color: #f3f1eb; }

.about-portrait img { border-radius: 210px 210px var(--polish-radius) var(--polish-radius); }
.about-portrait span { border-radius: 8px; }
.review-card { border-radius: var(--polish-radius); }
.faq-item summary { padding-inline: 2px; }
.footer-cta .button::before,
.mobile-book::before { display: none; content: none; }

@media (max-width: 1180px) {
  .booking-compact { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
  .site-header,
  .site-header.is-hidden { border-radius: 16px; transform: none; }
  .site-nav {
    inset: 82px 10px auto;
    padding: 16px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    color: #f7f4ee;
    border-radius: 20px;
    background: rgba(11,11,12,.98);
  }
  .site-nav a {
    min-width: 0;
    min-height: 74px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-end;
    gap: 9px;
    padding: 14px;
    color: #f7f4ee;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 13px;
    font-family: var(--display);
    font-size: 24px;
    letter-spacing: -.02em;
  }
  .site-nav a::before {
    display: block;
    color: #918c84;
    font-family: var(--sans);
    font-size: 8px;
    font-weight: 700;
    letter-spacing: .14em;
  }
  .site-nav a:nth-child(1)::before { content: "01"; }
  .site-nav a:nth-child(2)::before { content: "02"; }
  .site-nav a:nth-child(3)::before { content: "03"; }
  .site-nav a:nth-child(4)::before { content: "04"; }
  .site-nav a:nth-child(5)::before { content: "05"; }
  .site-nav a[aria-current="page"]::before { display: block; }
  .site-nav a:hover,
  .site-nav a[aria-current="page"] { color: #0b0b0c; background: #f3f1eb; }
  .site-nav a[aria-current="page"]::before { color: #5a5650; }

  .woven-break { height: 154px; margin-block: -12px; }
  .woven-core { width: min(68vw, 570px); height: 128px; }
  .photographic-woven-braid { width: 72px; height: min(65vw, 560px); }
  .woven-break .fibre { stroke-width: 1.8; }
  .woven-break .fibre-heavy { stroke-width: 3.6; }
  .woven-break .fibre-shadow { stroke-width: 8; }

  .booking-section { padding: 14px; }
  .booking-intro { padding: 64px 24px; }
  .booking-steps li { min-height: 150px; }
  .mobile-book {
    color: #fffefa;
    border: 1px solid rgba(255,255,255,.2);
    background: #111113;
    box-shadow: 0 16px 38px rgba(0,0,0,.3);
  }
}

@media (max-width: 620px) {
  .home-service-actions { width: 100%; }
  .home-service-actions .button,
  .consult-link { width: 100%; }
  .woven-break { height: 132px; margin-block: -8px; }
  .woven-core { width: 74vw; height: 108px; }
  .photographic-woven-braid { width: 58px; height: 76vw; }
  .booking-intro { padding: 54px 20px; }
  .booking-steps li { grid-template-columns: 48px 1fr; min-height: 138px; padding: 24px 18px; }
}

@media (max-width: 440px) {
  .site-nav { grid-template-columns: 1fr; }
  .site-nav a {
    min-height: 52px;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 15px;
    font-size: 22px;
  }
}

@media (max-width: 620px) {
  .mobile-book {
    color: #fffefa;
    border-color: rgba(255,255,255,.22);
    background: #111113;
    box-shadow: 0 14px 34px rgba(0,0,0,.28);
  }
}