/* ===========================================================================
   horotron.therapy
   Palette is locked to the client brief: black, dark royal green, white,
   gold as a sparse accent (hairlines, stars, one hover state). Nothing else.
   Radius system: surfaces 6px, buttons/pills 999px, logo circle.
   Theme is locked dark. There is no light variant.
   =========================================================================== */

:root {
  /* colour */
  --ink:        #060807;   /* off-black page ground */
  --ink-2:      #0A0E0C;
  --forest-d:   #08150F;   /* deepest green */
  --forest:     #0D2A1E;   /* royal dark green */
  --forest-l:   #16412E;
  --bone:       #EDEAE1;   /* warm off-white */
  --bone-dim:   rgba(237, 234, 225, 0.72);   /* secondary text, ~8:1 on ink */
  --bone-fade:  rgba(237, 234, 225, 0.52);   /* tertiary text, still WCAG AA */
  --hair:       rgba(237, 234, 225, 0.10);
  --gold:       #B99555;
  --gold-soft:  rgba(185, 149, 85, 0.34);

  /* type
     Unbounded (Kyiv Type Foundry) carries the display: wide geometric letterforms
     that echo the logo wordmark, and it is one of the few display faces with
     complete Ukrainian coverage. Jost and most geometric sans drop out on є.
     Manrope handles body copy: narrower, humanist, so the two never blur. */
  --display: 'Unbounded', 'Century Gothic', system-ui, sans-serif;
  --body:    'Manrope', system-ui, -apple-system, sans-serif;

  /* rhythm */
  --pad:     clamp(20px, 5vw, 64px);
  --gap:     clamp(28px, 4vw, 56px);
  --section: clamp(96px, 13vh, 172px);
  --max:     1320px;

  /* motion
     One expo-out curve for everything that settles, one softer curve for the
     long sheen sweeps. Nothing on this site uses a linear or an ease-in-out
     hover: they are what makes a transition read as a template default. */
  --ease:      cubic-bezier(0.16, 1, 0.3, 1);
  --ease-soft: cubic-bezier(0.22, 1, 0.36, 1);
  --sheen:     820ms;

  /* layers */
  --z-grain: 90;
  --z-head:  80;
  --z-menu:  70;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html {
  color-scheme: dark;
  scroll-behavior: smooth;
  scroll-padding-top: 88px;
  -webkit-text-size-adjust: 100%;
}

body {
  background: var(--ink);
  color: var(--bone);
  font-family: var(--body);
  font-weight: 300;
  font-size: clamp(15px, 1.05vw, 17px);
  line-height: 1.62;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

img, svg, iframe { display: block; max-width: 100%; }
ul, ol { list-style: none; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

:focus-visible {
  outline: 1px solid var(--gold);
  outline-offset: 4px;
  border-radius: 2px;
}

.wrap {
  width: 100%;
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--pad);
}

/* --- shared type ---------------------------------------------------------- */

.h2 {
  font-family: var(--display);
  font-weight: 200;
  font-size: clamp(23px, 3.1vw, 43px);
  line-height: 1.16;
  letter-spacing: -0.028em;
}

/* the rule under a text link is two hairlines stacked: the dim one is always
   there so the link never shifts, the gold one wipes across it on hover */
.link {
  position: relative;
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--bone-dim);
  padding-bottom: 4px;
  transition: color 0.4s var(--ease);
}
.link::after,
.link::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
}
.link::after  { background: var(--hair); }
.link::before {
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: 100% 50%;
  transition: transform 0.62s var(--ease);
  z-index: 1;
}
.link:hover { color: var(--gold); }
.link:hover::before { transform: scaleX(1); transform-origin: 0 50%; }

/* --- buttons -------------------------------------------------------------
   Every button on the site is the same object: a pill that lifts, throws a
   shadow, and takes one slow diagonal sheen across its face. The sheen is a
   pseudo-element rather than a background animation so it costs one composited
   transform and nothing else. */

