/* The real reception opens a single visit: choose, meet, give, arrive. */
.home-story {
  container: home-story / inline-size;
  width: min(100%, var(--page-max));
  margin-inline: auto;
}
/* --- Hero: introduction, booking, three photographed directions ---------------------
   Nothing rotates. The directions share one frame (5:8 beside the copy, 3:4 on a tablet,
   4:5 in the phone row) and each photograph is cropped to its own focal point, so no edge
   and no action moves. The section uses the page shell, so its left edge is the logo's. */
.story-hero {
  --hero-inline: max(var(--page-gutter), calc(50% - var(--page-max) / 2 + var(--page-gutter)));
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  padding: clamp(1rem, 4cqw, 1.5rem) var(--hero-inline) 0;
  border-bottom: 1px solid rgba(251, 251, 250, 0.16);
  background: var(--graphite);
  color: var(--frost-bright);
}
.story-hero-intro { min-width: 0; }
/* "Seit 2015": a fine gold rule and the year, the quiet credential above the headline. */
.story-hero-eyebrow {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 0 0 clamp(0.9rem, 1.4vw, 1.25rem);
  color: var(--gold-on-graphite);
}
.story-hero-eyebrow::before {
  width: 2rem;
  height: 1px;
  flex: none;
  background: currentColor;
  content: "";
}
.story-hero h1 {
  max-width: 9ch;
  margin: 0;
  color: var(--frost-bright);
  font-size: clamp(3rem, 4.9vw, 4.5rem);
  font-weight: 300;
  line-height: 0.96;
  letter-spacing: -0.04em;
  overflow-wrap: anywhere;
  text-wrap: balance;
}
.story-hero-lede {
  max-width: 34ch;
  margin: clamp(0.9rem, 1.4vw, 1.35rem) 0 0;
  color: var(--silver);
  font-size: 0.9375rem;
  line-height: 1.55;
}
@media (min-width: 1024px) { .story-hero-lede { font-size: 1rem; } }
.story-hero .rating-proof--hero { margin: 0.85rem 0 0; color: var(--frost-bright); }
.story-hero .rating-proof--hero .rating-proof-text { color: var(--silver); font-size: 0.8125rem; }
.story-hero .rating-proof--hero .rating-proof-score { font-size: 1.125rem; }
.story-hero .rating-proof--hero .rating-proof-star { color: var(--gold-on-graphite); }

.story-hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1.5rem;
  min-width: 0;
  margin-top: 1.25rem;
}
.story-hero .button-primary {
  min-width: min(100%, 15rem);
  justify-content: space-between;
  background: var(--frost-bright);
  color: var(--graphite);
}
.story-hero .button-primary:hover,
.story-hero .button-primary:focus-visible { background: var(--silver); }
.story-hero-secondary {
  display: inline-flex;
  min-height: 2.75rem;
  align-items: center;
  color: var(--frost-bright);
  text-decoration: underline;
  text-decoration-color: rgba(251, 251, 250, 0.42);
  text-underline-offset: 0.35em;
}
.story-hero-secondary:hover,
.story-hero-secondary:focus-visible { color: var(--gold-on-graphite); text-decoration-color: currentColor; }

/* On a phone the directions are one row that scrolls sideways; the next card shows at the
   edge, so the gesture needs no control. The row runs under the gutters to the screen edge. */
.hero-directions {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 72%;
  gap: 0.75rem;
  margin: 1.5rem calc(-1 * var(--hero-inline)) 0;
  padding: 0 var(--hero-inline) 1.75rem;
  list-style: none;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--hero-inline);
  scrollbar-width: none;
}
.hero-directions::-webkit-scrollbar { display: none; }
.hero-directions > li { min-width: 0; scroll-snap-align: start; }
.hero-direction {
  display: grid;
  gap: 0.2rem;
  color: var(--frost-bright);
  text-decoration: none;
}
.hero-direction-media {
  display: block;
  overflow: hidden;
  margin-bottom: 0.6rem;
  background: var(--graphite-soft);
}
.hero-direction-media img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: var(--focus-narrow, 50% 50%);
}
.hero-direction-name {
  font-size: 1rem;
  line-height: 1.3;
  hyphens: auto;
  overflow-wrap: break-word;
}
.hero-direction-meta {
  color: var(--silver);
  font-size: 0.875rem;
  line-height: 1.4;
  font-variant-numeric: tabular-nums;
}
.hero-direction:hover .hero-direction-name,
.hero-direction:focus-visible .hero-direction-name { text-decoration: underline; text-underline-offset: 0.3em; }
.hero-direction:focus-visible { outline: 2px solid var(--gold-on-graphite); outline-offset: 4px; }

