/* considered-refinement.html, page-scoped styles.
   Generated from designs/Considered Refinement.dc.html, values verbatim.
   Class names are mechanical (.cr-1, .cr-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 --- */

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

.cr-2 {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.18);
  object-position: 58% 54%;
  opacity: 0.5;
  pointer-events: none;
}

.cr-3 {
  position: absolute;
  inset: 0;
  background: linear-gradient(rgba(246, 239, 233, 0.94), rgba(246, 239, 233, 0) 22%, rgba(246, 239, 233, 0) 86%, rgba(246, 239, 233, 0.86));
  pointer-events: none;
}

.cr-4 {
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, rgba(246, 239, 233, 0.9) 0%, rgba(246, 239, 233, 0.76) 46%, rgba(246, 239, 233, 0.52) 100%);
  pointer-events: none;
}

.cr-5 {
  position: relative;
  max-width: 1360px;
  width: 100%;
  margin: 0 auto;
}

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

.cr-7 {
  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%);
}

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

.cr-9 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(30px, 3.4vw, 46px);
  line-height: 1.2;
  letter-spacing: 0.015em;
  color: var(--color-mocha);
  margin: 0;
  max-width: 22ch;
}

.cr-10 {
  display: block;
  overflow: hidden;
  padding-bottom: 0.1em;
}

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

.cr-12 {
  display: block;
  animation: crLineUp 1100ms var(--silk) 420ms both;
}

.cr-13 {
  position: relative;
  display: inline-block;
  color: var(--color-bronze-text);
}

.cr-14 {
  position: absolute;
  left: 0;
  right: 0.12em;
  bottom: 0.14em;
  height: 1px;
  background: var(--color-champagne-gold);
  transform-origin: left center;
  animation: crRuleGrow 1100ms var(--silk) 1250ms both;
}

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

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

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

.cr-18 {
  font-family: var(--font-body);
  font-weight: 500;
  letter-spacing: 0.08em;
  font-size: var(--type-small);
  color: var(--color-bronze-text);
  font-feature-settings: 'tnum' 1;
}

.cr-19 {
  font-size: 19px;
  font-weight: 300;
  line-height: 1.7;
  color: var(--color-mocha);
  max-width: 46ch;
  margin: 34px 0 0;
  animation: crFadeIn 900ms var(--silk) 760ms both;
}

.cr-20 {
  background: var(--color-warm-sand);
  padding: clamp(80px, 10vw, 144px) clamp(24px, 5vw, 72px);
}

.cr-21 {
  max-width: 1360px;
  margin: 0 auto;
}

.cr-22 {
  display: flex;
  align-items: baseline;
  gap: 24px;
  margin-bottom: clamp(40px, 5vw, 72px);
}

.cr-23 {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--color-bronze-text);
}

.cr-24 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr));
  gap: clamp(32px, 5vw, 88px);
  align-items: start;
}

.cr-25 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(28px, 3.2vw, 42px);
  line-height: 1.2;
  color: var(--color-espresso);
  margin: 0;
  max-width: 18ch;
}

.cr-26 {
  max-width: 62ch;
}

.cr-27 {
  font-size: clamp(16px, 1.25vw, 18px);
  font-weight: 300;
  line-height: var(--line-height-relaxed);
  color: var(--color-mocha);
  margin: 0 0 var(--space-md);
}

.cr-28 {
  font-size: clamp(16px, 1.25vw, 18px);
  font-weight: 300;
  line-height: var(--line-height-relaxed);
  color: var(--color-mocha);
  margin: 0;
}

.cr-29 {
  position: relative;
  overflow: hidden;
  padding: clamp(80px, 10vw, 144px) clamp(24px, 5vw, 72px);
}

.cr-30 {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 46%;
}

.cr-31 {
  position: absolute;
  inset: 0;
  background: linear-gradient(rgba(246, 239, 233, 0.4) 0%, rgba(246, 239, 233, 0.18) 30%, rgba(246, 239, 233, 0.24) 60%, rgba(246, 239, 233, 0.78) 100%);
  pointer-events: none;
}