.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  overflow: hidden;
  /* the sheen sits at z-index -1 so it paints over the button's own background
     but under its label; isolate keeps that -1 from escaping to the page */
  isolation: isolate;
  border-radius: 999px;
  font-family: var(--display);
  font-weight: 300;
  font-size: 0.84rem;
  letter-spacing: 0.02em;
  padding: 16px 36px;
  transition: background-color 0.45s var(--ease), color 0.45s var(--ease),
              border-color 0.45s var(--ease), transform 0.55s var(--ease),
              box-shadow 0.55s var(--ease);
}

.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  transform: translateX(-130%);
}
.btn:hover::before { transform: translateX(130%); transition: transform var(--sheen) var(--ease-soft); }

.btn:hover  { transform: translateY(-2px); }
.btn:active { transform: translateY(0) scale(0.976); transition-duration: 0.12s; }

.btn--solid { background: var(--bone); color: var(--ink); }
.btn--solid::before { background: linear-gradient(112deg, transparent 34%, rgba(6, 8, 7, 0.11) 50%, transparent 66%); }
.btn--solid:hover { background: #fff; box-shadow: 0 18px 44px rgba(6, 8, 7, 0.6), 0 0 34px rgba(237, 234, 225, 0.13); }

.btn--ghost {
  border: 1px solid var(--hair);
  color: var(--bone-dim);
  padding: 11px 24px;
  font-size: 0.82rem;
}
.btn--ghost::before { background: linear-gradient(112deg, transparent 34%, rgba(185, 149, 85, 0.16) 50%, transparent 66%); }
.btn--ghost:hover { border-color: var(--gold-soft); color: var(--gold); box-shadow: 0 14px 32px rgba(6, 8, 7, 0.45); }

/* --- grain ---------------------------------------------------------------- */

.grain {
  position: fixed;
  inset: 0;
  z-index: var(--z-grain);
  pointer-events: none;
  opacity: 0.30;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
}

/* --- section thread (the one recurring motif: a drawn hairline + node) ----- */

.thread {
  position: relative;
  height: 1px;
  margin-bottom: var(--section);
  background: var(--hair);
  transform: scaleX(0);
  transform-origin: 50% 50%;
}
.thread i {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 4px;
  height: 4px;
  margin: -2px 0 0 -2px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 0 4px rgba(185, 149, 85, 0.08);
}

/* ===========================================================================
   header
   =========================================================================== */

.head {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: var(--z-head);
  height: 76px;
  display: flex;
  align-items: center;
  gap: var(--gap);
  padding-inline: var(--pad);
  border-bottom: 1px solid transparent;
  transition: border-color 0.5s var(--ease);
}
/* the blur lives on a pseudo-element: backdrop-filter on .head itself would
   make it the containing block, and the fixed mobile menu would collapse
   into the 76px bar instead of covering the viewport */
.head::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(6, 8, 7, 0.72);
  backdrop-filter: blur(16px) saturate(120%);
  -webkit-backdrop-filter: blur(16px) saturate(120%);
  opacity: 0;
  transition: opacity 0.5s var(--ease);
}
.head.is-scrolled::before { opacity: 1; }
.head.is-scrolled { border-bottom-color: var(--hair); }

/* the supplied logo is a full lockup; the header crops to the figure mark and
   the footer shows the lockup at full size */
/* the ring is a box-shadow, not a border: the crop has to stay tight on the
   figure (any wider and the wordmark creeps in), so the ring is pushed 6px
   clear of it by a transparent first shadow instead */
.head__logo {
  width: 46px;
  height: 46px;
  flex: none;
  border-radius: 50%;
  overflow: hidden;
  box-shadow: 0 0 0 6px transparent, 0 0 0 7px var(--hair);
}
.head__logo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
  transform: scale(3) translate(-2.5%, 9.5%);   /* centres on the figure, drops the wordmark */
  transition: transform 0.7s var(--ease);
}
.head__logo:hover img { transform: scale(3.2) translate(-2.5%, 9.5%); }

