/* ALYSSA GRASSO — Ocean & Sand + Coral. Managed through Google Drive. */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;1,400;1,500&family=Urbanist:wght@400;500;600;700&display=swap');

:root {
  /* Main palette */
  --navy: #091E2A;
  --deep: #061923;
  --teal: #26767B;
  --teal-hover: #1C6066;
  --mint: #E2EBE9;
  --cream: #F7F4ED;
  --surface: #FFFDF8;
  --ink: #142A35;
  --muted: #526570;
  --line: #D9E0DD;

  /* Decorative accents — teal remains the primary CTA color */
  --sand: #C5A781;
  --coral: #C5A781;
  --coral-soft: #EEE4D6;

  /* Dark hero colors; customize these independently of section backgrounds */
  --hero-start: #061923;
  --hero-middle: #092A36;
  --hero-end: #0D303B;
  --hero-muted: #D7E4E3;
  --hero-outline: rgba(224,242,241,.55);
  --dock-background: rgba(250,249,246,.96);

  /* Typography */
  --font-heading: 'Cormorant Garamond', Georgia, serif;
  --font-body: 'Urbanist', Arial, sans-serif;
  --heading-font-weight: 500;
  --heading-letter-spacing: -0.025em;
  --heading-line-height: 1.12;
  --heading-text-transform: none;
  --font-size-h1: clamp(2.7rem, 5.5vw, 4.8rem);
  --font-size-h2: clamp(2rem, 3.4vw, 3.1rem);
  --font-size-h3: clamp(1.15rem, 1.4vw, 1.4rem);

  /* Wordmark */
  --font-size-brand: 1.7rem;
  --font-size-brand-tablet: 1.45rem;
  --font-size-brand-mobile: 1.5rem;
  --brand-font-weight: 600;
  --brand-letter-spacing: .15em;

  /* Layout / components */
  --font-base-size: 16px;
  --container-width: 1180px;
  --container-gutter: 26px;
  --section-spacing: 95px;
  --button-radius: 3px;
  --card-radius: 5px;
  --card-padding: 32px;
  --dock-height: 84px;
}


/* QA 2026-10-13 | Alyssa-approved typography corrections.
   Existing templates and bindings are untouched. Scoped only to the two
   approved panels. The palette and typography variables above do not change.
   Important declarations are limited to these elements because framework
   styles were overriding/obscuring the card's normal section CSS. */

/* Alyssa's Philosophy: signature label + short sand-gold underline. */
#hero.luxury-hero .luxury-quote-label {
  display: block !important;
  color: var(--sand) !important;
  font-family: var(--font-body) !important;
  font-size: .875rem !important;
  font-weight: 700 !important;
  line-height: 1.45 !important;
  letter-spacing: .14em !important;
  text-transform: uppercase !important;
  margin: 0 0 21px !important;
}
#hero.luxury-hero .luxury-quote-label::after {
  content: "";
  display: block;
  width: 64px;
  height: 2px;
  margin-top: 13px;
  background-color: var(--sand);
}
/* The visible underline is provided by the label pseudo-element so the
   design works even when the pre-existing empty rule div is suppressed. */
#hero.luxury-hero .luxury-quote-rule {
  display: none !important;
}
#hero.luxury-hero .luxury-quote blockquote {
  font-family: var(--font-heading) !important;
  font-style: italic !important;
  font-size: clamp(1.4rem, 1.85vw, 1.9rem) !important;
  line-height: 1.36 !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
  color: var(--cream) !important;
}
#hero.luxury-hero .luxury-quote blockquote span,
#hero.luxury-hero .luxury-quote blockquote em {
  display: inline !important;
}
#hero.luxury-hero .luxury-quote blockquote .quote-mark {
  color: var(--sand) !important;
}