.cr-32 {
  position: relative;
  max-width: 1360px;
  margin: 0 auto;
}

.cr-33 {
  text-align: center;
  margin-bottom: clamp(36px, 4.5vw, 60px);
}

.cr-34 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(28px, 3vw, 40px);
  line-height: 1.2;
  letter-spacing: 0.012em;
  color: var(--color-espresso);
  margin: 0;
}

.cr-35 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: clamp(24px, 3vw, 40px);
}

.cr-36 {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-md);
  padding: clamp(30px, 3.2vw, 42px) clamp(22px, 2.4vw, 32px);
  background: rgba(246, 239, 233, 0.94);
  border-radius: 6px;
  box-shadow: 0 18px 44px rgba(140, 110, 88, 0.16);
  transition: transform 600ms var(--silk), box-shadow 600ms var(--silk);
}
.cr-36:hover {
  transform: translateY(-3px);
  box-shadow: 0 26px 58px rgba(140, 110, 88, 0.22);
}

.cr-37 {
  color: var(--color-bronze-text);
}

.cr-38 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--type-h4);
  line-height: 1.3;
  color: var(--color-espresso);
  margin: 0;
}

.cr-39 {
  font-size: var(--type-small);
  font-weight: 300;
  line-height: var(--line-height-relaxed);
  color: var(--color-mocha);
  margin: 0;
}

.cr-40 {
  margin-top: auto;
  align-self: center;
  font-size: var(--type-xs);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-bronze-text);
  text-decoration: none;
  border-bottom: 1px solid rgba(166, 135, 111, 0.5);
  padding-bottom: 4px;
  background-image: linear-gradient(var(--color-champagne-gold), var(--color-champagne-gold));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0% 1px;
  transition: color var(--duration-fast) var(--easing), border-color var(--duration-fast) var(--easing), background-size 450ms var(--silk);
}
.cr-40:hover {
  color: var(--color-deep-bronze);
  border-bottom-color: rgba(184, 154, 75, 0.4);
  background-size: 100% 1px;
}

.cr-41 {
  position: relative;
  overflow: hidden;
  padding: clamp(72px, 9vw, 128px) clamp(24px, 5vw, 72px);
}

.cr-42 {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 54%;
  opacity: 0.55;
}

.cr-43 {
  position: absolute;
  inset: 0;
  background: linear-gradient(rgba(246, 239, 233, 0.82) 0%, rgba(246, 239, 233, 0.4) 34%, rgba(246, 239, 233, 0.4) 70%, rgba(246, 239, 233, 0.62) 100%);
  pointer-events: none;
}

.cr-44 {
  position: relative;
  max-width: 900px;
  margin: 0 auto;
}

.cr-45 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: fit-content;
  margin: 0 auto 22px;
}

.cr-46 {
  display: block;
  width: 1px;
  height: clamp(38px, 4.6vw, 78px);
  background: linear-gradient(rgba(166, 135, 111, 0) 0%, rgba(166, 135, 111, 0.55) 100%);
}

.cr-47 {
  width: 36px;
  height: 36px;
}

.cr-48 {
  border-radius: 6px;
  background: rgba(246, 239, 233, 0.94);
  box-shadow: 0 18px 44px rgba(140, 110, 88, 0.16);
  padding: clamp(30px, 4vw, 52px);
}

.cr-49 {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-bronze-text);
  margin: 0 0 var(--space-md);
}

.cr-50 {
  font-size: var(--type-small);
  font-weight: 300;
  line-height: var(--line-height-relaxed);
  color: var(--color-mocha);
  margin: 0 0 var(--space-sm);
}

.cr-51 {
  color: var(--color-bronze-text);
  text-decoration: underline;
  text-decoration-color: rgba(166, 135, 111, 0.5);
  text-underline-offset: 3px;
}
.cr-51:hover {
  color: var(--color-deep-bronze);
  text-decoration-color: var(--color-champagne-gold);
}