.head__nav {
  display: flex;
  gap: clamp(20px, 2.6vw, 42px);
  margin-inline: auto;
}
/* the rule leaves to the right and comes back in from the left, so moving
   along the menu reads as one continuous wipe rather than five fades */
.head__nav a {
  position: relative;
  font-size: 0.86rem;
  letter-spacing: 0.03em;
  color: var(--bone-dim);
  padding-bottom: 3px;
  transition: color 0.4s var(--ease);
}
.head__nav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: var(--gold-soft);
  transform: scaleX(0);
  transform-origin: 100% 50%;
  transition: transform 0.55s var(--ease);
}
.head__nav a:hover { color: var(--bone); }
.head__nav a:hover::after { transform: scaleX(1); transform-origin: 0 50%; }

.head__right { display: flex; align-items: center; gap: 18px; margin-left: auto; }

.lang { display: flex; align-items: center; gap: 6px; font-family: var(--display); font-weight: 300; font-size: 0.7rem; letter-spacing: 0.04em; }
.lang__sep { color: var(--bone-fade); }
.lang__btn { color: var(--bone-fade); transition: color 0.35s var(--ease), transform 0.45s var(--ease); }
.lang__btn:hover { color: var(--bone-dim); transform: translateY(-1px); }
.lang__btn.is-on { color: var(--gold); }

.burger { display: none; width: 30px; height: 30px; position: relative; }
.burger span {
  position: absolute;
  left: 4px;
  width: 22px;
  height: 1px;
  background: var(--bone);
  transition: transform 0.45s var(--ease), opacity 0.3s var(--ease);
}
.burger span:nth-child(1) { top: 12px; }
.burger span:nth-child(2) { top: 18px; }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(3px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { transform: translateY(-3px) rotate(-45deg); }

/* ===========================================================================
   1. hero  (no entrance motion here by client request)
   =========================================================================== */

.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  overflow: hidden;
  isolation: isolate;
}

.hero__img {
  position: absolute;
  inset: 0;
  z-index: -3;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 42%;
  /* graded toward the palette so the warm photo sits inside a green/black page */
  filter: saturate(0.58) brightness(0.98) contrast(1.06);
}

.hero__wash {
  position: absolute;
  inset: 0;
  z-index: -2;
  background: radial-gradient(120% 80% at 50% 35%, rgba(13, 42, 30, 0.45), rgba(6, 8, 7, 0.72) 80%);
  mix-blend-mode: soft-light;
}

.hero__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  /* dark where the type sits, open where the pour and the hands are */
  background: linear-gradient(180deg,
    rgba(6, 8, 7, 0.80) 0%,
    rgba(6, 8, 7, 0.66) 17%,
    rgba(6, 8, 7, 0.44) 38%,
    rgba(6, 8, 7, 0.28) 58%,
    rgba(6, 8, 7, 0.60) 82%,
    var(--ink) 100%);
}

.hero__inner {
  width: 100%;
  max-width: var(--max);
  padding: clamp(140px, 20vh, 190px) var(--pad) 0;
  text-align: center;
}

.hero__title {
  font-family: var(--display);
  font-weight: 200;
  font-size: clamp(38px, 6.6vw, 100px);
  line-height: 1.02;
  letter-spacing: -0.038em;
  text-shadow: 0 2px 30px rgba(6, 8, 7, 0.92), 0 0 90px rgba(6, 8, 7, 0.8);
}

.hero__sub {
  margin: clamp(24px, 3.4vh, 38px) auto 0;
  max-width: 46ch;
  color: var(--bone-dim);
  font-size: clamp(15px, 1.15vw, 18px);
  text-shadow: 0 2px 20px rgba(6, 8, 7, 0.95), 0 0 50px rgba(6, 8, 7, 0.85);
}

/* --- hero call to action -------------------------------------------------
   The one button on the page that has to look like an invitation rather than
   a control. Three layers, all slow: a gold halo that breathes outward on a
   ~5s cycle, a sheen that crosses the face every ~7s, and a spring on press.
   The halo is a box-shadow, so `overflow: hidden` on the button never clips
   it, and GSAP adds the magnetic pull on top (see script.js). */

