/* =========================================================================
   configurator.css — supplementary styles ONLY.
   Everything else on this page (header, nav, hero, proof/marquee, problem
   grid, tier grid, partner grid, footer) uses the real, unmodified
   styles.css from www.kuma.partners as-is. This file adds only what that
   stylesheet doesn't already have: the co-branded logo lockup (real Kuma
   mark image + hairline divider + "NONAMEYET" text wordmark), the photo
   cards in the places grid, image treatment for the format cards, the
   monospace step-numbering prefix inside the configurator, and the
   blueprint output layout. Everything reuses --navy/--teal/--cream/--ink/
   --hairline-color where it can; the two exceptions are the divider and
   wordmark colors below, called out where they diverge from the token.
   ========================================================================= */

/* Co-branded header/footer lockup: the real Kuma Partners mark (an <img>,
   transparent PNG) plus a hairline divider plus a plain-text "NONAMEYET"
   wordmark, laid out as siblings rather than pre-composited into one
   image, so each piece stays crisp and independently styleable. */
.logo-jv{display:inline-flex; align-items:center; text-decoration:none;}
.logo-lockup-track{display:inline-flex; align-items:center; gap:16px;}
.logo-kuma{height:36px; width:auto; display:block; object-fit:contain;}
.logo-divider{
  display:inline-block; width:1px; height:28px; flex-shrink:0;
  /* Slightly warmer/darker than --hairline-color (#E2DDD4) so it reads
     against the frosted header background; not a design-system token. */
  background:#D5D0C7;
}
.logo-nonameyet{
  font-family:'Montserrat',Arial,sans-serif; font-weight:700; font-size:1.05rem;
  letter-spacing:.12em; display:inline-block; line-height:1;
  /* Deeper than --teal (#588088) to match the reference lockup; a
     one-off, not a new token. */
  color:#385E66;
  text-decoration:underline; text-underline-offset:4px; text-decoration-thickness:1.5px;
}
@media (max-width:860px){
  .logo-kuma{height:30px;}
  .logo-divider{height:22px;}
  .logo-nonameyet{font-size:.9rem;}
}

/* Configurator: monospace two-digit numbering prefix on each scorecard-option,
   the base .scorecard-option styling (border, hover, selected state) is
   entirely reused from styles.css untouched. */
.scorecard-option{display:flex; align-items:flex-start; gap:14px;}
.sc-option-num{
  font-family:'SFMono-Regular', Consolas, Menlo, monospace; font-size:.82rem; font-weight:700;
  color:var(--teal); flex-shrink:0; padding-top:1px;
}
.scorecard-option.selected .sc-option-num{color:var(--navy);}
.sc-option-body{display:flex; flex-direction:column; gap:4px;}
.sc-option-title{font-family:'Montserrat',Arial,sans-serif; font-weight:600; color:var(--navy); font-size:.98rem;}
.sc-option-meta{
  font-family:'Lato',Arial,sans-serif; font-weight:700; font-size:.76rem; color:var(--teal);
  text-transform:uppercase; letter-spacing:.06em;
}
.sc-option-desc{font-size:.85rem; line-height:1.55; color:rgba(26,26,26,.68); font-weight:400;}

/* Blueprint output, reusing the scorecard-card shell but wider */
.blueprint-card{max-width:820px;}
.blueprint-title{
  font-family:'Montserrat',Arial,sans-serif; font-style:italic; font-weight:600;
  font-size:1.9rem; color:var(--navy); text-align:center; margin-bottom:24px; text-wrap:balance;
}
.blueprint-pills{display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin-bottom:8px;}

/* Reuses .offsite-specs-row / .offsite-specs-label pattern from styles.css
   for the 4-block "Recommended Setting / Intellectual Lead / Key Monday
   Deliverable / Hospitality Model" summary. */
.blueprint-specs{
  background:var(--cream); border:1px solid var(--hairline-color); border-radius:6px;
  padding:28px 26px; margin:28px 0;
}

.restart-link{
  display:block; text-align:center; font-size:.85rem; color:var(--navy);
  text-decoration:none; border-bottom:1px solid rgba(40,64,80,.3); width:max-content;
  margin:8px auto 0; padding-bottom:2px;
}
.restart-link:hover{border-bottom-color:var(--navy);}

/* Places grid (#places): photo-topped cards, one per environment. Follows
   the same visual language as .tier-card (white fill, 1px hairline
   border, 2px radius, hover lift) but built as its own component since
   the image needs to bleed to the card's outer edge rather than sit
   inset like .tier-card-media does on the format cards. */
.places-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:28px; align-items:stretch;}
.place-card{
  background:#fff; border:1px solid var(--hairline-color); border-radius:2px;
  overflow:hidden; display:flex; flex-direction:column;
  transition:box-shadow .2s ease, border-color .2s ease;
}
.place-card:hover{border-color:rgba(40,64,80,.25); box-shadow:0 16px 36px -20px rgba(40,64,80,.25);}
.place-image{width:100%; aspect-ratio:16/10; overflow:hidden; background:var(--hairline-color);}
.place-image img{width:100%; height:100%; object-fit:cover; display:block; transition:transform .35s ease;}
.place-card:hover .place-image img{transform:scale(1.03);}
.place-body{padding:28px 24px; display:flex; flex-direction:column; flex:1;}
.place-index{
  display:block; font-family:'Lato',Arial,sans-serif; font-weight:700; font-size:.72rem;
  letter-spacing:.12em; text-transform:uppercase; color:var(--teal); margin-bottom:12px;
}
.place-setting{font-size:.92rem; line-height:1.5; color:var(--navy); margin-bottom:12px;}
.place-setting strong{font-family:'Montserrat',Arial,sans-serif; font-weight:600;}
.place-desc{font-size:.92rem; line-height:1.6; color:rgba(26,26,26,.72); margin-bottom:20px;}
.place-amenity{
  margin-top:auto; padding-left:14px; border-left:1px solid var(--teal);
  font-size:.85rem; line-height:1.5; color:var(--navy);
}
.place-amenity strong{font-family:'Montserrat',Arial,sans-serif; font-weight:600; display:inline;}
@media (max-width:860px){
  .places-grid{grid-template-columns:1fr; gap:32px;}
}