@container home-story (max-width: 767px) {
  .story-hero h1, .story-hero:lang(ru) h1 {
    max-width: 18ch;
    font-size: clamp(1.85rem, 8.2cqw, 2.7rem);
    line-height: 1.05;
    letter-spacing: -0.035em;
  }
  .story-hero h1 br { display: none; }
  .story-hero-lede { max-width: none; margin-top: 0.6rem; font-size: 0.875rem; line-height: 1.4; }
  /* The year keeps a tight line box, and the photographs follow the link at the same distance
     as rating and link follow the copy: the year costs the first photograph almost nothing. */
  .story-hero-eyebrow { line-height: 1.2; }
  .hero-directions { margin-top: 1rem; }
  /* Booking stays in the sticky header on phones; the hero keeps the link to services. The
     rating and the link already carry 44 px touch rows, so no extra gap sits between them. */
  .story-hero-actions { gap: 0.6rem; align-items: stretch; margin-top: 0.25rem; }
  .story-hero .button-primary { display: none; }
  .story-hero-secondary {
    flex: 0 0 auto;
    justify-content: flex-start;
    padding-inline: 0;
    min-height: 2.75rem;
    white-space: nowrap;
    text-decoration: underline;
    text-decoration-color: rgba(251, 251, 250, 0.42);
    text-underline-offset: 0.35em;
  }
}

/* A tablet reads like the phone, copy then actions, and gives the three directions the full
   width below them as one row. */
@container home-story (min-width: 768px) {
  .story-hero { padding-block: clamp(2rem, 3.5cqw, 3rem); }
  .story-hero:lang(ru) h1 { max-width: 11ch; }
  /* "Kosmetikstudio" and "Beauty studio" are longer than the nine characters the short old headline allowed. */
  .story-hero:lang(de) h1, .story-hero:lang(en) h1 { max-width: 16ch; }
  .hero-directions {
    grid-auto-flow: row;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(0.75rem, 1.2cqw, 1.25rem);
    margin: clamp(1.75rem, 3cqw, 2.5rem) 0 0;
    padding: 0;
    overflow: visible;
  }
  .hero-direction-media img { aspect-ratio: 3 / 4; object-position: var(--focus, 50% 50%); }
  .hero-direction-name { font-size: 1rem; }
}
@container home-story (min-width: 768px) and (max-width: 1099px) {
  .story-hero h1 { font-size: clamp(2.35rem, 6.2cqw, 3.35rem); }
  .story-hero:lang(ru) h1 { font-size: clamp(2.1rem, 5.4cqw, 3rem); }
}

/* Headline and rating start at the photographs' top edge;
   actions sit on the baseline of the card captions. */