.hero .btn { margin-top: clamp(30px, 5vh, 56px); }

.hero .btn--solid {
  padding: 18px 46px;
  font-size: 0.9rem;
  box-shadow: 0 18px 46px rgba(6, 8, 7, 0.55);
  animation: ctaHalo 5.2s var(--ease-soft) 1s infinite;
  transition: filter 0.6s var(--ease), background-color 0.45s var(--ease),
              transform 0.55s var(--ease);
  will-change: transform, box-shadow;
}
.hero .btn--solid:active { transform: translateY(0) scale(0.976); transition-duration: 0.12s; }

/* second sheen layer: ::before is reserved for the hover sweep every button
   shares, so the idle one gets its own */
.hero .btn--solid::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(112deg, transparent 36%, rgba(6, 8, 7, 0.13) 50%, transparent 64%);
  transform: translateX(-130%);
  animation: ctaSheen 7s var(--ease-soft) 2.2s infinite;
}

/* the halo owns box-shadow for the whole cycle, so the hover glow is a
   drop-shadow instead — two properties that compose rather than fight */
.hero .btn--solid:hover { filter: drop-shadow(0 0 20px rgba(185, 149, 85, 0.26)); }

@keyframes ctaHalo {
  0%, 100% { box-shadow: 0 18px 46px rgba(6, 8, 7, 0.55), 0 0 0 0 rgba(185, 149, 85, 0.30); }
  55%      { box-shadow: 0 20px 52px rgba(6, 8, 7, 0.58), 0 0 0 15px rgba(185, 149, 85, 0); }
}

@keyframes ctaSheen {
  0%       { transform: translateX(-130%); }
  22%, 100% { transform: translateX(130%); }
}

/* ===========================================================================
   2. reserved block  (deliberately empty, one full viewport)
   =========================================================================== */

/* held open on purpose. A gradient rather than a slab so the empty viewport
   reads as a held breath instead of an unstyled gap. */
.reserved {
  min-height: 100svh;
  background: linear-gradient(to bottom, var(--ink), var(--forest-d) 46%, var(--ink));
}

/* ===========================================================================
   3. reviews
   =========================================================================== */

.reviews { padding-bottom: var(--section); }

.reviews__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}

.reviews__note {
  margin-top: 16px;
  max-width: 52ch;
  color: var(--bone-fade);
  font-size: 0.92rem;
}

/* --- ticker --------------------------------------------------------------- */

.ticker {
  position: relative;
  margin-top: clamp(38px, 5vw, 64px);
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: clamp(10px, 1.6vw, 22px);
  padding-inline: clamp(12px, 2vw, 28px);
}

/* gold blooms out of the centre on hover and the glyph leans the way it will
   travel, so the arrow announces its direction before it is pressed */
.ticker__nav {
  position: relative;
  width: 58px;
  height: 58px;
  flex: none;
  display: grid;
  place-items: center;
  overflow: hidden;
  isolation: isolate;
  border: 1px solid var(--hair);
  border-radius: 999px;
  color: var(--bone-dim);
  font-size: 20px;
  transition: border-color 0.5s var(--ease), color 0.5s var(--ease),
              transform 0.5s var(--ease), box-shadow 0.5s var(--ease);
}
.ticker__nav::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: radial-gradient(circle at 50% 50%, rgba(185, 149, 85, 0.22), transparent 72%);
  opacity: 0;
  transform: scale(0.55);
  transition: opacity 0.5s var(--ease), transform 0.65s var(--ease);
}
.ticker__nav i { transition: transform 0.55s var(--ease); }

.ticker__nav:hover {
  color: var(--gold);
  border-color: var(--gold-soft);
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(6, 8, 7, 0.5);
}
.ticker__nav:hover::before { opacity: 1; transform: scale(1); }
.ticker__nav[data-dir="1"]:hover i  { transform: translateX(4px); }
.ticker__nav[data-dir="-1"]:hover i { transform: translateX(-4px); }
.ticker__nav:active { transform: scale(0.92); transition-duration: 0.12s; }

