/* terms-of-use.html, page-scoped styles.
   Generated from designs/Terms of Use.dc.html, values verbatim.
   Class names are mechanical (.tu-1, .tu-2 ...) and deduplicated:
   elements sharing an identical style share a class. Rename them semantically
   as you go. Load after css/chrome.css. */

/* --- page keyframes and breakpoints, from the design --- */

/* The NavBar's inner row is height:80 plus 16px padding on a content box, so
     the bar actually measured 113px against a fixed 80px body offset and covered
     the top 33px of every page. Border-box makes 80 mean 80. */

@keyframes crLineUp { from { transform: translateY(110%); } to { transform: translateY(0); } }

@keyframes crFadeIn { from { opacity: 0; } to { opacity: 1; } }

@keyframes crRuleGrow { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* The design-system NavBar ships no hamburger and sets display inline on its
     link row, so the old rule never applied: the bar wrapped to 113px on a
     phone and sat over the page under a fixed 80px offset. Hide the row and the
     nav pill with !important, and hand navigation to the panel below. */

/* Presence is display, and nothing else. transform and opacity on these nodes
     stay pinned to their authored value however they are set, and an entrance
     animation can be left frozen on its first frame, which parks the panel
     off-screen while every other signal says the menu is open. The menu opens
     without motion on purpose: it is the one control a phone visitor cannot do
     without. */

/* The contact tab stays on every page at every width. Its panel is already
     sized to min(292px, 100vw - 76px) so it fits beside its own tab on a 360px
     phone, and it never meets the bottom-centred mobile booking pill. */

/* --- elements --- */

.tu-1 {
  position: relative;
  overflow: hidden;
  background: var(--color-ivory-blush);
  min-height: 38vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(56px, 7vw, 96px) clamp(24px, 5vw, 72px);
}

.tu-2 {
  position: absolute;
  left: min(86%, calc(100% - 0.315 * clamp(300px, 38vw, 520px) - 16px));
  top: 50%;
  width: clamp(300px, 38vw, 520px);
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.tu-3 {
  display: block;
  width: 100%;
  height: auto;
  opacity: 0.08;
}

.tu-4 {
  position: relative;
  max-width: 900px;
  width: 100%;
  margin: 0 auto;
}

.tu-5 {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin-bottom: 22px;
  animation: crFadeIn 900ms var(--silk) 150ms both;
}

.tu-6 {
  display: block;
  width: 1px;
  height: clamp(48px, 6vw, 96px);
  margin-top: calc(-1 * clamp(56px, 7vw, 96px));
  background: linear-gradient(rgba(166, 135, 111, 0) 0%, rgba(166, 135, 111, 0.5) 100%);
}

.tu-7 {
  width: 20px;
  height: 20px;
  transform: rotate(-16deg);
}

.tu-8 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(28px, 3vw, 40px);
  line-height: 1.2;
  letter-spacing: 0.015em;
  color: var(--color-mocha);
  margin: 0;
  max-width: 22ch;
}

.tu-9 {
  display: block;
  overflow: hidden;
  padding-bottom: 0.1em;
}

.tu-10 {
  display: block;
  animation: crLineUp 1100ms var(--silk) 250ms both;
}

.tu-11 {
  display: flex;
  align-items: baseline;
  gap: 24px;
  margin-top: 30px;
  animation: crFadeIn 900ms var(--silk) 620ms both;
}

.tu-12 {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--color-bronze-text);
  white-space: nowrap;
}

.tu-13 {
  display: block;
  flex: 1;
  height: 1px;
  background: rgba(166, 135, 111, 0.3);
  align-self: center;
}

.tu-14 {
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-mocha);
  white-space: nowrap;
  font-feature-settings: 'tnum' 1;
}

.tu-15 {
  background: var(--color-warm-sand);
  padding: clamp(72px, 9vw, 120px) clamp(24px, 5vw, 72px);
}

.tu-16 {
  max-width: 760px;
  margin: 0 auto;
}

.tu-17 {
  font-size: 19px;
  font-weight: 300;
  line-height: 1.8;
  color: var(--color-espresso);
  margin: 0 0 var(--space-xl);
  max-width: 62ch;
}

.tu-18 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(21px, 2vw, 26px);
  line-height: 1.3;
  color: var(--color-espresso);
  margin: 0 0 var(--space-sm);
  padding-top: var(--space-lg);
  border-top: 1px solid rgba(166, 135, 111, 0.28);
}

.tu-19 {
  font-size: 17px;
  font-weight: 300;
  line-height: 1.85;
  color: var(--color-mocha);
  margin: 0 0 var(--space-md);
}

.tu-20 {
  color: var(--color-bronze-text);
  text-decoration: none;
  border-bottom: 1px solid rgba(166, 135, 111, 0.4);
  padding-bottom: 1px;
}