/* Palette drawn from the salon's stone floor, timber, brass and black chairs. */
:root { --bg:#24251f; --surface:#303129; --cream:#f5f0e7; --muted:#cdc7bb; --gold:#c9ab78; --header-height:96px; }
html { scroll-padding-top:var(--header-height); }
.header { background:#24251ffb; }
.hero-background::after { background:linear-gradient(90deg,#201e18da,#201e1880 52%,#201e1820),linear-gradient(0deg,#24251f85,transparent 35%); }
.hero video { opacity:.85; }
.intro,.services,.workspace,.team {
 --cream:#302e27; --muted:#615c50; --gold:#806038; --line:#74634a30;
 background:#eee7db; color:var(--cream);
}
.intro,.services { background:#f3eee5; }
.intro,.services,.team { max-width:none; padding-inline:max(7%,calc((100% - 1204px)/2)); }
.workspace { background:#e8dfd0; }
.team { background:#f3eee5; }
.ritual { background:#e7ddcd; }
.contact { background:#34382e; }
.services em,.workspace em,.team em,.intro em { color:#806038; }
.service-row:hover { background:#80603808; }
.team-info .text-link { color:#70512d; }
.team-portrait { border-color:#80603830; }
.workspace-controls button { color:#70512d; border-color:#80603860; }
.workspace-controls button:hover { background:#80603812; }
.hero .button,.contact .button,.header .button,dialog .button { color:#24231d; }
/* Suppress ornamental arrows, retaining real carousel and keyboard controls. */
.button > .external-arrow,.button > span:has(.external-arrow),.text-link > span:has(.external-arrow),.text-link > .external-arrow,.gallery-item > span,.hero-bottom a span { display:none; }
.button,.text-link { gap:12px; }
.workspace-photo { will-change:auto; }
@media(min-width:801px) {
 .hero { min-height:570px; height:calc(100svh - var(--header-height)); }
 .hero h1 { font-size:clamp(58px,min(6.4vw,10.3svh),96px); }
 .hero-inner { padding-block:38px 90px; }
 .services,.workspace,.work,.team { padding-block:clamp(28px,3.4svh,42px); }
 .section-heading { margin-bottom:24px; gap:28px; }
 .section-heading h2 { font-size:clamp(38px,5.6svh,56px); }
 .section-heading .eyebrow { margin-bottom:12px; }
 .service-row { padding-block:clamp(16px,2.6svh,27px); }
 .service-row h3 { font-size:clamp(26px,4svh,32px); }
 .workspace-grid,.workspace-grid.is-carousel { height:clamp(240px,calc(100svh - 400px),520px); }
 .workspace-grid:not(.is-carousel) .workspace-photo { height:100%; flex-shrink:0; }
 .carousel-track .carousel-slide img { height:clamp(200px,calc(100svh - 540px),440px); }
 .ritual { min-height:0; }
 .ritual-visual { min-height:0; }
 .ritual-content { padding:clamp(32px,6svh,80px) 10%; }
 .ritual-content h2 { font-size:clamp(40px,6.8svh,64px); }
 .ritual-word { font-size:clamp(60px,10svh,110px); left:7%; }
 .team-portrait { aspect-ratio:4/5; height:clamp(160px,calc(100svh - 620px),390px); width:100%; }
 .team-info { padding-top:16px; }
 .team-info h3 { font-size:clamp(27px,3.5svh,36px); }
 .team-info > p:not(.eyebrow) { font-size:15px; line-height:1.65; margin-top:10px; }
 .team-info .text-link { margin-top:8px; }
 .workspace-controls,.carousel-arrows { transition:opacity 180ms ease; }
}
@media(hover:hover) and (pointer:fine) {
 .workspace-controls,.carousel-arrows { opacity:0; }
 .workspace:has(.workspace-grid:hover) .workspace-controls,.workspace:focus-within .workspace-controls,.workspace-controls:hover,
 .work-carousel:hover .carousel-arrows,.work-carousel:focus-within .carousel-arrows { opacity:1; }
}
@media(max-width:800px) {
 .hero { min-height:620px; }
 .team-portrait.has-photo { aspect-ratio:4/5; }
}
@media(min-width:801px) and (max-height:800px) {
 .team { padding-block:18px; }
 .team .section-heading h2 { font-size:38px; }
 .team-info > p:not(.eyebrow) { font-size:14.5px; line-height:1.6; }
}
/* A complete section occupies the visible page below the sticky header.
   Minimum height allows longer content and zoomed text to flow without clipping. */
.services,.workspace,.ritual,.work,.team { min-height:calc(100svh - var(--header-height)); }
@media(min-width:1024px) and (min-height:600px) {
 html { scroll-snap-type:y mandatory; }
 main > section { min-height:calc(100svh - var(--header-height)); scroll-snap-align:start; scroll-snap-stop:always; position:relative; }
 .intro,.about,.contact { display:flex; flex-direction:column; justify-content:center; }
 .contact { padding-block:clamp(28px,5svh,60px); }
 .intro > p:not(.eyebrow) { margin:0 auto; }
 .intro .text-link,.contact > .button { align-self:center; }
 footer { scroll-snap-align:end; scroll-snap-stop:always; }
 .services,.workspace,.work,.team { display:flex; flex-direction:column; justify-content:center; }
 .workspace > .section-heading { width:100%; }
 .workspace-grid,.team-grid,.work-carousel { flex-shrink:0; }
}
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; scroll-snap-type:none; } }

#services > .section-heading {
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 8px;
}
#services > .section-heading > p { max-width: 40rem; padding-bottom: 0; }
#services > .section-heading > p br { display: none; }
#services .service-row {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 12rem;
}
.service-gallery-label {
  justify-self: end;
  padding: 5px 12px;
  border: 1px solid #80603846;
  border-radius: 999px;
  color: #705436;
  text-align: center;
  font-size: 12px;
  line-height: 1.4;
}
.service-row:hover .service-gallery-label,
.service-row:focus-visible .service-gallery-label { background: #80603812; }
@media (min-width: 801px) {
  #services > .section-heading h2 br { display: none; }
  #services > .section-heading h2 em { margin-inline-start: .2em; }
}
@media (max-width: 800px) {
  #services .service-row { grid-template-columns: minmax(0, 1fr) minmax(6rem, 32%); }
  .service-gallery-label { grid-column: 2; grid-row: 1 / 3; padding-inline: 8px; font-size: 11px; }
}

@media (min-width: 801px) and (max-height: 800px) {
  #services .service-row { padding-block: 16px; }
}

#contact {
  position: relative;
  isolation: isolate;
  overflow: clip;
  background: #34382e;
}
#contact::before {
  content: "";
  position: absolute;
  inset: -18%;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 23% 22%, #78714c55, transparent 54%),
    radial-gradient(ellipse at 76% 75%, #5a674755, transparent 51%),
    linear-gradient(125deg, #2d3228, #34382e 58%, #2a3027);
  animation: contact-light-drift 24s ease-in-out infinite alternate;
}
@keyframes contact-light-drift {
  from { transform: translate(-6%, -4%); }
  to { transform: translate(6%, 4%); }
}
@media (prefers-reduced-motion: reduce) {
  #contact::before { animation: none; }
}