.ticker__viewport {
  overflow: hidden;
  /* fade the ends so cards enter and leave instead of being chopped */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}

.ticker__track {
  display: flex;
  gap: clamp(14px, 1.6vw, 24px);
  will-change: transform;
}

.review {
  position: relative;
  flex: none;
  width: clamp(248px, 27vw, 330px);
  min-height: 268px;
  display: flex;
  flex-direction: column;
  padding: 30px 28px 26px;
  border: 1px solid var(--hair);
  border-radius: 6px;
  background: linear-gradient(168deg, rgba(13, 42, 30, 0.42), rgba(6, 8, 7, 0.30));
  transition: border-color 0.5s var(--ease), transform 0.5s var(--ease);
}
.ticker__viewport:hover .review { border-color: rgba(237, 234, 225, 0.16); }

.review__stars { display: flex; gap: 5px; color: var(--gold); font-size: 13px; margin-bottom: 22px; }

.review__foot {
  margin-top: auto;
  padding-top: 20px;
  border-top: 1px solid var(--hair);
  display: flex;
  align-items: center;
  gap: 12px;
}

/* skeleton lines: this is the empty state, shimmering until real copy lands */
.sk {
  height: 9px;
  border-radius: 999px;
  background: linear-gradient(90deg,
    rgba(237, 234, 225, 0.05) 0%,
    rgba(237, 234, 225, 0.13) 45%,
    rgba(237, 234, 225, 0.05) 90%);
  background-size: 260% 100%;
  animation: shimmer 3.2s linear infinite;
}
.sk + .sk { margin-top: 13px; }
.sk--l1 { width: 100%; }
.sk--l2 { width: 84%; }
.sk--l3 { width: 62%; }
.sk--name { width: 84px; height: 8px; }
.sk--date { width: 52px; height: 8px; margin-left: auto; opacity: 0.6; }

@keyframes shimmer {
  from { background-position: 130% 0; }
  to   { background-position: -130% 0; }
}

/* --- stats strip (hairlines, not cards) ----------------------------------- */

.stats {
  margin-top: clamp(46px, 6vw, 78px);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--hair);
}
.stat {
  padding: clamp(26px, 3.2vw, 40px) clamp(14px, 2vw, 30px);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.stat + .stat { border-left: 1px solid var(--hair); }
.stat__k {
  font-size: 0.72rem;
  letter-spacing: 0.19em;
  text-transform: uppercase;
  color: var(--bone-fade);
}
.stat__v {
  font-family: var(--display);
  font-weight: 200;
  font-size: clamp(26px, 3.4vw, 46px);
  line-height: 1.1;
  letter-spacing: -0.03em;
  color: var(--bone);
}
.stat__v[data-todo] { color: var(--bone-fade); }

/* ===========================================================================
   4. social tiles
   =========================================================================== */

.social { padding-bottom: var(--section); }

.tiles {
  margin-top: clamp(38px, 5vw, 62px);
  display: grid;
  grid-template-columns: 1.18fr 1fr 1fr 1.24fr;
  gap: clamp(12px, 1.4vw, 20px);
}

.tile {
  position: relative;
  height: 100%;
  min-height: 190px;
  display: flex;
  flex-direction: column;
  padding: 28px 26px 26px;
  border: 1px solid var(--hair);
  border-radius: 6px;
  background: linear-gradient(168deg, rgba(13, 42, 30, 0.36), rgba(6, 8, 7, 0.24));
  overflow: hidden;
  isolation: isolate;
  transition: border-color 0.55s var(--ease), transform 0.55s var(--ease),
              background-color 0.55s var(--ease), box-shadow 0.55s var(--ease);
}
/* the same sheen the buttons use, slower and much fainter — a card is a bigger
   surface, so the same opacity would read as a flash */
.tile::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(112deg, transparent 36%, rgba(237, 234, 225, 0.055) 50%, transparent 64%);
  transform: translateX(-125%);
}
.tile::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  transform: scaleX(0);
  transition: transform 0.7s var(--ease);
}
.tile:hover {
  transform: translateY(-5px);
  border-color: rgba(237, 234, 225, 0.2);
  box-shadow: 0 22px 48px rgba(6, 8, 7, 0.5);
}
.tile:hover::before { transform: translateX(125%); transition: transform 1.15s var(--ease-soft); }
.tile:hover::after  { transform: scaleX(1); }