/* Leadership Grounded in Experience: approved single-column hierarchy. */
#about .experience.leadership-experience {
  text-align: left !important;
}
#about .experience.leadership-experience .leadership-years-label {
  color: var(--cream) !important;
  font-family: var(--font-body) !important;
  font-size: 1.16rem !important;
  font-weight: 500 !important;
  line-height: 1.35 !important;
  margin: 0 !important;
}
#about .experience.leadership-experience .leadership-divider {
  display: block !important;
  width: 100% !important;
  height: 1px !important;
  min-height: 1px !important;
  margin: 25px 0 9px !important;
  padding: 0 !important;
  border: 0 !important;
  background-color: rgba(197, 167, 129, .42) !important;
}
#about .experience.leadership-experience .leadership-strengths {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 0 !important;
  text-align: left !important;
}
#about .experience.leadership-experience .leadership-strength {
  display: grid !important;
  grid-template-columns: 20px minmax(0, 1fr) !important;
  align-items: start !important;
  gap: 13px !important;
  padding: 16px 0 !important;
  border-bottom: 1px solid rgba(197, 167, 129, .19) !important;
  min-width: 0 !important;
}
#about .experience.leadership-experience .leadership-strength:last-child {
  border-bottom: 0 !important;
}
#about .experience.leadership-experience .leadership-strength-icon {
  display: grid !important;
  place-items: center !important;
  width: 19px !important;
  height: 19px !important;
  border: 1px solid rgba(197, 167, 129, .75) !important;
  border-radius: 50% !important;
  color: var(--sand) !important;
  font-family: var(--font-body) !important;
  font-size: .72rem !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  padding: 0 !important;
}
#about .experience.leadership-experience .leadership-strength > div {
  min-width: 0 !important;
}
#about .experience.leadership-experience .leadership-strength-title {
  display: block !important;
  color: var(--sand) !important;
  font-family: var(--font-body) !important;
  font-size: 1.035rem !important;
  font-weight: 700 !important;
  line-height: 1.36 !important;
  letter-spacing: 0 !important;
  margin: 0 0 5px !important;
  text-transform: none !important;
}
#about .experience.leadership-experience .leadership-strength p {
  display: block !important;
  color: var(--cream) !important;
  font-family: var(--font-body) !important;
  font-size: .895rem !important;
  font-weight: 400 !important;
  line-height: 1.58 !important;
  letter-spacing: 0 !important;
  margin: 0 !important;
}
@media (max-width: 740px) {
  #hero.luxury-hero .luxury-quote blockquote {
    font-size: 1.45rem !important;
  }
  #about .experience.leadership-experience .leadership-strength-title {
    font-size: 1rem !important;
  }
  #about .experience.leadership-experience .leadership-strength p {
    font-size: .875rem !important;
  }
}


/* QA 2026-10-13 | Philosophy-only selector compatibility fix.
   No template, JSON, leadership, palette or theme-variable changes.
   Uses stable classes on the approved, working hero template rather than
   requiring the outer section to retain both #hero and .luxury-hero. */

#hero .luxury-quote-label,
.luxury-quote .luxury-quote-label {
  display: block !important;
  color: var(--sand, #C5A781) !important;
  font-family: var(--font-body, 'Urbanist', Arial, sans-serif) !important;
  font-size: .875rem !important;
  font-weight: 700 !important;
  line-height: 1.4 !important;
  letter-spacing: .14em !important;
  text-transform: uppercase !important;
  margin: 0 0 22px !important;
}
#hero .luxury-quote-label::after,
.luxury-quote .luxury-quote-label::after {
  content: "" !important;
  display: block !important;
  width: 64px !important;
  height: 2px !important;
  margin-top: 13px !important;
  background: var(--sand, #C5A781) !important;
}
#hero .luxury-quote-rule,
.luxury-quote .luxury-quote-rule {
  display: none !important;
}
#hero .luxury-quote blockquote,
.luxury-quote blockquote {
  color: var(--cream, #F7F4ED) !important;
  font-family: var(--font-heading, 'Cormorant Garamond', Georgia, serif) !important;
  font-style: italic !important;
  font-size: clamp(1.5rem, 1.9vw, 1.9rem) !important;
  font-weight: 400 !important;
  line-height: 1.36 !important;
  letter-spacing: 0 !important;
  margin: 0 !important;
}
#hero .luxury-quote blockquote span,
#hero .luxury-quote blockquote em,
.luxury-quote blockquote span,
.luxury-quote blockquote em {
  display: inline !important;
}
@media (max-width:740px) {
  #hero .luxury-quote blockquote,
  .luxury-quote blockquote {
    font-size: 1.45rem !important;
    line-height: 1.4 !important;
  }
}


/* QA 2026-10-13 | Philosophy quote legibility only.
   Preserve the existing card, gold heading/underline, colors, and approved copy.
   Use the site's existing Urbanist body font for this long reading passage. */
#hero.luxury-hero .luxury-quote blockquote,
#hero .luxury-quote blockquote,
.luxury-quote blockquote {
  font-family: var(--font-body, 'Urbanist', Arial, sans-serif) !important;
  font-style: italic !important;
  font-weight: 400 !important;
  font-size: clamp(1.125rem, 1.6vw, 1.25rem) !important;
  line-height: 1.68 !important;
  letter-spacing: .005em !important;
}
@media (max-width: 740px) {
  #hero.luxury-hero .luxury-quote blockquote,
  #hero .luxury-quote blockquote,
  .luxury-quote blockquote {
    font-size: 1.075rem !important;
    line-height: 1.65 !important;
  }
}