/* Visual direction from the supplied Promesa concept boards. */
:root {
  --cream: #f6f0e7;
  --stone: #e6d8c4;
  --burgundy: #4a1e24;
  --wine: #581f2b;
  --gold: #b89455;
  --ink: #2b1b14;
  --muted: #665240;
  --line: #d1bfa7;
  --blue: #293b42;
  --caramel: #88623f;
  --grain: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='grain'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' opacity='.045' filter='url(%23grain)'/%3E%3C/svg%3E");
}

body {
  background-color: var(--cream);
  background-image: var(--grain);
  background-size: 180px 180px;
}

::selection { background: #dbc29c; color: var(--burgundy); }
a:focus-visible, button:focus-visible, summary:focus-visible {
  outline-color: #92672e;
}

.announcement {
  background: linear-gradient(110deg, #361419, var(--wine), #361419);
  color: #f2e2c7;
  border-bottom: 1px solid #b8945566;
  padding-top: 10px;
  padding-bottom: 10px;
}

.site-header { border-bottom: 1px solid #b894552e; }
.location-providers-link { display: inline-flex; align-items: center; gap: 24px; margin-top: 24px; padding-bottom: 6px; border-bottom: 1px solid currentColor; font-size: 11px; }
nav { font-size: 11px; }
nav > a:not(.nav-cta):hover { color: #8a6035; }
.nav-cta {
  background: var(--burgundy);
  border-color: #b8945599;
  color: var(--cream);
  border-radius: 2px;
}
.nav-cta:hover { background: var(--wine); border-color: var(--gold); }

.hero {
  padding-top: 27px;
  padding-bottom: 92px;
  min-height: 660px;
  gap: 5%;
}
.hero-copy { padding-top: 22px; }
.hero .eyebrow { color: #755b3f; letter-spacing: .2em; }
h1 { font-size: clamp(45px, 4.55vw, 75px); line-height: 1.1; }
h1 em, h2 em, .founder-quote em { color: var(--caramel); }
.hero-intro { font-size: 15px; max-width: 385px; line-height: 1.9; }
.hero-actions { margin-bottom: 44px; }
.hero-locations { font-size: 11px; }
.hero-art {
  padding: 10px;
  border: 1px solid #b8945599;
  border-radius: 280px 280px 5px 5px;
  background: linear-gradient(135deg, #eee1cd, #cbb69a 65%, #e6d7c0);
  box-shadow: 12px 20px 45px #4931261f;
  overflow: visible;
  aspect-ratio: auto;
  margin: 12px 0 32px;
}
.hero-art::before {
  content: "";
  position: absolute;
  inset: -10px;
  border: 1px solid #b8945559;
  border-radius: inherit;
  pointer-events: none;
}
.hero-brand-image { border-radius: inherit; }
.hero-art-caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -53px;
  text-align: center;
  font-family: var(--serif);
  font-style: italic;
  font-size: 21px;
  color: var(--burgundy);
  line-height: 1.4;
}

.button {
  font-size: 11px;
  padding: 17px 24px;
  border-radius: 2px;
  letter-spacing: .035em;
}
.button-primary {
  background: linear-gradient(115deg, var(--burgundy), #602b32);
  border-color: #b8945580;
  box-shadow: 0 6px 16px #4a1e2412;
}
.button-primary:hover { background: var(--wine); border-color: var(--gold); }
.text-link { font-size: 12px; border-bottom-color: #a88350; }

.values-strip {
  background: linear-gradient(110deg, #37151b, #581f2b 60%, #3d1b21);
  color: #eddfc9;
  border-color: #b8945573;
  letter-spacing: .24em;
  font-size: 10px;
  padding-top: 25px;
  padding-bottom: 25px;
}
.strip-star { color: #cfb079; }

.section-heading > p,
.story-copy > p:not(.eyebrow),
.care-feature-copy > p:not(.eyebrow),
.opportunity-intro > p:not(.eyebrow),
.details-body {
  font-size: 14px;
  line-height: 1.9;
}
.eyebrow { font-size: 10px; }
.story-copy .eyebrow, .section-heading .eyebrow,
.opportunity-intro .eyebrow { color: #6b4d2f; }
.section-heading > p { max-width: 340px; }
.story { gap: 9%; }
.founder-portrait {
  min-height: 590px;
  border-radius: 250px 250px 5px 5px;
  outline: 1px solid #b8945580;
  outline-offset: 9px;
  box-shadow: 8px 18px 36px #4931261c;
}
.founder-portrait figcaption {
  background: linear-gradient(transparent, #3b151ee6);
  padding-bottom: 29px;
}
.founder-portrait strong { font-size: 22px; }
.founder-portrait figcaption > span { font-size: 10px; color: #ead6b6; }
.founder-quote { border-top-color: #b8945566; font-size: 24px; }

.care-feature {
  background: #ece1d1;
  border: 1px solid #b8945566;
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 14px 36px #4931260d;
}
.care-feature-copy { background-image: var(--grain); padding-top: 48px; padding-bottom: 48px; }
.care-feature-copy .eyebrow { color: #85633e; font-size: 9px; }
.care-feature-copy h3 { font-size: 36px; }
.care-feature-copy .text-link { font-size: 11px; }
.care-photo { min-height: 470px; }
.booking-note { font-size: 11px; max-width: 290px; }

.location-card {
  color: var(--cream);
  border-top: 2px solid var(--gold);
  border-radius: 3px;
  padding: 35px 34px 28px;
  box-shadow: 0 14px 25px #49312614;
}
.location-card::before {
  content: "";
  position: absolute;
  right: -86px;
  top: 55px;
  width: 260px;
  height: 420px;
  border: 1px solid #c9a96d29;
  border-radius: 160px 160px 0 0;
  pointer-events: none;
}
.location-card > * { position: relative; }
.location-blue { background: linear-gradient(125deg, #293b42, #1c2c32); }
.location-red { background: linear-gradient(125deg, #602b32, #3e171e); }
.location-label, .location-index, .location-flower { color: #d8bc87; }
.location-label { font-size: 9px; }
.location-card h3 { color: var(--cream); font-size: 43px; }
.location-card > p { font-size: 13px; color: #ecdfd3; opacity: 1; }
.location-bottom { border-top-color: #c4a56c66; font-size: 10px; }
.location-bottom time { font-size: 12px; font-weight: 400; }

.opportunities {
  background-color: #e7d9c6;
  background-image: var(--grain), linear-gradient(105deg, #ecdfcd, #dfcdb5);
  border-color: #b8945573;
  padding-top: 90px;
  padding-bottom: 90px;
}
.opportunity-intro > p:not(.eyebrow) { max-width: 340px; }
details, details:first-child { border-color: #b298764d; }
summary { font-size: 27px; }
summary small { color: #6b4d2f; font-size: 9px; }
.details-body { font-size: 13px; }

.closing {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-top: 96px;
  padding-bottom: 101px;
  border-top: 1px solid #b89455;
  background: radial-gradient(ellipse at 50% 120%, #b894553b, transparent 65%),
    linear-gradient(110deg, #361318, #602a32 50%, #361318);
}
.closing::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 24px;
  left: 50%;
  width: min(560px, 83vw);
  height: 700px;
  transform: translateX(-50%);
  border: 1px solid #c8a26557;
  border-radius: 300px 300px 0 0;
  box-shadow: 0 -10px 65px #d5a5540f;
  pointer-events: none;
}
.closing .eyebrow { color: #dec395; font-size: 9px; }
.closing h2 em { color: #dec395; }
.closing > p:not(.eyebrow) {
  color: #eddbc8;
  font-size: 17px;
  font-family: var(--serif);
  font-style: italic;
}
.button-light { background: #f0e2cc; border: 1px solid #d1af78; }
.button-light:hover { background: #fff3df; }
.booking-preview-callout { display: flex; align-items: center; justify-content: space-between; gap: 35px; padding: 32px 0 0; margin-top: 30px; border-top: 1px solid var(--line); }
.booking-preview-callout h3 { font-size: 29px; color: var(--burgundy); margin: 12px 0; }
.booking-preview-callout .eyebrow { font-size: 9px; color: #6b4d2f; }
.booking-preview-callout div > p:last-child { font-size: 12px; line-height: 1.85; color: var(--muted); max-width: 470px; }
.booking-preview-callout > a { flex-shrink: 0; }
footer { padding-top: 42px; }
footer > div, footer > p { font-size: 10px; }

@media (max-width: 1100px) {
  .hero { gap: 4%; }
  .hero-actions { gap: 20px; }
  .button { padding: 15px 20px; }
  .story { gap: 7%; }
  .founder-portrait { min-height: 610px; }
  .care-feature-copy { padding-left: 10%; padding-right: 9%; }
  .care-booking-actions { gap: 16px; }
}

@media (max-width: 980px) {
  #navigation { background-color: var(--cream); background-image: var(--grain); }
  .nav-cta { padding: 14px 17px; }
  h1 { font-size: clamp(39px, 5.1vw, 52px); }
  .hero-intro { font-size: 14px; }
  .hero .eyebrow { font-size: 8px; letter-spacing: .14em; }
  .hero-locations { gap: 18px; font-size: 10px; }
  .hero-art-caption { font-size: 20px; }
}

@media (max-width: 760px) {
  .hero { min-height: 0; padding-top: 0; padding-bottom: 86px; gap: 36px; }
  .hero-copy { padding-top: 32px; }
  h1 { font-size: clamp(41px, 8.7vw, 65px); }
  .hero-intro { font-size: 14px; }
  .hero-actions { gap: 24px; margin-bottom: 30px; }
  .hero-locations { font-size: 10px; gap: 24px; }
  .hero-art { padding: 8px; border-radius: 230px 230px 4px 4px; margin: 5px auto 0; width: calc(100% - 16px); }
  .hero-art::before { inset: -8px; }
  .hero-art-caption { bottom: -47px; font-size: 21px; }
  .button { font-size: 11px; }
  .values-strip { font-size: 8px; letter-spacing: .13em; padding-top: 22px; padding-bottom: 22px; }
  .story { gap: 43px; }
  .founder-portrait { min-height: 0; width: calc(100% - 18px); margin: 0 auto; border-radius: 210px 210px 4px 4px; }
  .founder-portrait strong { font-size: 22px; }
  .founder-quote { font-size: 25px; }
  .care-photo { min-height: 0; }
  .care-feature-copy { padding: 32px 24px 35px; }
  .care-feature-copy h3 { font-size: 34px; }
  .care-feature-copy > p:not(.eyebrow) { font-size: 14px; }
  .care-booking-actions { gap: 20px; }
  .booking-preview-callout { display: block; }
  .booking-preview-callout > a { margin-top: 22px; }
  .location-card { padding: 28px 27px; }
  .location-card h3 { font-size: 42px; }
  .location-card > p { font-size: 14px; }
  .opportunities { padding-top: 65px; padding-bottom: 65px; }
  .closing { padding-top: 78px; padding-bottom: 83px; }
  .closing .eyebrow { font-size: 7px; }
  .closing > p:not(.eyebrow) { font-size: 16px; }
  footer > div, footer > p { font-size: 10px; }
}