.tile__i { font-size: 30px; color: var(--bone-dim); transition: color 0.5s var(--ease); }
.tile:hover .tile__i { color: var(--gold); }

.tile__p {
  margin-top: auto;
  font-size: 0.72rem;
  letter-spacing: 0.19em;
  text-transform: uppercase;
  color: var(--bone-fade);
}
/* body face here: the handles are long strings and the display face is too wide */
.tile__h {
  margin-top: 8px;
  font-weight: 500;
  font-size: clamp(15px, 1.2vw, 17px);
  letter-spacing: 0.005em;
  word-break: break-word;
}
.tile__go {
  position: absolute;
  top: 26px;
  right: 24px;
  font-size: 17px;
  color: var(--bone-fade);
  opacity: 0;
  transform: translate(-5px, 5px);
  transition: opacity 0.5s var(--ease), transform 0.5s var(--ease);
}
.tile:hover .tile__go { opacity: 1; transform: none; }

/* ===========================================================================
   5. route: steps + map
   =========================================================================== */

.route { padding-bottom: var(--section); }

.route__grid {
  display: grid;
  grid-template-columns: 5.2fr 6.8fr;
  gap: clamp(36px, 5vw, 84px);
  align-items: start;
}

.steps { margin-top: clamp(34px, 4vw, 54px); }

.step {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  max-width: 400px;
  padding: 22px 24px;
  border: 1px solid var(--hair);
  border-radius: 6px;
  background: rgba(13, 42, 30, 0.24);
}
.step--r { margin-left: auto; }

.step__i {
  font-size: 22px;
  flex: none;
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid var(--gold-soft);
  color: var(--gold);
}
.step__t {
  font-family: var(--display);
  font-weight: 300;
  font-size: clamp(14px, 1.05vw, 16px);
  line-height: 1.35;
  letter-spacing: -0.02em;
}
.step__d { margin-top: 7px; font-size: 0.9rem; color: var(--bone-fade); line-height: 1.55; }

.link-arc {
  width: 170px;
  height: 92px;
  margin: 4px 0 4px clamp(24px, 4vw, 56px);
  stroke: var(--gold-soft);
  stroke-width: 1.2;
  clip-path: inset(0 100% 0 0);
}
.link-arc--flip { transform: scaleX(-1); margin: 4px clamp(24px, 4vw, 56px) 4px auto; }

.route__place { position: sticky; top: 108px; }

.mapbox {
  border: 1px solid var(--hair);
  border-radius: 6px;
  overflow: hidden;
  background: var(--forest-d);
}
.mapbox iframe {
  width: 100%;
  height: clamp(340px, 52vh, 540px);
  border: 0;
  /* Google's embed only ships light tiles; invert keeps the page theme locked */
  filter: invert(0.9) hue-rotate(174deg) saturate(0.45) brightness(1.02) contrast(0.94);
  transition: filter 0.6s var(--ease);
}
.mapbox:hover iframe { filter: invert(0.9) hue-rotate(174deg) saturate(0.78) brightness(1.1) contrast(0.94); }

.addr {
  margin-top: 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
  padding: 16px 18px 16px 24px;
  border: 1px solid var(--hair);
  border-radius: 6px;
}
.addr__t { font-size: 0.95rem; color: var(--bone-dim); }

/* ===========================================================================
   footer
   =========================================================================== */

.foot { padding-bottom: clamp(40px, 6vh, 72px); }
.foot .thread { margin-bottom: clamp(64px, 9vh, 110px); }