@container home-story (min-width: 1100px) {
  .story-hero {
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.7fr);
    grid-template-rows: auto auto 1fr;
    column-gap: clamp(2.5rem, 4cqw, 5rem);
    padding-block: clamp(2rem, 3cqw, 3.5rem);
  }
  .story-hero-intro { grid-column: 1; grid-row: 1; }
  .story-hero h1 { font-size: clamp(3rem, 4.2cqw, 4.75rem); }
  .story-hero:lang(ru) h1 { font-size: clamp(2.6rem, 3.2cqw, 3.5rem); }
  .story-hero:lang(de) h1, .story-hero:lang(en) h1 { font-size: clamp(2.6rem, 3.5cqw, 4rem); }
  .story-hero-lede { font-size: clamp(1rem, 0.85cqw, 1.2rem); }
  .story-hero-actions { grid-column: 1; grid-row: 3; align-self: end; flex-direction: column; align-items: flex-start; gap: 0.35rem; margin-top: clamp(2rem, 2.5cqw, 2.75rem); }
  .story-hero-secondary { align-items: flex-end; }
  .hero-directions { grid-column: 2; grid-row: 1 / 4; margin: 0; }
  .hero-direction-media img { aspect-ratio: 5 / 8; }
  .hero-direction-name { font-size: clamp(1.05rem, 0.95cqw, 1.3rem); }
  .hero-direction-meta { font-size: clamp(0.875rem, 0.75cqw, 1rem); }
}
.home-story .team-stage { display: block; overflow: visible; background: transparent; }
.home-story .team-photo { display: block; width: 100%; }
.home-story .team-photo img {
  display: block;
  width: 100%;
  height: auto;
  min-height: 0;
  aspect-ratio: 1600 / 1110;
  object-fit: contain;
}
@container home-story (min-width: 768px) {
  .home-story .team-photo img { aspect-ratio: 2 / 1; object-fit: cover; object-position: 50% 30%; }
}
.home-story .team-proof {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem 3rem;
  max-width: none;
  margin: 0;
  border: 0;
  padding: 1.5rem 0 0;
  background: none;
  color: var(--graphite);
}
.home-story .team-proof p { max-width: 52ch; margin: 0; color: var(--text-muted); }
.home-story .team-proof-link { flex: 0 1 auto; color: var(--graphite); border-color: var(--line); }
/* Direction names are controls, subordinate to the section heading and prices. */
.home-story .services-layout { display: grid; grid-template-columns: minmax(0, 0.72fr) minmax(0, 1.45fr); }
.home-story .service-list { width: 100%; order: 0; align-self: start; }
.home-story .service-row { grid-template-columns: 2.75rem minmax(0, 1fr) 1.5rem; min-height: 4.5rem; padding-block: 0.75rem; }
.home-story .service-icon { display: inline-flex; align-items: center; justify-content: center; }
.home-story .services-layout > .service-visual { order: 0; width: 100%; min-height: 0; align-self: start; }
.home-story .service-visual img { min-height: 0; }
.home-story .service-visual figcaption strong { font-size: var(--body); line-height: 1.4; overflow-wrap: anywhere; }
.home-story .service-name { font-size: clamp(1.4rem, 2.2vw, 2rem); line-height: 1.2; letter-spacing: -0.025em; }
@container home-story (max-width: 1023px) {
  .home-story .team-proof { align-items: flex-start; flex-direction: column; gap: 1rem; }
  .home-story .team-proof-link { align-self: stretch; }
}
@container home-story (max-width: 767px) {
  .home-story .services-layout, .home-story .gift-section { grid-template-columns: minmax(0, 1fr); }
  .home-story .services-layout > .service-visual { position: relative; top: auto; }
  .home-story .gift-section { gap: 1.75rem; }
  .home-story .gift-copy .button { width: 100%; }
}
/* Calculator and existing-extension prices: two separate ways, one per line. */
.service-preview .service-picker-link { display: flex; width: fit-content; }

/* Who does hair extensions, and the rating with its source. */
.home-story .team-proof-copy { display: grid; gap: 0.4rem; }
.home-story .team-proof-copy .rating-proof-text { color: var(--text-muted); }

/* Color & Hair as the sixth direction: no imported catalogue service, so the panel names the colour
   work, states how the price is set and opens a consultation. */
/* A warm editorial accent for the homepage Journal, sized by the shared type system. */
.home-story .journal-section-heading h2 { color: var(--graphite); }
@supports ((background-clip: text) or (-webkit-background-clip: text)) {
  .home-story .journal-section-heading h2 {
    background-image: linear-gradient(110deg, var(--graphite) 0%, #302922 24%, #6f5129 50%, var(--gold) 78%, #a77b2e 100%);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
  }
}
@media (forced-colors: active) {
  .home-story .journal-section-heading h2 {
    background-image: none;
    color: CanvasText;
    -webkit-text-fill-color: currentColor;
  }
}

/* Journal on the home page: on a phone the three cards are one sideways row instead of
   three screens of scrolling. */
@container home-story (max-width: 599px) {
  .home-story .journal-related .journal-grid {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: 82%;
    gap: 1rem;
    margin-inline: calc(-1 * var(--page-gutter));
    padding: 0 var(--page-gutter) 0.5rem;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--page-gutter);
    scrollbar-width: none;
  }
  .home-story .journal-related .journal-grid::-webkit-scrollbar { display: none; }
  .home-story .journal-related .journal-card { scroll-snap-align: start; }
  .home-story .journal-related .journal-card :is(h2, h3) { font-size: 1.25rem; }
}

