/* Fit the complete reference composition within the available viewport. */
:root { --paper:#f7f5ef; --ink:#11110f; --muted:#393a3b; --rule:#92928d; --serif:Didot,"Bodoni 72","Times New Roman",serif; --sans:"Arial",sans-serif; }
* { box-sizing:border-box; }
[hidden] { display:none !important; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background:var(--paper); font-family:var(--sans); -webkit-font-smoothing:antialiased; }
html.modal-open,body.modal-open { overflow:hidden; }
/* A fixed-size paper grain stays fine at every screen size. Applied to the
   ivory surfaces themselves, it leaves the photographs and lettering clean. */
body { background-image:url("assets/paper-texture.svg"), radial-gradient(ellipse at 18% 12%,#e9dcc02b,transparent 65%); background-size:320px 320px,100% 100%; background-repeat:repeat,no-repeat; }
a { color:inherit; text-decoration:none; }
button { font:inherit; cursor:pointer; }
img { display:block; width:100%; }
a:focus-visible,button:focus-visible { outline:2px solid #886750; outline-offset:5px; }
.page { position:relative; z-index:1; width:min(100%, calc(100dvh / .7505)); margin:auto; container-type:inline-size; }
body { min-height:100dvh; display:grid; align-items:center; }
.site-intro {
  position:fixed;
  z-index:2;
  inset:0;
  display:grid;
  place-items:center;
  pointer-events:none;
}
.site-intro__mark {
  width:clamp(78px,7vw,110px);
  height:auto;
  opacity:0;
  transform:scale(.985);
  transform-origin:center;
  will-change:opacity,transform;
}
.intro-pending { overflow:hidden; }
.intro-pending:not(.intro-revealing) .page,
.intro-pending:not(.intro-revealing) .skip-link { opacity:0; visibility:hidden; }
.intro-revealing .page { animation:intro-ui-reveal .9s ease both; }
.intro-complete .site-intro { display:none; }
@keyframes intro-ui-reveal {
  from { opacity:0; }
  to { opacity:1; }
}
.page main { min-width:0; }
.skip-link { position:fixed; z-index:100; top:10px; left:10px; padding:12px; color:var(--paper); background:var(--ink); transform:translateY(-180%); }
.skip-link:focus { transform:none; }
.site-header { height:5.87cqw; position:relative; display:flex; align-items:center; padding:0 3.94cqw; }
.nav { display:flex; width:26.85cqw; justify-content:space-between; align-items:center; color:var(--muted); font-size:.88cqw; }
.nav-book { display:none; }
.menu-toggle { display:none; }
.header-actions {
  position:absolute;
  z-index:4;
  top:2.05cqw;
  right:3.94cqw;
  display:flex;
  align-items:center;
  gap:1.5cqw;
  color:var(--muted);
  font:500 clamp(9px,.68cqw,12px)/1 var(--sans);
  letter-spacing:.12em;
  text-transform:uppercase;
}
.language-switcher {
  display:flex;
  align-items:center;
  gap:5px;
}
.language-switcher button { padding:2px 0; border:0; border-bottom:1px solid transparent; background:none; color:inherit; }
.language-switcher button[aria-pressed="true"] { border-bottom-color:currentColor; color:var(--ink); }
.header-book { padding:5px 0; border-bottom:1px solid transparent; white-space:nowrap; }
.header-book:hover,.header-book:focus-visible { border-bottom-color:currentColor; }
.nav a { padding:10px 0; }
.nav a:hover { text-decoration:underline; text-underline-offset:5px; }
.brand { position:absolute; width:10.15cqw; top:.35cqw; left:44.94%; }
.brand img { height:4.15cqw; object-fit:contain; }
.header-note { margin-left:auto; display:flex; align-items:center; gap:2.18cqw; color:var(--muted); font-size:.56cqw; line-height:1.85; letter-spacing:.21cqw; text-transform:uppercase; }
.rule { display:block; flex-shrink:0; width:2.82cqw; height:1px; background:var(--rule); }
.hero { height:40cqw; position:relative; }
.hero-copy { position:absolute; z-index:2; left:3.94%; top:8.1cqw; }
h1 { font-family:var(--serif); font-weight:400; margin:0; letter-spacing:-.44cqw; }
h1 span { display:block; white-space:nowrap; }
.headline-first { font-size:8.35cqw; line-height:.82; }
.headline-second { font-size:6.14cqw; line-height:1.09; letter-spacing:-.4cqw; }
html[lang="uk"] .headline-first { font-size:7.35cqw; }
html[lang="uk"] .headline-second { font-size:5.4cqw; letter-spacing:-.3cqw; }
.hero-subtitle { margin:1.83cqw 0 0; font-size:.84cqw; line-height:1.56; letter-spacing:.29cqw; color:var(--muted); text-transform:uppercase; }
.appointment { display:flex; align-items:center; width:max-content; margin-top:2.95cqw; padding:.78cqw 1.12cqw; border:1px solid currentColor; text-transform:uppercase; color:var(--muted); }
.appointment span { position:relative; font-size:.6cqw; font-weight:500; letter-spacing:.185cqw; }
.arrow { width:1.72cqw; height:1.24cqw; flex-shrink:0; fill:none; stroke:currentColor; stroke-width:1.25; transition:transform .2s ease; }
a:hover .arrow { transform:translateX(4px); }
.ui-arrow { display:inline-block; width:22px; height:15px; flex:0 0 auto; fill:none; stroke:currentColor; stroke-width:1.25; stroke-linecap:round; stroke-linejoin:round; transition:transform .2s ease; }
.ui-arrow--external { width:14px; height:14px; }
a:hover .ui-arrow:not(.ui-arrow--back),button:hover .ui-arrow:not(.ui-arrow--back) { transform:translateX(3px); }
a:hover .ui-arrow--external,button:hover .ui-arrow--external { transform:translate(2px,-2px); }
a:hover .ui-arrow--back,button:hover .ui-arrow--back { transform:translateX(-3px); }
.panel-link,.work-instagram,.next-city { align-items:center; gap:8px; }
.panel-link,.work-instagram { display:inline-flex; }
.hero-photo { position:absolute; left:32.11%; top:0; width:43.44%; height:39.3cqw; box-shadow:0 3px 10px #24201912; }
/* The two photographic regions are cropped in CSS from the supplied reference.
   Typography, layout, navigation, tiles and footer are live HTML/CSS. */
.photo-region { overflow:hidden; }
.photo-crop { display:block; width:100%; height:100%; }
.photo-region img { position:absolute; max-width:none; height:auto; }
.photo-region--main img { width:230.2067%; left:-73.9269%; top:-14.9385%; }
.floating-photo { position:absolute; z-index:3; top:4.21cqw; right:3.73%; width:24.52%; height:20.1cqw; box-shadow:0 1.1cqw 2cqw #3f2d1d22; }
.floating-photo > img { position:static; display:block; width:100%; height:100%; max-width:100%; object-fit:cover; object-position:50% 42%; transform:scale(1.28); transform-origin:8% 44%; filter:brightness(.98) contrast(.93) saturate(.78) sepia(.06); }
.hero-note { position:absolute; top:33.72cqw; left:79.35%; right:6.77%; display:flex; justify-content:space-between; align-items:flex-start; color:var(--muted); }
.hero-note p { margin:0; font-size:.63cqw; letter-spacing:.23cqw; line-height:1.68; text-transform:uppercase; }
.hero-location { flex-direction:column; gap:3px; font-size:clamp(8px,.63cqw,12px); line-height:1.7; letter-spacing:.16em; text-transform:uppercase; }
.mobile-scissors-emblem { display:none; }
.features { display:grid; grid-template-columns:1fr 1.01fr 1fr; gap:.69cqw; height:23.14cqw; }
.feature { display:block; position:relative; overflow:hidden; color:#fffdf5; background:#665e50; }
.feature > img { height:100%; object-fit:cover; transition:transform .5s ease; }
.feature:hover > img { transform:scale(1.025); }
.feature::after { content:""; position:absolute; inset:0; background:linear-gradient(transparent 35%,#19151030 100%); pointer-events:none; }
.feature--services > img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 43%; filter:saturate(.82) brightness(.9); }
.feature--studio > img { position:absolute; width:112%; height:auto; left:-6%; top:-1cqw; filter:saturate(.8) brightness(.88); }
.feature--work > img { object-position:50% 85%; filter:saturate(.76) brightness(.88); }
.feature-copy { position:absolute; z-index:1; left:2.31cqw; bottom:2.75cqw; }
.feature--services .feature-copy { left:3.14cqw; }
.feature h2 { margin:0 0 .67cqw; font-family:var(--serif); font-weight:400; font-size:2.56cqw; line-height:1.12; letter-spacing:-.09cqw; }
.feature-caption { display:flex; align-items:flex-end; gap:2.4cqw; }
.feature-caption span { font-size:.64cqw; line-height:1.8; letter-spacing:.22cqw; text-transform:uppercase; }
.feature--studio .feature-caption { gap:1.8cqw; }
.feature--studio .feature-copy { bottom:2.9cqw; }
.feature--work .feature-copy { bottom:2.1cqw; }
.footer { position:relative; height:6.04cqw; display:flex; align-items:center; padding:0 3.87cqw; color:var(--muted); text-transform:uppercase; }
.footer-name { font-size:1.38cqw; letter-spacing:.015cqw; }
.footer-rule { margin-left:2.9cqw; margin-right:2.13cqw; }
.footer-location,.footer-travel,.footer-motto,.socials,.footer-credit { font-size:.55cqw; letter-spacing:.2cqw; }
.footer-motto { position:absolute; left:35.13%; }
.socials { display:flex; gap:1.77cqw; margin-left:auto; }
.socials a { padding:10px 0; }
.socials a:hover,.footer-credit:hover { text-decoration:underline; text-underline-offset:4px; }
.footer-end { margin-left:2.16cqw; }
dialog { width:min(680px,calc(100% - 36px)); max-height:85svh; padding:48px; border:1px solid #d7d1c5; background:var(--paper); color:var(--ink); }
dialog { background-image:url("assets/paper-texture.svg"); background-size:320px 320px; }
dialog::backdrop { background:#16151077; backdrop-filter:blur(4px); }
.close-dialog { position:absolute; z-index:4; top:10px; right:16px; display:grid; place-items:center; width:40px; height:40px; padding:0; border:0; background:transparent; color:inherit; font-family:var(--sans); font-size:30px; font-weight:300; line-height:1; }
dialog h2 { font-family:var(--serif); font-size:52px; font-weight:400; letter-spacing:-2px; margin:12px 0 25px; }
dialog p { font-size:16px; line-height:1.7; }
.eyebrow { font-size:10px; letter-spacing:2px; text-transform:uppercase; }
.panel-portrait { max-height:330px; object-fit:cover; object-position:center 20%; }
.panel-link { display:inline-block; margin-top:18px; border-bottom:1px solid; padding-bottom:5px; font-size:13px; }
dl > div { padding:18px 0; border-bottom:1px solid #ccc6ba; }
dt { font-family:var(--serif); font-size:28px; }
dd { margin:8px 0 0; color:var(--muted); font-size:14px; line-height:1.5; }
.panel-gallery { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.panel-gallery img { height:240px; object-fit:cover; }
.visually-hidden { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0; }
.mobile-book,.mobile-flow-section { display:none; }
@media(max-width:700px) {
  html[lang="uk"] .headline-first { font-size:clamp(66px,18cqw,82px); }
  html[lang="uk"] .headline-second { font-size:clamp(43px,12.8cqw,58px); letter-spacing:-2.5px; }
  .site-intro__mark { width:86px; }
  .site-header { height:115px; padding:0 20px; align-items:flex-end; }
  .brand { width:115px; top:12px; left:calc(50% - 57.5px); }
  .brand img { height:44px; }
  .header-note { position:absolute; right:20px; top:30px; font-size:7px; letter-spacing:1.5px; }
  .header-note > span:first-child,.header-note .rule { display:none; }
  .nav { width:100%; font-size:12px; padding-bottom:15px; }
  .hero { height:auto; padding:25px 20px 24px; display:flex; flex-direction:column; }
  .hero-copy { position:relative; inset:auto; margin:0 0 34px; }
  h1 { letter-spacing:-5px; }
  .headline-first { font-size:96px; }
  .headline-second { font-size:clamp(55px,17.4cqw,68px); letter-spacing:-4px; }
  .hero-subtitle { font-size:10px; letter-spacing:3px; line-height:1.6; margin-top:22px; }
  .appointment { margin-top:25px; padding:11px 15px; }
  .appointment span { font-size:8px; letter-spacing:2px; }
  .arrow { width:23px; height:16px; }
  .hero-photo { position:relative; inset:auto; width:88%; height:auto; aspect-ratio:629 / 569; }
  .photo-region--main img { content:url("Screenshot%202026-07-28%20at%2017.42.43.png"); width:100%; height:100%; left:0; top:0; object-fit:cover; }
  .floating-photo { top:auto; bottom:88px; right:20px; width:39%; height:auto; aspect-ratio:354 / 388; }
  .hero-note { position:relative; inset:auto; align-self:flex-end; align-items:center; width:47%; margin-top:18px; }
  .hero-note p { font-size:7px; letter-spacing:2px; }
  .features { grid-template-columns:1fr; height:auto; gap:8px; }
  .feature { height:290px; }
  .feature-copy,.feature--services .feature-copy,.feature--studio .feature-copy,.feature--work .feature-copy { left:26px; bottom:28px; }
  .feature h2 { font-size:34px; letter-spacing:-1px; margin-bottom:8px; }
  .feature-caption,.feature--studio .feature-caption { gap:28px; }
  .feature-caption span { font-size:8px; letter-spacing:2px; }
  .footer { height:auto; min-height:145px; padding:26px 20px; flex-wrap:wrap; gap:20px; }
  .footer-name { font-size:18px; }
  .footer-rule { width:28px; margin:0; }
  .footer-location,.footer-travel,.footer-motto,.socials,.footer-credit { font-size:7px; letter-spacing:1.5px; }
  .footer-motto { position:static; }
  .socials { gap:15px; margin-left:auto; }
  .footer-end { display:none; }
  dialog { padding:38px 24px 28px; }
  .panel-gallery img { height:160px; }
}
/* Compact portrait layout: all three destinations remain on the first screen. */
@media(max-width:700px) {
  .page { width:100%; height:100dvh; display:grid; grid-template-rows:12% minmax(0,1fr) 9%; }
  .site-header { height:auto; padding:0 5%; }
  .brand { width:25%; left:37.5%; top:1dvh; }
  .brand img { height:5dvh; }
  .header-note { top:3dvh; right:5%; }
  .nav { padding-bottom:.5dvh; font-size:clamp(10px,3cqw,12px); }
  .nav a { padding:8px 0; }
  .page main { display:grid; grid-template-rows:minmax(0,1fr) 24%; gap:1dvh; min-height:0; }
  .hero { display:block; height:auto; min-height:0; padding:0; }
  .hero-copy { position:absolute; top:1dvh; left:5%; margin:0; }
  .headline-first { font-size:min(21cqw,9.5dvh); }
  .headline-second { font-size:min(16cqw,7dvh); letter-spacing:-.8cqw; }
  .hero-subtitle { margin-top:1.8dvh; font-size:min(2.55cqw,1.2dvh); letter-spacing:.65cqw; }
  .appointment { margin-top:1.8dvh; padding:min(1.35dvh,11px) 3.2cqw; }
  .appointment span { font-size:min(2.05cqw,1dvh); letter-spacing:.4cqw; }
  .mobile-scissors-emblem { position:absolute; z-index:2; top:32%; right:7%; display:block; width:min(29cqw,19dvh); height:auto; opacity:.82; }
  .hero-photo { position:absolute; left:5%; top:46%; width:69%; height:53%; aspect-ratio:auto; }
  .floating-photo { top:58%; bottom:auto; right:5%; width:33%; height:auto; aspect-ratio:354 / 388; }
  .hero-note { position:absolute; top:auto; bottom:1%; right:4%; width:20%; margin:0; }
  .hero-note p { font-size:min(1.55cqw,.8dvh); letter-spacing:.3cqw; }
  .features { grid-template-columns:repeat(3,minmax(0,1fr)); height:auto; gap:5px; min-height:0; }
  .feature { height:100%; min-width:0; }
  .feature-copy,.feature--services .feature-copy,.feature--studio .feature-copy,.feature--work .feature-copy { left:8%; right:6%; bottom:9%; }
  .feature h2 { font-size:clamp(15px,4.6cqw,23px); letter-spacing:-.5px; margin-bottom:5px; }
  .feature-caption,.feature--studio .feature-caption { gap:3px; }
  .feature-caption span { font-size:clamp(5px,1.5cqw,8px); letter-spacing:.2cqw; }
  .feature-caption .arrow { width:12px; height:10px; }
  .feature--studio > img { width:160%; height:100%; left:-30%; top:0; object-fit:cover; object-position:center 15%; }
  .feature--services > img { inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 43%; }
  .footer { min-height:0; height:100%; padding:1dvh 5%; gap:5px 12px; align-content:center; justify-content:space-between; }
  .footer-name { font-size:14px; }
  .footer-location,.footer-travel,.footer-motto,.socials,.footer-credit { font-size:6px; letter-spacing:1px; }
  .footer-rule { display:none; }
  .footer-motto { order:4; width:100%; text-align:center; }
  .socials { gap:10px; margin:0; }
  .socials a { padding:5px 0; }
}
/* Use the screen's width and height independently, leaving room around the
   content while keeping the full composition above the fold. */
@media(min-width:701px) {
  .page { width:100%; height:100dvh; display:grid; grid-template-rows:8% minmax(0,1fr) 8%; }
  .site-header { height:100%; padding:0 4.4%; }
  .nav { width:30%; font-size:clamp(13px,1.06cqw,21px); }
  .nav a { padding:12px 0; }
  .brand { top:50%; transform:translateY(-50%); }
  .brand img { height:min(4.15cqw,6.7dvh); }
  .header-note { font-size:clamp(7px,.56cqw,11px); }
  .page main { min-height:0; display:grid; grid-template-rows:minmax(0,65%) minmax(0,35%); }
  .hero { height:100%; min-height:0; }
  .hero-copy { left:4.4%; top:50%; transform:translateY(-50%); }
  .headline-first { font-size:min(8.1cqw,14dvh); }
  .headline-second { font-size:min(5.85cqw,10.1dvh); letter-spacing:-.36cqw; }
  .hero-subtitle { margin-top:min(2.3cqw,3.6dvh); font-size:clamp(10px,.8cqw,16px); }
  .appointment { margin-top:min(3.4cqw,4.8dvh); }
  .appointment span { font-size:clamp(8px,.62cqw,12px); }
  .hero-photo { left:32.5%; top:1.2dvh; width:43%; height:calc(100% - 1.2dvh - 12px); }
  .floating-photo { top:10.5%; right:6.2%; width:21.47%; height:17.69cqw; }
  .hero-note { top:auto; bottom:5%; left:79%; right:7%; }
  .hero-note p { font-size:clamp(8px,.63cqw,12px); }
  .features { height:100%; min-height:0; margin:0 2%; gap:.8cqw; }
  .feature h2 { font-size:min(2.56cqw,5.2dvh); }
  .feature-copy,.feature--studio .feature-copy,.feature--work .feature-copy { bottom:11%; }
  .feature--studio > img { height:100%; width:100%; left:0; top:0; object-fit:cover; object-position:center 24%; }
  .footer { height:100%; padding:0 4.4%; }
}

/* Services is a printed note among the photographs: tactile, quiet and
   deliberately imperfect, like a card left on the salon table. */
.feature--services {
  isolation:isolate;
  overflow:visible;
  color:var(--ink);
  background:transparent;
}
.feature--services::after { display:none; }
.feature--services .feature-copy {
  z-index:1;
  left:7%;
  bottom:24%;
  width:34%;
}
.feature--services h2 {
  margin:0;
  font-size:min(3.15cqw,6.2dvh);
  line-height:.9;
  letter-spacing:-.11cqw;
}
.feature--services .feature-caption {
  margin-top:1.35cqw;
  color:#3f403d;
}
.feature--services .feature-caption .arrow { width:2.15cqw; height:1.5cqw; }
.services-paper {
  position:absolute;
  z-index:2;
  top:4%;
  right:8%;
  width:48%;
  height:92%;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:13%;
  padding:12% 10%;
  border:1px solid #ded8cb;
  background-color:#f5f2eb;
  background-image:url("assets/paper-texture.svg"),linear-gradient(145deg,#fff8 0%,transparent 38%,#cfc6b31a 100%);
  background-size:260px 260px,100% 100%;
  box-shadow:-5px 8px 12px #2d25151c,4px 17px 25px #2d25152b;
  transform:rotate(-5.5deg);
  transform-origin:54% 74%;
  transition:transform .55s var(--ease-editorial),box-shadow .55s var(--ease-editorial);
}
.services-paper::after {
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(92deg,#fff5,transparent 16%,transparent 84%,#8d806511);
  mix-blend-mode:multiply;
}
.services-paper > span {
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:clamp(20px,2.15cqw,36px) auto 1fr;
  align-items:center;
  gap:8%;
  color:#4f504c;
  font-family:var(--sans);
  font-size:clamp(8px,.78cqw,15px);
  font-weight:500;
  letter-spacing:.13em;
  line-height:1;
  text-transform:uppercase;
}
.services-paper b { font:inherit; }
.services-paper__icon {
  display:block;
  width:100%;
  height:auto;
  overflow:visible;
  fill:none;
  stroke:#171714;
  stroke-width:1.25;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.services-paper__icon circle { fill:var(--paper); stroke:#171714; }
.services-paper__icon--scissors { transform:rotate(-2deg); }
.services-paper__icon--sparkles { transform:rotate(1.5deg); }
@media(hover:hover) {
  .feature--services:hover .services-paper {
    transform:translateY(-4px) rotate(-6.2deg);
    box-shadow:-6px 10px 15px #2d251520,5px 22px 30px #2d25152e;
  }
}
@media(max-width:700px) {
  .feature--services { overflow:hidden; }
  .feature--services .feature-copy {
    left:7%;
    right:auto;
    bottom:14%;
    width:34%;
  }
  .feature--services h2 {
    font-size:clamp(15px,4.7cqw,22px);
    letter-spacing:-.5px;
  }
  .feature--services .feature-caption { margin-top:10px; }
  .feature--services .feature-caption .arrow { width:15px; height:11px; }
  .services-paper {
    top:8%;
    right:4%;
    width:55%;
    height:84%;
    gap:14%;
    padding:12% 10%;
    transform:rotate(-4.5deg);
    box-shadow:-2px 4px 7px #2d25151c,3px 9px 13px #2d251526;
  }
  .services-paper > span {
    grid-template-columns:clamp(17px,5.2cqw,25px) auto 1fr;
    gap:7%;
    font-size:clamp(5px,1.55cqw,8px);
    letter-spacing:.1em;
  }
}
/* Soft daylight through a window and a sheer curtain. This fixed layer does
   not participate in layout, intercept clicks, or cover top-layer dialogs. */
.window-shadow { position:fixed; inset:0; z-index:0; overflow:hidden; pointer-events:none; user-select:none; mix-blend-mode:multiply; opacity:.19; }
.window-shadow svg { display:block; width:100%; height:100%; overflow:visible; }
.window-shadow > svg:not(.window-shadow__drawing) { display:none; }
.window-shadow__drawing { filter:blur(clamp(2px,.24vw,4px)); transform:scale(1.08); transform-origin:center; }
.window-shadow__position { transform-box:view-box; }
.window-shadow__foliage { transform-box:fill-box; transform-origin:50% 0; will-change:transform; fill:#665f52; opacity:.7; }
.window-shadow__foliage--left { transform-origin:0 10%; }
.window-shadow__foliage--right { transform-origin:100% 0; }
.window-shadow__foliage--dapple { transform-origin:50% 50%; opacity:.72; }
.window-shadow__foliage--dapple-round { transform-origin:50% 50%; filter:blur(clamp(16px,1.5vw,28px)); opacity:.18; }
.window-shadow__position--right { display:none; }
.window-shadow__stem { fill:none; stroke:#665f52; stroke-width:8; stroke-linecap:round; opacity:.42; }
.window-shadow__stem--fine { stroke-width:5; opacity:.42; }
/* script.js shares a continuous breeze across the foliage, with delayed
   cluster responses and subtle changes in the projected leaf shapes. */
.window-shadow__cluster { transform-box:fill-box; transform-origin:20% 0; }
.window-shadow__cluster--soft { opacity:.78; }
.window-shadow__cluster--near { filter:blur(clamp(2px,.3vw,5px)); }
.window-shadow__cluster--mid { filter:blur(clamp(7px,.65vw,12px)); opacity:.66; }
.window-shadow__cluster--far { filter:blur(clamp(13px,1.2vw,22px)); opacity:.5; }
.window-shadow__cluster--branch-leaves { filter:blur(clamp(5px,.5vw,9px)); opacity:.82; }
.window-shadow__curtain { transform-box:fill-box; transform-origin:50% 0; will-change:transform; opacity:.8; }
@media(max-width:700px) {
  .window-shadow { opacity:.2; }
  /* The artwork keeps its original proportions on portrait screens. These
     wrapper offsets bring both branches into the narrower crop without
     interfering with the animated transforms on the branches themselves. */
  .window-shadow__position--left { transform:translateX(520px); }
  .window-shadow__position--right { transform:translateX(-520px); }
}
@media(prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  *,*::before,*::after { transition:none!important; }
  .site-intro { display:none!important; }
  .intro-pending .page,.intro-pending .skip-link { opacity:1; visibility:visible; }
  .intro-revealing .page { animation:none; }
  .window-shadow { display:block!important; opacity:.2; }
  .window-shadow__drawing { visibility:visible; }
  .window-shadow__curtain { animation:none; will-change:auto; opacity:.75; }
  .window-shadow__foliage,.window-shadow__cluster { animation:none!important; transform:none; will-change:auto; }
}

/* Direct contact and a compact travel itinerary. */
.header-note.header-location { display:flex; flex-direction:column; align-items:flex-start; gap:3px; line-height:1.7; }
.header-home { white-space:nowrap; }
.next-city { display:block; font-size:clamp(7px,.5cqw,9px); letter-spacing:.12em; color:#71716b; white-space:nowrap; }
.next-city[hidden] { display:none; }
.next-city-arrow { width:12px; height:9px; margin-left:4px; vertical-align:middle; }
.next-city:hover [data-next-city] { text-decoration:underline; text-underline-offset:3px; }
.next-city:hover .next-city-arrow { transform:translateX(2px); }
.header-note.travel-link { gap:1.6cqw; padding:10px 0; }
.travel-link > span { white-space:nowrap; }
.travel-arrow { display:inline-block; margin-left:5px; font-size:1.4em; }
.travel-link:hover .travel-arrow { transform:translate(2px,-2px); }
.travel-link:hover { color:var(--ink); }
.footer { display:grid; grid-template-columns:1fr auto 1fr; gap:1.5cqw; }
.footer-travel { width:max-content; white-space:nowrap; }
.footer-travel:hover { text-decoration:underline; text-underline-offset:5px; }
.footer-motto { position:static; justify-self:center; }
.footer .socials { justify-self:start; margin:0; }
.footer-credit { justify-self:end; white-space:nowrap; }
.footer-end { display:none; }
.booking-phone { display:block; width:max-content; max-width:100%; margin:28px 0 20px; font-family:var(--serif); font-size:clamp(25px,5vw,44px); line-height:1; letter-spacing:-.025em; white-space:nowrap; }
.booking-actions { display:flex; align-items:center; flex-wrap:wrap; gap:24px; }
.booking-channels { display:flex; align-items:center; gap:16px; }
.contact-icon { display:grid; place-items:center; width:44px; height:44px; border:0; color:var(--ink); transition:transform .2s ease,opacity .2s ease; }
.contact-icon--primary { transform:scale(1.08); }
.contact-icon--secondary { opacity:.55; }
.contact-icon svg { width:28px; height:28px; fill:none; stroke:currentColor; stroke-width:1.25; stroke-linecap:round; stroke-linejoin:round; }
.contact-icon--static { cursor:default; }
.contact-icon__dot { fill:currentColor; stroke:none; }
a.contact-icon:hover { transform:translateY(-2px); }
.contact-button { display:inline-flex; align-items:center; justify-content:space-between; gap:28px; padding:16px 20px; border:1px solid var(--ink); color:inherit; background:transparent; font-size:12px; letter-spacing:.03em; }
.contact-button:hover { background:var(--ink); color:var(--paper); }
.booking-actions .panel-link { margin:0; }
dialog .booking-note { margin-top:26px; color:var(--muted); font-size:13px; }
dialog[data-panel="book"] { position:relative; padding-bottom:88px; }
.booking-logo { position:absolute; right:42px; bottom:28px; width:112px; height:auto; opacity:.82; }
.travel-visit { padding:22px 0; margin:22px 0; border-block:1px solid #ccc6ba; }
.travel-visit p { margin-bottom:0; }
.city-stop { display:grid; grid-template-columns:1fr auto; align-items:center; gap:12px; padding:18px 0; border-bottom:1px solid #ccc6ba; }
.city-stop:first-child { border-top:1px solid #ccc6ba; }
.city-stop h3 { margin:0; font:32px var(--serif); }
.city-stop p { margin:4px 0 0; font-size:13px; }
.city-stop a { font-size:11px; text-decoration:underline; text-underline-offset:4px; }
.travel-dates { margin:28px 0; }
@media(max-width:700px) {
  .site-header .brand { left:5%; }
  .header-note.header-location { top:1.8dvh; right:5%; gap:2px; font-size:8px; letter-spacing:1.4px; }
  .header-note.header-location > .header-home { display:block; }
  .header-location .next-city { font-size:7px; letter-spacing:.06em; }
  .header-note.travel-link { top:1.8dvh; right:5%; display:flex; flex-direction:column; align-items:flex-end; gap:1px; padding:0; font-size:6px; letter-spacing:1px; line-height:1.8; }
  .header-note.travel-link > span:first-child { display:block; }
  .header-note.travel-link .rule { display:none; }
  .travel-arrow { margin-left:2px; }
  .footer { grid-template-columns:1fr auto; grid-template-rows:auto auto; gap:5px 12px; }
  .footer-motto { grid-column:1 / -1; grid-row:2; width:auto; order:initial; }
  .footer .socials { grid-column:1; grid-row:1; }
  .footer-credit { grid-column:2; grid-row:1; }
  .booking-phone { font-size:clamp(24px,7vw,34px); }
  .booking-actions { gap:16px; }
  dialog[data-panel="book"] { padding-bottom:82px; }
  .booking-logo { right:24px; bottom:22px; width:94px; }
}

/* About: one-screen editorial split, portrait at left and story at right. */
dialog[data-panel="about"] { width:min(1180px,calc(100% - 40px)); height:min(800px,calc(100dvh - 40px)); max-height:calc(100dvh - 40px); padding:44px; overflow:hidden; }
dialog[data-panel="about"] #detail-content { height:100%; }
.about-profile { height:100%; display:grid; grid-template-columns:minmax(0,.95fr) minmax(430px,1.05fr); grid-template-rows:auto minmax(0,1fr); column-gap:48px; }
.about-heading { grid-column:2; grid-row:1; padding:3px 58px 0 0; }
dialog .about-heading .eyebrow { margin:0 0 10px; font-size:10px; letter-spacing:2.4px; line-height:1.5; }
dialog .about-heading h2 { margin:0 0 20px; font-size:clamp(54px,5.8vw,76px); line-height:.98; letter-spacing:-3px; }
.about-photo { grid-column:1; grid-row:1 / 3; display:block; width:100%; height:100%; min-height:0; object-fit:cover; object-position:center 28%; overflow:hidden; }
.about-copy { grid-column:2; grid-row:2; min-height:0; display:flex; flex-direction:column; padding:0; }
dialog .about-copy > p { margin:0 0 15px; font-size:15px; line-height:1.48; }
.about-facts { display:grid; grid-template-columns:1fr 1fr 1fr; margin:10px 0 0; padding-top:18px; border-top:1px solid #d7d1c5; }
.about-facts > div { padding:0 18px; border:0; }
.about-facts > div:first-child { padding-left:0; }
.about-facts > div + div { border-left:1px solid #d7d1c5; }
.about-facts dt { font-family:var(--sans); font-size:9px; letter-spacing:1.8px; line-height:1.5; text-transform:uppercase; color:#62635e; }
.about-facts dd { margin:4px 0 0; font-family:var(--serif); font-size:19px; line-height:1.2; color:var(--ink); }
.about-facts a:hover { text-decoration:underline; text-underline-offset:4px; }
.about-book { margin-top:16px; font-size:15px; }
@media(min-width:701px) {
  .about-book { margin-top:clamp(56px,8dvh,88px); }
}
@media(min-width:701px) and (max-height:720px) {
  dialog[data-panel="about"] { padding:30px; }
  .about-profile { column-gap:34px; }
  dialog .about-heading h2 { font-size:54px; margin-bottom:13px; }
  dialog .about-copy > p { margin-bottom:10px; font-size:13px; line-height:1.4; }
  .about-facts { padding-top:12px; }
  .about-facts dd { font-size:17px; }
  .about-book { margin-top:12px; font-size:14px; }
}
@media(max-width:700px) {
  dialog[data-panel="about"] { width:calc(100% - 24px); height:calc(100dvh - 24px); max-height:none; padding:24px 20px 28px; overflow:auto; }
  dialog[data-panel="about"] #detail-content { height:auto; }
  dialog[data-panel="about"] .close-dialog { position:sticky; float:right; top:-16px; margin:-16px -12px -16px 0; }
  .about-profile { height:auto; display:block; }
  .about-heading { padding:6px 0 0; }
  dialog .about-heading .eyebrow { font-size:9px; letter-spacing:2px; }
  dialog .about-heading h2 { font-size:clamp(40px,10.8vw,64px); letter-spacing:-1.8px; margin-bottom:20px; }
  .about-photo { width:100%; height:auto; aspect-ratio:4 / 3; object-position:center 22%; }
  .about-copy { padding:0; }
  dialog .about-copy > p { font-size:15px; line-height:1.55; margin:18px 0; }
  .about-facts { gap:16px; grid-template-columns:1fr; padding-top:18px; }
  .about-facts > div,.about-facts > div + div { padding:0; border:0; }
  .about-facts dd { font-size:21px; }
  .about-book { font-size:16px; }
}

/* Services: the supplied working photograph and fine-line tool icons. */
dialog[data-panel="services"] { width:min(840px,calc(100% - 40px)); max-height:calc(100dvh - 40px); padding:40px 44px; }
dialog .services-eyebrow { margin:0; font-size:10px; letter-spacing:2px; }
dialog[data-panel="services"] h2 { margin:12px 0 24px; font-size:58px; line-height:1; }
.services-layout { display:grid; grid-template-columns:minmax(0, .95fr) minmax(0,1.8fr); gap:38px; align-items:stretch; }
.services-photo-crop { min-height:0; overflow:hidden; }
.services-photo { display:block; width:100%; height:calc(100% + 4px); min-height:0; object-fit:cover; object-position:50% 42%; filter:saturate(.84) brightness(.94); transform:translateY(-4px); }
.services-list { margin:0; }
.services-list > .service-item { padding:22px 0 24px; }
.services-list > .service-item:first-child { padding-top:0; }
.service-item dt { font-size:32px; line-height:1.1; letter-spacing:-.6px; }
.service-item dd { margin:12px 0 0; }
dialog .service-item p { margin:0; font-size:14px; line-height:1.5; color:#444541; }
.service-tags { display:flex; flex-wrap:wrap; gap:8px 0; list-style:none; padding:0; margin:18px 0 0; font-size:9px; line-height:1.5; letter-spacing:.8px; text-transform:uppercase; }
.service-tags li + li { border-left:1px solid #a79884; margin-left:12px; padding-left:12px; }
.services-actions { display:flex; flex-wrap:wrap; align-items:flex-start; gap:14px 24px; margin:24px 0 0; }
.services-actions .panel-link { margin-top:0; font-size:10px; letter-spacing:1.3px; }
@media(max-width:700px) {
  dialog[data-panel="services"] { padding:32px 24px; width:calc(100% - 24px); max-height:calc(100dvh - 24px); }
  dialog[data-panel="services"] h2 { font-size:48px; }
  .services-layout { grid-template-columns:1fr; gap:26px; }
  .services-photo-crop { height:220px; }
  .services-photo { object-position:center 39%; }
  .service-item dt { font-size:30px; }
  .service-tags { font-size:8px; letter-spacing:.5px; }
  .service-tags li + li { margin-left:8px; padding-left:8px; }
}

/* The work panel is an editorial contact sheet, with a new lead in each edit. */
dialog[data-panel="work"] { width:calc(100% - 32px); max-width:1700px; height:calc(100dvh - 32px); max-height:1080px; padding:34px 32px 28px; overflow:auto; }
dialog[data-panel="work"] #detail-content, .work-editorial { height:100%; }
.work-grid { height:100%; display:grid; grid-template-columns:repeat(32,minmax(0,1fr)); grid-template-rows:68px minmax(0,1.08fr) minmax(0,1fr) 44px; gap:12px 18px; }
.work-track { display:contents; }
.work-carousel-controls { display:none; }
.work-intro { grid-column:1 / 8; grid-row:1 / 3; display:flex; flex-direction:column; padding:0 22px 18px 0; min-width:0; }
.work-intro > * { flex-shrink:0; }
.work-eyebrow { margin:0 0 29px; color:#74756f; text-transform:uppercase; letter-spacing:2.9px; }
dialog .work-eyebrow { font-size:10px; line-height:1.75; }
dialog .work-intro h2 { margin:0 0 24px; font-size:clamp(56px,min(4.95vw,8.1dvh),78px); line-height:.91; letter-spacing:-.052em; }
.work-slash { display:inline-block; font-size:.8em; font-weight:300; color:#929189; margin-left:10px; transform:translateY(-.06em); }
.work-description { max-width:285px; margin:0; color:#6f706c; font-size:14px; line-height:1.62; }
dialog .work-description { font-size:14px; line-height:1.62; }
.work-instagram { grid-column:1 / 8; grid-row:4; align-self:end; width:max-content; margin:0; padding-bottom:5px; border-bottom:1px solid #757670; color:#555651; font-size:10px; font-weight:500; letter-spacing:1.2px; text-transform:uppercase; }
.work-instagram:hover { text-decoration:none; }
.work-filters { grid-column:8 / 22; grid-row:1; z-index:2; align-self:start; display:flex; align-items:center; justify-content:flex-start; gap:48px; width:max-content; max-width:100%; margin-left:29px; padding-top:17px; color:#777873; font-family:var(--sans); font-size:11px; font-weight:500; letter-spacing:1.65px; text-transform:uppercase; }
.work-filters button { position:relative; min-height:38px; padding:4px 0 12px; border:0; background:none; color:inherit; }
.work-filters button:hover { color:#21221d; }
.work-filters button[aria-pressed="true"] { color:#21221d; }
.work-filters button[aria-pressed="true"]::after { content:""; position:absolute; height:1px; bottom:0; left:0; right:0; background:currentColor; }
/* The contact sheet changes scale and rhythm without changing the edit itself. */
.work-look { min-width:0; min-height:0; contain:size; margin:0; display:grid; grid-template-rows:minmax(0,1fr) 34px; }
.work-look-frame { min-width:0; min-height:0; overflow:hidden; }
.work-look-frame img { width:100%; height:100%; min-height:0; object-fit:cover; object-position:center 38%; }
.work-look--pastel .work-look-frame img { transform:scale(1.14); }
.work-look figcaption { display:flex; align-items:center; gap:18px; padding:6px 2px 0; }
.work-look figcaption > span { flex-shrink:0; font-family:var(--serif); font-size:15px; line-height:1; letter-spacing:-.25px; }
.work-look figcaption small { display:flex; align-items:center; gap:0; color:#797a75; font-size:7px; line-height:1.4; text-transform:uppercase; letter-spacing:1.9px; }
.work-look figcaption small::before { display:none; }
@media(min-width:901px) {
  .work-look:nth-of-type(1) { grid-column:8 / 21; grid-row:2; margin-left:29px; }
  .work-look:nth-of-type(2) { grid-column:21 / 27; grid-row:2; }
  .work-look:nth-of-type(3) { grid-column:27 / 33; grid-row:2; z-index:1; margin:9px 8px 3px 4px; transform:rotate(1.55deg); transform-origin:50% 44%; }
  .work-look:nth-of-type(4) { grid-column:1 / 8; grid-row:3; margin:4px 5px 2px 2px; transform:rotate(-.65deg); transform-origin:50% 38%; }
  .work-look:nth-of-type(5) { grid-column:8 / 20; grid-row:3; margin-left:29px; }
  .work-look:nth-of-type(6) { grid-column:20 / 33; grid-row:3; }
  .work-look:nth-of-type(1) img { object-position:50% 34%; }
  .work-look:nth-of-type(2) img { object-position:50% 43%; }
  .work-look:nth-of-type(3) img { object-position:50% 42%; }
  .work-look:nth-of-type(4) img { object-position:50% 36%; }
  .work-look:nth-of-type(5) img { object-position:50% 40%; }
  .work-look:nth-of-type(6) img { object-position:50% 44%; }

  /* Each edit uses its own contact sheet: cut shows shape, colour lets
     placement lead, and styling gives movement the broadest frames. */
  .work-grid[data-work-edit="cut"] .work-look,
  .work-grid[data-work-edit="colour"] .work-look,
  .work-grid[data-work-edit="styling"] .work-look { margin:0; transform:none; }

  .work-grid[data-work-edit="cut"] .work-look:nth-of-type(1) { grid-column:8 / 18; grid-row:2 / 4; }
  .work-grid[data-work-edit="cut"] .work-look:nth-of-type(2) { grid-column:18 / 25; grid-row:2; }
  .work-grid[data-work-edit="cut"] .work-look:nth-of-type(3) { grid-column:25 / 33; grid-row:2; }
  .work-grid[data-work-edit="cut"] .work-look:nth-of-type(4) { grid-column:1 / 8; grid-row:3; }
  .work-grid[data-work-edit="cut"] .work-look:nth-of-type(5) { grid-column:18 / 26; grid-row:3; }
  .work-grid[data-work-edit="cut"] .work-look:nth-of-type(6) { grid-column:26 / 33; grid-row:3; }
  .work-grid[data-work-edit="cut"] .work-look:nth-of-type(1) img { object-position:50% 35%; }
  .work-grid[data-work-edit="cut"] .work-look:nth-of-type(2) img { object-position:50% 42%; }
  .work-grid[data-work-edit="cut"] .work-look:nth-of-type(3) img { object-position:50% 34%; }
  .work-grid[data-work-edit="cut"] .work-look:nth-of-type(4) img { object-position:50% 35%; }
  .work-grid[data-work-edit="cut"] .work-look:nth-of-type(5) img { object-position:50% 43%; }
  .work-grid[data-work-edit="cut"] .work-look:nth-of-type(6) img { object-position:50% 38%; }

  .work-grid[data-work-edit="colour"] .work-look:nth-of-type(1) { grid-column:8 / 23; grid-row:2; }
  .work-grid[data-work-edit="colour"] .work-look:nth-of-type(2) { grid-column:23 / 28; grid-row:2; }
  .work-grid[data-work-edit="colour"] .work-look:nth-of-type(3) { grid-column:28 / 33; grid-row:2; }
  .work-grid[data-work-edit="colour"] .work-look:nth-of-type(4) { grid-column:1 / 8; grid-row:3; }
  .work-grid[data-work-edit="colour"] .work-look:nth-of-type(5) { grid-column:8 / 18; grid-row:3; }
  .work-grid[data-work-edit="colour"] .work-look:nth-of-type(6) { grid-column:18 / 33; grid-row:3; }
  .work-grid[data-work-edit="colour"] .work-look:nth-of-type(1) img { object-position:50% 50%; }
  .work-grid[data-work-edit="colour"] .work-look:nth-of-type(2) img { object-position:50% 42%; }
  .work-grid[data-work-edit="colour"] .work-look:nth-of-type(3) img { object-position:50% 35%; }
  .work-grid[data-work-edit="colour"] .work-look:nth-of-type(4) img { object-position:50% 46%; }
  .work-grid[data-work-edit="colour"] .work-look:nth-of-type(5) img { object-position:50% 42%; }
  .work-grid[data-work-edit="colour"] .work-look:nth-of-type(6) img { object-position:50% 34%; }

  .work-grid[data-work-edit="styling"] .work-look:nth-of-type(1) { grid-column:8 / 19; grid-row:2; }
  .work-grid[data-work-edit="styling"] .work-look:nth-of-type(2) { grid-column:19 / 25; grid-row:2; }
  .work-grid[data-work-edit="styling"] .work-look:nth-of-type(3) { grid-column:25 / 33; grid-row:2; }
  .work-grid[data-work-edit="styling"] .work-look:nth-of-type(4) { grid-column:1 / 8; grid-row:3; }
  .work-grid[data-work-edit="styling"] .work-look:nth-of-type(5) { grid-column:8 / 17; grid-row:3; }
  .work-grid[data-work-edit="styling"] .work-look:nth-of-type(6) { grid-column:17 / 33; grid-row:3; }
  .work-grid[data-work-edit="styling"] .work-look:nth-of-type(1) img { object-position:50% 28%; }
  .work-grid[data-work-edit="styling"] .work-look:nth-of-type(2) img { object-position:50% 42%; }
  .work-grid[data-work-edit="styling"] .work-look:nth-of-type(3) img { object-position:50% 35%; }
  .work-grid[data-work-edit="styling"] .work-look:nth-of-type(4) img { object-position:50% 35%; }
  .work-grid[data-work-edit="styling"] .work-look:nth-of-type(5) img { object-position:50% 34%; }
  .work-grid[data-work-edit="styling"] .work-look:nth-of-type(6) img { object-position:50% 30%; }
}
@media(min-width:901px) and (max-height:780px) {
  dialog[data-panel="work"] { padding:18px; }
  .work-grid { grid-template-rows:48px minmax(0,1.08fr) minmax(0,1fr) 36px; gap:8px 12px; }
  .work-intro { padding-top:4px; padding-bottom:8px; }
  dialog .work-eyebrow { margin-bottom:9px; font-size:9px; }
  dialog .work-intro h2 { font-size:clamp(44px,min(5.1vw,8.5dvh),70px); margin-bottom:16px; }
  .work-description { font-size:12px; line-height:1.45; }
  .work-filters { gap:34px; font-size:10px; }
  .work-look figcaption { gap:7px; }
  .work-look figcaption small { gap:7px; font-size:6px; letter-spacing:1px; }
}
@media(max-width:900px) {
  dialog[data-panel="work"] { width:calc(100% - 24px); height:calc(100dvh - 24px); max-height:none; padding:24px 16px 16px; }
  dialog[data-panel="work"] #detail-content,.work-editorial { height:auto; }
  dialog[data-panel="work"] .close-dialog { position:sticky; float:right; top:-16px; margin:-16px -8px -16px 0; }
  .work-grid { height:auto; grid-template-columns:repeat(2,minmax(0,1fr)); grid-template-rows:auto; gap:22px 12px; }
  .work-intro { grid-column:1 / -1; grid-row:auto; padding:4px 4px 0; }
  dialog .work-intro h2 { font-size:64px; }
  .work-description { display:none; }
  .work-filters { grid-column:1 / -1; grid-row:auto; margin:0 4px; padding-top:0; max-width:340px; gap:22px; font-size:10px; letter-spacing:1.2px; }
  .work-instagram { grid-column:1 / -1; grid-row:auto; margin:0 4px; }
  .work-look { grid-column:span 1; height:300px; }
  .work-look--lead { grid-column:1 / -1; height:440px; }
  .work-look figcaption { display:block; padding-top:5px; }
  .work-look figcaption > span { font-size:14px; }
  .work-look figcaption small { font-size:6px; letter-spacing:1px; margin-top:4px; }
  .work-look figcaption small::before { display:none; }
  .work-look { grid-template-rows:minmax(0,1fr) 42px; }
}

/* Editorial motion: elements lift into place once, while the window shadow
   remains the only ambient loop. */
:root { --ease-editorial:cubic-bezier(.22,1,.36,1); }
@keyframes ui-rise {
  from { opacity:0; transform:translateY(10px); }
  to { opacity:1; transform:translateY(0); }
}
@keyframes ui-fade {
  from { opacity:0; }
  to { opacity:1; }
}
@keyframes photo-settle {
  from { opacity:0; transform:scale(1.018); }
  to { opacity:1; transform:scale(1); }
}
@keyframes card-reveal {
  from { opacity:0; clip-path:inset(0 0 8% 0); }
  to { opacity:1; clip-path:inset(0); }
}
@keyframes work-look-enter {
  from { opacity:0; clip-path:inset(0 0 5% 0); }
  to { opacity:1; clip-path:inset(0); }
}
.site-header .nav { animation:ui-rise .65s var(--ease-editorial) .04s backwards; }
.site-header .brand { animation:ui-fade .75s ease-out .12s backwards; }
.site-header .header-location { animation:ui-rise .65s var(--ease-editorial) .18s backwards; }
.hero-copy > * { animation:ui-rise .72s var(--ease-editorial) backwards; }
.hero-copy > :nth-child(1) { animation-delay:.12s; }
.hero-copy > :nth-child(2) { animation-delay:.2s; }
.hero-copy > :nth-child(3) { animation-delay:.28s; }
.hero-photo { animation:photo-settle .95s var(--ease-editorial) .18s backwards; }
.floating-photo { animation:photo-settle .9s var(--ease-editorial) .32s backwards; }
.hero-note { animation:ui-rise .65s var(--ease-editorial) .4s backwards; }
.feature { animation:card-reveal .72s var(--ease-editorial) backwards; }
.feature:nth-child(1) { animation-delay:.38s; }
.feature:nth-child(2) { animation-delay:.46s; }
.feature:nth-child(3) { animation-delay:.54s; }
.footer > * { animation:ui-fade .65s ease-out .62s backwards; }
.work-look { animation:work-look-enter .5s var(--ease-editorial) both; animation-delay:calc(var(--look-index,0) * 38ms); }

.nav a { position:relative; text-decoration:none; }
.nav a::after { content:""; position:absolute; left:0; right:0; bottom:3px; height:1px; background:currentColor; transform:scaleX(0); transform-origin:left; transition:transform .35s var(--ease-editorial); }
.nav a:hover { text-decoration:none; }
.nav a:hover::after,.nav a:focus-visible::after { transform:scaleX(1); }
.appointment,.feature-copy,.close-dialog,.contact-button,.panel-link,.work-filters button { transition:transform .28s var(--ease-editorial),opacity .2s ease,color .2s ease,background-color .2s ease,border-color .2s ease; }
.work-filters button::after { content:""; position:absolute; height:1px; bottom:0; left:0; right:0; background:currentColor; transform:scaleX(0); transform-origin:left; transition:transform .32s var(--ease-editorial); }
.work-filters button[aria-pressed="true"]::after { transform:scaleX(1); }

/* One editorial action voice across hero and panels. Icon-only controls,
   navigation and filter labels keep their distinct interface roles. */
.appointment span,
dialog .panel-link,
dialog .contact-button,
.work-instagram,
dialog .city-stop a {
  font-family:var(--sans);
  font-size:clamp(9px,.62cqw,12px);
  font-weight:500;
  line-height:1.35;
  letter-spacing:clamp(1.6px,.185cqw,2.7px);
  text-transform:uppercase;
}
dialog .panel-link {
  width:max-content;
  max-width:100%;
  align-self:flex-start;
}
dialog { overscroll-behavior:contain; -webkit-overflow-scrolling:touch; }
dialog[open]::backdrop { animation:ui-fade .24s ease-out; }

@media(hover:hover) {
  .appointment:hover { color:var(--paper); background:var(--ink); border-color:var(--ink); }
  .feature:hover .feature-copy { transform:translateY(-3px); }
  .close-dialog:hover { transform:scale(.9); opacity:.72; }
  .panel-link:hover { transform:translateX(2px); }
}

@media(max-width:700px) {
  a,button { touch-action:manipulation; -webkit-tap-highlight-color:transparent; }
  .nav a { display:flex; align-items:center; min-height:40px; }
  .appointment { min-height:40px; }
  .next-city { min-height:24px; padding:4px 0; }
  .feature:active,.appointment:active,.nav a:active,.contact-button:active,.panel-link:active { transform:scale(.985); opacity:.82; }
  .close-dialog { width:44px; height:44px; touch-action:manipulation; }
  dialog { scrollbar-width:thin; }
}

/* Mobile is a vertical sequence of destinations, followed by a horizontal
   work reel. Each gesture advances one clear action at a time. */
@media(max-width:700px) {
  html { scroll-snap-type:y proximity; }
  html.mobile-section-jump { scroll-snap-type:none !important; scroll-behavior:auto !important; }
  body { display:block; align-items:initial; }
  body.menu-open { overflow:hidden; }
  .page { width:100%; height:auto; display:block; }
  .site-header {
    position:sticky;
    z-index:30;
    top:0;
    height:76px;
    padding:0 6%;
    align-items:center;
    background:#f7f5efeb;
    border-bottom:1px solid #bdb7aa66;
    backdrop-filter:blur(9px);
  }
  .site-header .brand {
    z-index:32;
    left:6%;
    top:50%;
    width:104px;
    transform:translateY(-50%);
  }
  .site-header .brand img { height:42px; }
  .language-switcher {
    font-size:10px;
  }
  .header-actions { position:fixed; top:31px; right:76px; gap:0; }
  .header-book { display:none; }
  .site-header .nav-book { display:flex; }
  .hero-location {
    left:auto;
    right:4%;
    width:42%;
    max-width:42%;
    align-items:flex-end;
    text-align:right;
    font-size:7px;
    letter-spacing:.1em;
  }
  .hero-location .next-city { max-width:100%; white-space:normal; text-align:right; }
  .header-note.header-location { display:none; }
  .menu-toggle {
    position:absolute;
    z-index:32;
    top:50%;
    right:6%;
    display:grid;
    place-content:center;
    gap:7px;
    width:48px;
    height:48px;
    padding:0;
    border:0;
    background:transparent;
    color:var(--ink);
    appearance:none;
    -webkit-appearance:none;
    -webkit-tap-highlight-color:transparent;
    transform:translateY(-50%);
  }
  .menu-toggle span {
    display:block;
    width:27px;
    height:1px;
    background:currentColor;
    transition:transform .32s var(--ease-editorial);
  }
  .menu-open .menu-toggle span:first-child { transform:translateY(4px) rotate(45deg); }
  .menu-open .menu-toggle span:last-child { transform:translateY(-4px) rotate(-45deg); }
  .site-header .nav {
    position:fixed;
    z-index:31;
    inset:0;
    display:flex;
    width:100%;
    height:100svh;
    padding:19svh 8% 10svh;
    flex-direction:column;
    align-items:flex-start;
    justify-content:center;
    gap:clamp(20px,4svh,36px);
    visibility:hidden;
    opacity:0;
    background-color:var(--paper);
    background-image:url("assets/paper-texture.svg");
    background-size:320px 320px;
    transform:translateY(-12px);
    transition:opacity .25s ease,transform .38s var(--ease-editorial),visibility 0s linear .38s;
  }
  .menu-open .site-header .nav {
    visibility:visible;
    opacity:1;
    transform:none;
    transition-delay:0s;
  }
  .site-header .nav a {
    min-height:48px;
    padding:0;
    font:400 clamp(48px,16vw,72px)/1 var(--serif);
    letter-spacing:-.045em;
  }
  .page main { display:block; }
  .hero { height:calc(100svh - 76px); min-height:560px; scroll-snap-align:start; }
  .features {
    display:none;
  }
  .mobile-flow-section,
  .mobile-book {
    position:relative;
    display:block;
    width:100%;
    height:100svh;
    min-height:100svh;
    scroll-snap-align:start;
    scroll-snap-stop:always;
    background-color:var(--paper);
    background-image:url("assets/paper-texture.svg");
    background-size:320px 320px;
  }
  .mobile-section-heading { padding:0; }
  .mobile-section-heading .eyebrow {
    margin:0 0 8px;
    color:#66665f;
    font-size:9px;
    letter-spacing:.2em;
  }
  .mobile-section-heading h2,
  .mobile-about h2 {
    margin:0;
    font:400 clamp(52px,16vw,72px)/.95 var(--serif);
    letter-spacing:-.05em;
  }
  .mobile-services {
    display:grid;
    grid-template-rows:auto minmax(190px,34svh) 1fr;
    gap:clamp(18px,3svh,28px);
    padding:clamp(94px,12svh,116px) 7% 5svh;
  }
  .mobile-services__photo {
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center 47%;
  }
  .mobile-services__list {
    display:grid;
    grid-template-columns:1fr;
    align-content:start;
  }
  .mobile-services__list article {
    display:grid;
    grid-template-columns:minmax(112px,.8fr) 1.35fr;
    gap:18px;
    padding:clamp(11px,1.8svh,16px) 0;
    border-top:1px solid #c8c2b6;
  }
  .mobile-services__list article:last-child { border-bottom:1px solid #c8c2b6; }
  .mobile-services__list h3 {
    margin:0;
    font:400 clamp(21px,6vw,28px)/1.05 var(--serif);
  }
  .mobile-services__list p {
    margin:0;
    color:var(--muted);
    font-size:clamp(12px,3.5vw,15px);
    line-height:1.45;
  }
  .mobile-work { padding:clamp(91px,11.5svh,108px) 5% 4svh; overflow:hidden; }
  .mobile-work .work-grid { gap:12px; }
  .mobile-work .work-intro { padding:0; }
  .mobile-work .work-eyebrow { margin:0 0 7px; font-size:8px; }
  .mobile-work .work-intro h2 {
    margin:0;
    font:400 clamp(44px,13vw,60px)/1 var(--serif);
    letter-spacing:-.045em;
  }
  .mobile-work .work-filters button {
    min-height:42px;
    padding:0 3px;
  }
  .mobile-work .work-track { width:calc(100% + 5vw); margin-right:-5vw; padding-right:5vw; }
  .mobile-work .work-instagram { font-size:10px; letter-spacing:.17em; }
  .mobile-about {
    display:grid;
    grid-template-rows:43% 57%;
    padding-top:76px;
    overflow:hidden;
  }
  .mobile-about__photo {
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center 23%;
  }
  .mobile-about__story {
    display:flex;
    flex-direction:column;
    padding:clamp(24px,4svh,36px) 8% 4svh;
  }
  .mobile-about__story .eyebrow { margin:0 0 8px; font-size:9px; letter-spacing:.2em; }
  .mobile-about__story h2 { margin-bottom:clamp(14px,2.6svh,24px); }
  .mobile-about__story > p:not(.eyebrow):not(.mobile-about__place) {
    margin:0 0 10px;
    font-size:clamp(14px,3.8vw,17px);
    line-height:1.5;
  }
  .mobile-about__place {
    display:flex;
    align-items:center;
    gap:7px;
    margin:auto 0 0;
    padding-top:13px;
    border-top:1px solid #c8c2b6;
    color:#5c5d58;
    font-size:9px;
    letter-spacing:.16em;
    text-transform:uppercase;
  }
  .mobile-about__place .ui-arrow { width:16px; height:11px; }
  .mobile-book {
    display:flex;
    padding:max(96px,12svh) 8% max(28px,4svh);
    overflow:hidden;
  }
  .mobile-book__content {
    display:flex;
    flex-direction:column;
    width:100%;
    min-height:0;
  }
  .mobile-book .eyebrow {
    width:82%;
    margin:0 0 clamp(16px,3.2svh,30px);
    font-size:clamp(9px,2.7vw,12px);
    line-height:1.8;
    letter-spacing:.21em;
  }
  .mobile-book h2 {
    max-width:100%;
    margin:0;
    font:400 clamp(46px,13.8vw,80px)/.9 var(--serif);
    letter-spacing:-.06em;
  }
  .mobile-book__context {
    max-width:390px;
    margin:clamp(24px,5svh,48px) 0 0;
    font-size:clamp(17px,5vw,23px);
    line-height:1.55;
  }
  .mobile-book__phone {
    display:flex;
    flex-wrap:wrap;
    align-items:flex-end;
    gap:10px 18px;
    margin:clamp(24px,4.5svh,42px) 0 clamp(16px,3svh,28px);
  }
  .mobile-book .booking-phone {
    margin:0;
    font-size:clamp(34px,10.6vw,49px);
    -webkit-user-select:all;
    user-select:all;
  }
  .copy-phone {
    margin:0 0 3px;
    padding:0 0 4px;
    border:0;
    border-bottom:1px solid currentColor;
    background:none;
    color:var(--muted);
    font:500 9px/1.2 var(--sans);
    letter-spacing:.16em;
    text-transform:uppercase;
    cursor:pointer;
  }
  .copy-phone.is-copied { color:var(--ink); }
  .copy-phone:focus-visible {
    outline:1px solid currentColor;
    outline-offset:5px;
  }
  .mobile-book .booking-channels { gap:clamp(12px,4vw,20px); }
  .mobile-book .contact-icon {
    width:56px;
    height:56px;
  }
  .mobile-book .contact-icon svg { width:27px; height:27px; }
  .mobile-book__note {
    max-width:390px;
    margin:clamp(28px,5svh,48px) 0 0;
    color:var(--muted);
    font-size:clamp(15px,4.25vw,20px);
    line-height:1.55;
  }
  .mobile-book__travel {
    width:max-content;
    max-width:70%;
    margin-top:auto;
    padding:0 0 6px;
    border-bottom:1px solid;
    font-size:clamp(9px,2.8vw,12px);
    font-weight:500;
    line-height:1.4;
    letter-spacing:.18em;
    text-transform:uppercase;
  }
  .mobile-book__logo {
    position:absolute;
    right:8%;
    bottom:max(24px,3.5svh);
    width:clamp(104px,31vw,148px);
    height:auto;
    opacity:.82;
  }
  .footer { display:none; }

  dialog[data-panel="work"] {
    overflow:hidden;
    padding:22px 16px 16px;
  }
  dialog[data-panel="work"] #detail-content,
  dialog[data-panel="work"] .work-editorial { height:100%; }
  dialog[data-panel="work"] .close-dialog {
    position:absolute;
    float:none;
    top:5px;
    right:8px;
    margin:0;
  }
  .work-grid {
    height:100%;
    display:grid;
    grid-template-columns:minmax(0,1fr);
    grid-template-rows:auto auto auto minmax(0,1fr) auto;
    gap:10px;
    overflow:hidden;
  }
  .work-intro {
    grid-column:1;
    grid-row:1;
    padding:0 48px 0 4px;
  }
  dialog .work-eyebrow { margin:0 0 7px; font-size:8px; }
  dialog .work-intro h2 { margin:0; font-size:clamp(42px,13vw,56px); }
  .work-filters {
    grid-column:1;
    grid-row:2;
    justify-content:space-between;
    width:100%;
    max-width:none;
    margin:0;
    gap:6px;
    overflow-x:auto;
    font-size:9px;
    scrollbar-width:none;
  }
  .work-filters::-webkit-scrollbar,
  .work-track::-webkit-scrollbar { display:none; }
  .work-carousel-controls {
    grid-column:1;
    grid-row:3;
    display:flex;
    justify-content:flex-end;
    align-items:center;
    gap:10px;
  }
  .work-carousel-controls button {
    display:grid;
    place-items:center;
    width:44px;
    height:44px;
    padding:0;
    border:1px solid #8f8b82;
    background:transparent;
    color:var(--ink);
    font-size:19px;
  }
  .work-carousel-controls button:disabled { opacity:.28; }
  .work-carousel-controls button .ui-arrow { width:21px; height:15px; }
  .work-carousel-controls span {
    min-width:42px;
    color:#6f706b;
    font-size:9px;
    letter-spacing:1.4px;
    text-align:center;
  }
  .work-track {
    grid-column:1;
    grid-row:4;
    display:flex;
    min-width:0;
    min-height:0;
    width:calc(100% + 16px);
    margin-right:-16px;
    padding:0 16px 8px 0;
    gap:12px;
    overflow-x:auto;
    overflow-y:hidden;
    scroll-snap-type:x mandatory;
    scroll-padding-left:0;
    overscroll-behavior-x:contain;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  .work-look,
  .work-look--lead {
    flex:0 0 82%;
    width:82%;
    height:100%;
    min-height:0;
    grid-column:auto;
    scroll-snap-align:start;
    scroll-snap-stop:always;
    contain:layout paint;
  }
  .work-look { grid-template-rows:minmax(0,1fr) 46px; }
  .work-look figcaption { display:flex; align-items:flex-start; gap:12px; }
  .work-look figcaption > span { font-size:17px; }
  .work-look figcaption small { margin-top:3px; }
  .work-instagram {
    grid-column:1;
    grid-row:5;
    margin:0;
    align-self:end;
  }
}

@media(max-width:700px) and (max-height:690px) {
  .mobile-services { grid-template-rows:auto minmax(150px,29svh) 1fr; gap:12px; padding-top:88px; padding-bottom:18px; }
  .mobile-services__list article { padding:8px 0; }
  .mobile-services__list h3 { font-size:20px; }
  .mobile-services__list p { font-size:11px; }
  .mobile-work { padding-top:84px; padding-bottom:18px; }
  .mobile-work .work-grid { gap:7px; }
  .mobile-about { grid-template-rows:40% 60%; }
  .mobile-about__story { padding-top:18px; padding-bottom:18px; }
  .mobile-about__story h2 { font-size:48px; margin-bottom:10px; }
  .mobile-about__story > p:not(.eyebrow):not(.mobile-about__place) { font-size:13px; line-height:1.4; margin-bottom:7px; }
  .mobile-book { padding-top:88px; padding-bottom:22px; }
  .mobile-book .eyebrow { margin-bottom:11px; }
  .mobile-book h2 { font-size:clamp(44px,13.5vw,66px); }
  .mobile-book__context { margin-top:16px; font-size:16px; line-height:1.42; }
  .mobile-book__phone { margin:18px 0 14px; }
  .mobile-book .booking-phone { font-size:clamp(31px,9.8vw,43px); }
  .mobile-book .contact-icon { width:48px; height:48px; }
  .mobile-book .contact-icon svg { width:24px; height:24px; }
  .mobile-book__note { margin-top:18px; font-size:14px; line-height:1.45; }
  .mobile-book__travel { font-size:9px; }
  .mobile-book__logo { width:96px; bottom:18px; }
}

/* Desktop panel prose shares one quiet editorial voice. Headings, utility
   labels, facts, captions and actions retain their separate hierarchy. */
@media(min-width:701px) {
  dialog .about-copy > p,
  dialog .work-description,
  dialog .service-item p,
  dialog .booking-context,
  dialog .booking-note,
  dialog[data-panel="travel"] #detail-content > p:not(.eyebrow) {
    color:#5f605c;
    font-family:var(--sans);
    font-size:15px;
    font-weight:400;
    line-height:1.58;
    letter-spacing:0;
  }
}

@media(prefers-reduced-motion:reduce) {
  *,*::before,*::after { animation:none!important; transition:none!important; scroll-behavior:auto!important; }
}