.foot__in { display: flex; flex-direction: column; align-items: center; text-align: center; }

/* full lockup here, large enough that the wordmark actually reads */
.foot__logo img {
  width: clamp(132px, 15vw, 168px);
  height: auto;
  border-radius: 50%;
  transition: transform 0.8s var(--ease), opacity 0.6s var(--ease);
  opacity: 0.94;
}
.foot__logo:hover img { transform: scale(1.03); opacity: 1; }

.foot__nav {
  margin-top: clamp(30px, 4vw, 44px);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px clamp(18px, 2.4vw, 36px);
}
.foot__nav a {
  position: relative;
  font-size: 0.86rem;
  color: var(--bone-dim);
  padding-bottom: 3px;
  transition: color 0.4s var(--ease);
}
.foot__nav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: var(--gold-soft);
  transform: scaleX(0);
  transform-origin: 100% 50%;
  transition: transform 0.55s var(--ease);
}
.foot__nav a:hover { color: var(--bone); }
.foot__nav a:hover::after { transform: scaleX(1); transform-origin: 0 50%; }

.foot__soc { margin-top: 34px; display: flex; gap: 12px; }
.foot__soc a {
  position: relative;
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  overflow: hidden;
  isolation: isolate;
  font-size: 18px;
  border: 1px solid var(--hair);
  border-radius: 6px;
  color: var(--bone-dim);
  transition: color 0.45s var(--ease), border-color 0.45s var(--ease),
              transform 0.5s var(--ease), box-shadow 0.5s var(--ease);
}
.foot__soc a::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(circle at 50% 120%, rgba(185, 149, 85, 0.26), transparent 70%);
  opacity: 0;
  transition: opacity 0.5s var(--ease);
}
.foot__soc a:hover {
  color: var(--gold);
  border-color: var(--gold-soft);
  transform: translateY(-3px);
  box-shadow: 0 12px 26px rgba(6, 8, 7, 0.5);
}
.foot__soc a:hover::before { opacity: 1; }

.foot__contacts {
  margin-top: 32px;
  display: flex;
  gap: 8px 22px;
  flex-wrap: wrap;
  justify-content: center;
  font-family: var(--display);
  font-weight: 300;
  font-size: 0.86rem;
  letter-spacing: 0.01em;
  color: var(--bone-dim);
}

.foot__legal {
  margin-top: 26px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 22px;
}
.foot__legal a {
  position: relative;
  font-size: 0.78rem;
  color: var(--bone-fade);
  padding-bottom: 2px;
  transition: color 0.4s var(--ease);
}
.foot__legal a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: var(--hair);
  transform: scaleX(0);
  transform-origin: 100% 50%;
  transition: transform 0.5s var(--ease);
}
.foot__legal a:hover { color: var(--bone-dim); }
.foot__legal a:hover::after { transform: scaleX(1); transform-origin: 0 50%; }

.foot__fine {
  margin-top: 26px;
  max-width: 62ch;
  font-size: 0.78rem;
  line-height: 1.7;
  color: var(--bone-fade);
}

.foot__copy {
  margin-top: 26px;
  font-family: var(--display);
  font-weight: 200;
  font-size: 0.74rem;
  letter-spacing: 0.04em;
  color: var(--bone-fade);
}

/* ===========================================================================
   contents rail
   Shared by services.html (23 windows) and booking.html (the service picker).
   Both are lists too long to scroll blind: the rail holds its place while the
   list moves, and the entry for whatever is being read lights gold. script.js
   drives .is-on from an IntersectionObserver.
   =========================================================================== */

.toc { position: sticky; top: 100px; }

.toc__k {
  font-size: 0.68rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--bone-fade);
}

.toc__l {
  margin-top: 16px;
  max-height: calc(100vh - 190px);
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--hair) transparent;
}