/* The studio as a short walk on graphite: four real rooms, each named and linked to what
   happens there. A mosaic beside the copy on wide screens, a sideways row on a phone. */
.studio-tour {
  --tour-inline: max(var(--page-gutter), calc(50% - var(--page-max) / 2 + var(--page-gutter)));
  padding: var(--section-gap) var(--tour-inline);
  background: var(--graphite);
  color: var(--frost-bright);
  scroll-margin-top: 7rem;
}
.studio-tour-heading {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
  align-items: end;
  gap: 1rem clamp(2rem, 5vw, 6rem);
  margin-bottom: clamp(2rem, 4vw, 3.5rem);
}
.studio-tour-heading h2 { max-width: 18ch; margin: 0; color: var(--frost-bright); }
.studio-tour-heading p { max-width: 34em; margin: 0; color: var(--silver); font-size: 1rem; line-height: 1.6; }
@media (min-width: 1024px) { .studio-tour-heading p { font-size: 1.125rem; } }
.studio-zones {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-auto-rows: clamp(14rem, 19vw, 20rem);
  gap: clamp(0.75rem, 1.2vw, 1.25rem);
  margin: 0;
  padding: 0;
  list-style: none;
}
.studio-zone { position: relative; min-width: 0; overflow: hidden; background: var(--graphite-soft); }
.studio-zone--reception { grid-column: 1 / span 4; grid-row: span 2; }
.studio-zone--lashes { grid-column: 5 / span 8; }
.studio-zone--face { grid-column: 5 / span 4; }
.studio-zone--nails { grid-column: 9 / span 4; }
.studio-zone a { position: absolute; inset: 0; display: block; color: var(--frost-bright); text-decoration: none; }
.studio-zone-media,
.studio-zone-media img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.studio-zone-media img { object-fit: cover; object-position: var(--focus, 50% 50%); transition: transform 600ms var(--ease-out); }
.studio-zone-name {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 3.5rem clamp(1rem, 1.6vw, 1.5rem) clamp(0.9rem, 1.4vw, 1.25rem);
  background: linear-gradient(180deg, rgb(23 23 25 / 0) 0, rgb(23 23 25 / 0.72) 70%);
  line-height: 1.3;
}
.studio-zone-name .arrow-icon { flex: none; width: 1.1rem; height: 1.1rem; }
.studio-zone a:hover .studio-zone-name > span,
.studio-zone a:focus-visible .studio-zone-name > span { text-decoration: underline; text-underline-offset: 0.25em; }
.studio-zone a:focus-visible { outline: 2px solid var(--gold-on-graphite); outline-offset: -4px; }
@media (prefers-reduced-motion: no-preference) {
  .studio-zone a:hover .studio-zone-media img { transform: scale(1.03); }
}
@container home-story (max-width: 1099px) {
  .studio-zones { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: clamp(13rem, 34vw, 19rem); }
  .studio-zone--reception,
  .studio-zone--lashes,
  .studio-zone--face,
  .studio-zone--nails { grid-column: auto; grid-row: auto; }
}
@container home-story (max-width: 767px) {
  .studio-tour-heading { grid-template-columns: minmax(0, 1fr); }
  .studio-zones {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: 78%;
    grid-auto-rows: auto;
    margin-inline: calc(-1 * var(--tour-inline));
    padding: 0 var(--tour-inline) 0.25rem;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--tour-inline);
    scrollbar-width: none;
  }
  .studio-zones::-webkit-scrollbar { display: none; }
  .studio-zone { aspect-ratio: 4 / 5; scroll-snap-align: start; }
}

/* Approved team hero · 2026-10-09. Only the environment is expanded;
   all six people are supplied by the existing, complete original photograph. */