.toc__l a {
  display: flex;
  gap: 10px;
  padding: 7px 0 7px 14px;
  border-left: 1px solid var(--hair);
  font-size: 0.82rem;
  line-height: 1.35;
  color: var(--bone-fade);
  transition: color 0.4s var(--ease), border-color 0.4s var(--ease);
}
.toc__n {
  flex: none;
  padding-top: 0.15em;
  font-family: var(--display);
  font-weight: 300;
  font-size: 0.6rem;
  letter-spacing: 0.1em;
  opacity: 0.55;
}
.toc__l a:hover { color: var(--bone-dim); border-left-color: var(--gold-soft); }
.toc__l a.is-on { color: var(--gold); border-left-color: var(--gold); }

/* no room to stand beside the list any more: the rail stops being sticky and
   flattens into a block of chips above it */
@media (max-width: 1080px) {
  .toc { position: static; }
  .toc__l {
    margin-top: 14px;
    max-height: none;
    overflow: visible;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }
  .toc__l a {
    padding: 8px 15px;
    border: 1px solid var(--hair);
    border-radius: 999px;
  }
  .toc__l a.is-on { border-color: var(--gold-soft); }
}

/* ===========================================================================
   reveal states driven by GSAP (see script.js)
   =========================================================================== */

.rv { opacity: 0; transform: translateY(26px); }

/* ===========================================================================
   responsive
   =========================================================================== */

@media (max-width: 1080px) {
  .route__grid { grid-template-columns: 1fr; }
  .route__place { position: static; }
  .tiles { grid-template-columns: 1.15fr 1fr; }
}

@media (max-width: 860px) {
  html { scroll-padding-top: 76px; }
  .head { height: 66px; }
  .head__logo { width: 36px; height: 36px; box-shadow: 0 0 0 4px transparent, 0 0 0 5px var(--hair); }
  .burger { display: block; }

  .head__nav {
    position: fixed;
    inset: 0;
    z-index: var(--z-menu);
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 26px;
    margin: 0;
    background: rgba(6, 8, 7, 0.96);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.45s var(--ease), visibility 0.45s;
  }
  .head__nav.is-open { opacity: 1; visibility: visible; }
  .head__nav a { font-family: var(--display); font-weight: 300; font-size: 1.25rem; color: var(--bone); }

  /* keep the bar itself clickable above the overlay, or the close button hides */
  .head__logo, .head__right { position: relative; z-index: calc(var(--z-menu) + 1); }

  .hero__img { object-position: 54% 40%; }
  .hero__inner { padding-top: clamp(112px, 16vh, 150px); }
  .hero__title { font-size: clamp(34px, 10.5vw, 62px); }

  .stats { grid-template-columns: 1fr; }
  .stat + .stat { border-left: 0; border-top: 1px solid var(--hair); }

  /* the zigzag collapses to one column, so the arcs become a plain vertical
     dashed run under each step icon */
  .step, .step--r { max-width: none; margin-left: 0; }
  .link-arc, .link-arc--flip {
    width: 1px;
    height: 34px;
    margin: 0 0 0 47px;
    transform: none;
    background: repeating-linear-gradient(to bottom,
      var(--gold-soft) 0 3px, transparent 3px 9px);
  }
  .link-arc path { display: none; }
}

@media (max-width: 620px) {
  .tiles { grid-template-columns: 1fr; }
  .tile { min-height: 168px; }
  .ticker { padding-inline: 0; grid-template-columns: 1fr; }
  .ticker__nav { position: absolute; bottom: -78px; }
  .ticker__nav[data-dir="-1"] { left: var(--pad); }
  .ticker__nav[data-dir="1"]  { left: calc(var(--pad) + 70px); }
  .ticker { padding-bottom: 78px; }
  .review { width: min(76vw, 300px); }
  .addr { justify-content: flex-start; }
}

/* ===========================================================================
   reduced motion: everything collapses to static, nothing loops
   =========================================================================== */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .rv { opacity: 1; transform: none; }
  .thread { transform: scaleX(1); }
  .link-arc { clip-path: none; }
  .sk { animation: none; background-position: 50% 0; }
}