.home-story .team-hero {
  --team-gutter: max(var(--page-gutter), calc(50% - var(--page-max) / 2 + var(--page-gutter)));
  position: relative; isolation: isolate; max-width: var(--page-max); aspect-ratio: 1942 / 809;
  margin: 0 auto; background: #171719; color: #f7f7f7; overflow: hidden;
}
.team-hero .team-setting {
  display: block; position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none;
}
.team-hero .team-setting img { display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; }
.team-hero .team-original {
  display: block; position: absolute; right: 0; top: 0; height: 100%; width: auto;
  aspect-ratio: 1600 / 1110; max-width: none; z-index: 1;
  -webkit-mask-image: url("../images/team-hero/original-mask.svg");
  mask-image: url("../images/team-hero/original-mask.svg");
  -webkit-mask-size: 100% 100%; mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
}
.team-hero .team-original img { display: block; width: 100%; height: 100%; max-width: none; object-fit: contain; }
.team-hero .team-shade { position: absolute; inset: 0; z-index: 2; pointer-events: none; background: linear-gradient(90deg, rgba(10,10,12,.48), rgba(10,10,12,.2) 28%, transparent 44%); }
.team-hero .team-copy { position: absolute; z-index: 3; left: var(--team-gutter); top: 50%; transform: translateY(-50%); width: 39%; max-width: 590px; }
.team-hero .team-copy h1 { font-weight: 300; font-size: clamp(38px, 4.15vw, 70px); line-height: 1.05; letter-spacing: -.035em; margin: 0 0 23px; color: inherit; }
.team-hero .team-copy .team-founded {
  display: block; margin-top: 0.75em;
  font-size: clamp(20px, 1.6vw, 24px); font-weight: 400; line-height: 1.25; letter-spacing: normal;
  color: var(--frost); -webkit-text-fill-color: currentColor;
}
.team-hero .team-copy h1:has(.team-founded) { margin-bottom: 0; }
.team-hero .team-copy p { font-size: clamp(16px, 1.3vw, 18px); line-height: 1.5; margin: 0 0 30px; color: #ecece7; }
.team-hero .team-cta { display: inline-flex; align-items: center; justify-content: space-between; gap: 35px; background: #f7f7f7; color: #171719; padding: 14px 20px; min-height: 50px; font-size: 16px; line-height: 1.5; text-decoration: none; }
.team-hero .team-cta:hover { background: #e5e5df; }
.team-hero .team-cta:focus-visible { outline: 2px solid #f7f7f7; outline-offset: 5px; }
.team-hero .team-cta svg { width: 23px; height: 23px; flex-shrink: 0; }
.team-hero .team-gift-link { display: flex; align-items: center; gap: .75rem; width: fit-content; max-width: 100%; min-height: 2.75rem; margin-top: .5rem; color: var(--frost-bright); font-size: 1rem; line-height: 1.4; text-decoration: underline; text-underline-offset: .25em; }
.team-hero .team-gift-link svg { width: 1.25rem; height: 1.25rem; flex: none; }
.team-hero .team-gift-link:hover { color: var(--gold-on-graphite); }
.team-hero .team-gift-link:focus-visible { outline: 2px solid var(--frost-bright); outline-offset: .25rem; }
@media (max-width: 1150px) {
  .team-hero .team-copy h1 { margin-bottom: 17px; }
  .team-hero .team-copy p { margin-bottom: 21px; }
  .team-hero .team-cta { min-height: 46px; padding: 12px 16px; }
}
@media (max-width: 767px) {
  .home-story .team-hero { --team-blend: 20vw; aspect-ratio: auto; height: auto; display: grid; grid-template-columns: minmax(0, 1fr); }
  /* The material stays opaque underneath the photograph feather. Overlapping
     the rows removes the dark gap made by fading both layers to an empty surface.
     Extra copy padding balances the overlap and preserves the team placement. */
  .team-hero .team-setting {
    position: relative; inset: auto; grid-area: 1 / 1; min-width: 0;
    -webkit-mask-image: none; mask-image: none;
  }
  .team-hero .team-setting img { position: absolute; top: 0; height:100%; object-fit:cover; object-position:left top; }
  .team-hero .team-original { position: relative; grid-area: 2 / 1; top: auto; bottom: auto; left: auto; width: 100%; height: auto; margin-top: calc(-1 * var(--team-blend) - 6px); -webkit-mask-image: url("../images/team-hero/mobile-mask.svg"); mask-image: url("../images/team-hero/mobile-mask.svg"); }
  .team-hero .team-original img { height: auto; }
  .team-hero .team-shade { position: relative; inset: auto; grid-area: 1 / 1; margin-bottom: var(--team-blend); background: linear-gradient(90deg, rgba(10,10,12,.42), rgba(10,10,12,.22) 72%, rgba(10,10,12,.04)); -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 calc(100% - 120px), transparent 100%); mask-image: linear-gradient(to bottom, #000 0%, #000 calc(100% - 120px), transparent 100%); }
  .team-hero .team-copy { position: relative; grid-area: 1 / 1; left: auto; right: auto; top: auto; width: auto; max-width: none; padding: 20px var(--team-gutter) calc(12px + var(--team-blend)); transform: none; }
  .team-hero .team-copy h1 { font-size: 38px; line-height: 1.04; margin-bottom: 14px; }
  .team-hero .team-copy p { font-size: 16px; margin-bottom: 19px; }
  .team-hero .team-cta { min-height: 46px; padding: 12px 16px; gap: 26px; }
}
@media (max-width: 359px) {
  .team-hero .team-copy { padding-top: 18px; }
  .team-hero .team-copy h1 { font-size: 34px; }
}

/* User-requested silver/champagne lettering. A single quiet reflection, not a loop.
   Readable solid text remains the fallback; no duplicate heading or rasterised type. */
@supports ((background-clip: text) or (-webkit-background-clip: text)) {
  .team-hero .team-copy h1 {
    width: fit-content;
    max-width: 100%;
    background-image:
      linear-gradient(110deg, transparent 38%, rgb(250 238 210 / .35) 44%, #fffdf5 50%, rgb(227 200 153 / .55) 56%, transparent 62%),
      linear-gradient(112deg, #e0e5e8 0%, #f5f3ec 28%, #dfc79f 52%, #eee6d7 72%, #d4dce2 100%);
    background-size: 280% 100%, 100% 100%;
    background-position: 0% 50%, 0 0;
    background-repeat: no-repeat;
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
  }
  @media (prefers-reduced-motion: no-preference) {
    .team-hero .team-copy h1 { animation: team-metal-reflection 4.6s cubic-bezier(.4, 0, .2, 1) .7s 1 both; }
    @keyframes team-metal-reflection {
      from { background-position: 100% 50%, 0 0; }
      to { background-position: 0% 50%, 0 0; }
    }
  }
  .team-hero .team-copy h1::selection {
    color: #171719;
    -webkit-text-fill-color: #171719;
    background: #e6d4b2;
  }
}
@media (forced-colors: active) {
  .team-hero .team-copy h1 {
    animation: none;
    background: none;
    color: CanvasText;
    -webkit-text-fill-color: currentColor;
  }
}

/* Adjacent scenes share one section interval, including their coloured edges. */
.home-story .services { padding-bottom: var(--section-half-gap); }
.home-story .repeat-visit,
.home-story .work-gallery { padding-block: var(--section-half-gap); }
.home-story .studio-tour { padding-block: var(--section-half-gap); }
.home-story .studio-tour + .gift-section { margin-top: var(--section-half-gap); }
.home-story .gift-section { margin-bottom: var(--section-half-gap); }
.home-story .journal-related { padding-top: var(--section-half-gap); }
.home-story :is(.instagram-profile, .instagram-feed) { padding-block: var(--section-half-gap); }
.home-story .service-name { min-width: 0; }
@media (max-width: 359px) {
  .home-story .service-name { overflow-wrap: anywhere; }
}

/* Julena in the first screen (owner request 26.10.2026): the assistant is visible on every visit, not only in the corner. */
.team-hero .team-julena {
  max-width: 34rem;
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid rgba(247, 247, 247, .18);
}
.team-hero .team-julena-intro {
  display: flex;
  align-items: center;
  gap: 14px;
  width: fit-content;
  color: #f7f7f7;
  text-decoration: none;
}
.team-hero .team-julena-avatar {
  flex: none;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: #f7f7f7;
  box-shadow: 0 0 0 2px rgba(230, 212, 178, .55);
}
.team-hero .team-julena-text {
  display: grid;
  gap: 2px;
}
.team-hero .team-julena-text strong {
  font-size: 17px;
  font-weight: 500;
  line-height: 1.3;
}
.team-hero .team-julena-line {
  font-size: 15px;
  line-height: 1.4;
  color: #ecece7;
}
.team-hero .team-julena-intro:hover strong {
  text-decoration: underline;
  text-underline-offset: .2em;
}
.team-hero .team-julena-intro:focus-visible,
.team-hero .team-julena-chip:focus-visible {
  outline: 2px solid #f7f7f7;
  outline-offset: 4px;
}
.team-hero .team-julena-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
}
.team-hero .team-julena-chip {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 8px 14px;
  border: 1px solid rgba(247, 247, 247, .42);
  color: #f7f7f7;
  font-size: 15px;
  line-height: 1.2;
  text-decoration: none;
}
.team-hero .team-julena-chip:hover {
  border-color: #e6d4b2;
  background: rgba(247, 247, 247, .08);
}
/* 768–1279px: the team photo sets the hero height, so Julena becomes one line that opens the finder. */
@media (min-width: 768px) and (max-width: 1279px) {
  .team-hero .team-julena { margin-top: 8px; padding-top: 0; border-top: 0; }
  .team-hero .team-julena-avatar { width: 34px; height: 34px; }
  .team-hero .team-julena-line,
  .team-hero .team-julena-chips { display: none; }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .team-hero .team-julena { margin-top: 4px; }
  .team-hero .team-julena-avatar { width: 28px; height: 28px; }
}

/* Approved desktop collage already includes Elena and Yulia; no old team overlay. */
@media (min-width: 768px) {
  .home-story .team-hero .team-original { display: none; }
}

/* Julena looks attentive while writing, smiles afterwards, and occasionally winks/blinks. */
.team-hero .team-julena-intro { min-width: 0; width: 100%; }
.team-hero .team-julena-text { min-width: 0; flex: 1; }
.team-hero .team-julena-avatar {
  display: block;
  background: #f7f7f7 url("../images/assistant/avatar-expressions.webp") 33.333333% 50% / 400% auto no-repeat;
}
.team-hero .team-julena-avatar[data-expression="attentive"] { background-position-x: 0%; }
.team-hero .team-julena-avatar[data-expression="smile"] { background-position-x: 33.333333%; }
.team-hero .team-julena-avatar[data-expression="wink"] { background-position-x: 66.666667%; }
.team-hero .team-julena-avatar[data-expression="blink"] { background-position-x: 100%; }
.team-julena-animated { display: grid; }
.team-julena-writing,
.team-julena-measure { grid-area: 1 / 1; }
.team-julena-measure { visibility: hidden; pointer-events: none; }
.team-julena-cursor {
  display: inline-block;
  height: 1em;
  margin-inline-start: 2px;
  border-inline-end: 1px solid currentColor;
  vertical-align: -.1em;
  opacity: 0;
}
.is-typing .team-julena-cursor { animation: julena-writing-caret .9s steps(2, jump-none) infinite; }
@keyframes julena-writing-caret { from { opacity: 1; } to { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .is-typing .team-julena-cursor { animation: none; opacity: 0; }
  .team-hero .team-julena-avatar[data-expression] { background-position-x: 33.333333%; }
}

/* Owner-requested translucent message window: calm contrast over graphite and gold. */
.team-hero .team-julena {
  margin-top: 18px;
  padding-top: 0;
  border-top: 0;
}
.team-hero .team-julena-intro {
  padding: 12px 14px;
  border: 1px solid rgba(255, 255, 255, .18);
  border-top-color: rgba(255, 255, 255, .30);
  border-radius: 18px;
  background: linear-gradient(145deg, rgba(255, 255, 255, .09), rgba(255, 255, 255, .015) 55%), rgba(18, 18, 20, .72);
  -webkit-backdrop-filter: blur(18px) saturate(130%);
  backdrop-filter: blur(18px) saturate(130%);
  box-shadow: 0 10px 28px rgba(0, 0, 0, .22), inset 0 1px 0 rgba(255, 255, 255, .12);
}
.team-hero .team-julena-intro:hover {
  border-color: rgba(230, 212, 178, .40);
}
@media (min-width: 768px) and (max-width: 1023px) {
  .team-hero .team-julena-intro { padding: 7px 10px; border-radius: 14px; }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .team-hero .team-julena-intro { background: rgba(20, 20, 23, .94); }
}
@media (prefers-reduced-transparency: reduce) {
  .team-hero .team-julena-intro {
    background: #19191c;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}

/* Owner-requested metal finish for the founding year and translucent service choices. */
.team-hero .team-copy .team-founded {
  color: var(--gold-on-graphite);
  -webkit-text-fill-color: currentColor;
}
@supports ((background-clip: text) or (-webkit-background-clip: text)) {
  .team-hero .team-copy .team-founded {
    background-image: inherit;
    background-size: inherit;
    background-position: inherit;
    background-repeat: no-repeat;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }
}
.team-hero .team-julena-chip {
  color: var(--gold-on-graphite);
  border-color: rgba(225, 194, 127, .62);
  background: rgba(18, 18, 20, .68);
  -webkit-backdrop-filter: blur(10px) saturate(120%);
  backdrop-filter: blur(10px) saturate(120%);
}
.team-hero .team-julena-chip:hover {
  color: #fff0cb;
  border-color: #e3c78b;
  background: rgba(57, 46, 25, .88);
}
@media (forced-colors: active) {
  .team-hero .team-copy .team-founded {
    background: none;
    color: CanvasText;
    -webkit-text-fill-color: CanvasText;
  }
}
@media (prefers-reduced-transparency: reduce) {
  .team-hero .team-julena-chip { background: #19191c; -webkit-backdrop-filter: none; backdrop-filter: none; }
}

/* Warm gold across the full year label, independent of the wider heading. */
@supports ((background-clip: text) or (-webkit-background-clip: text)) {
  .team-hero .team-copy .team-founded {
    width: fit-content;
    max-width: 100%;
    background-image: linear-gradient(112deg, #dfb76a 0%, #f6e1a6 24%, #cfa458 50%, #f5d891 76%, #d5b16b 100%);
    background-size: 100% 100%;
    background-position: 0 0;
  }
}

/* Separate mobile art direction for the approved two-person Spotlight banner. */
@media (max-width: 767px) {
  .team-hero .team-original--spotlight {
    aspect-ratio: 1 / 1;
    margin-top: calc(-1 * var(--team-blend));
    -webkit-mask-image: linear-gradient(to bottom, transparent, #000 14%, #000);
    mask-image: linear-gradient(to bottom, transparent, #000 14%, #000);
  }
  .team-hero .team-original--spotlight img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: contain;
  }
}

/* 02.11.2026: mobile first screen belongs to Elena and Yulia, with one compact helper entry. */
@media (max-width: 767px) {
  .team-hero .team-copy { padding-top: 16px; }
  .team-hero .team-copy h1 { font-size: clamp(30px, 8.7vw, 36px); line-height: 1.04; }
  .team-hero .team-copy .team-founded { display: none; }
  .team-hero .team-copy p { margin-top: 10px; margin-bottom: 12px; font-size: 15px; line-height: 1.4; }
  .team-hero .team-cta { min-height: 44px; padding: 10px 14px; gap: 22px; }
  .team-hero .team-julena { margin-top: 8px; padding: 0; border: 0; }
  .team-hero .team-julena-intro {
    display: inline-flex; width: fit-content; max-width: 100%; min-height: 44px;
    gap: 10px; padding: 0; border: 0; border-radius: 0;
    background: none; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none;
  }
  .team-hero .team-julena-avatar { width: 30px; height: 30px; }
  .team-hero .team-julena-text strong { font-size: 14px; line-height: 1.3; }
  .team-hero .team-julena-line,
  .team-hero .team-julena-chips { display: none; }
}