/* ============================================================
   NEST WELL PROFESSIONAL ORGANIZING — custom.css
   Bootstrap 5.3 base. All custom styles here, zero inline.
   Color brief: Sky Blue #97CBEE · Warm Yellow #FEDD79
   Analogous: Soft Mint #96EED6 · Soft Lavender #9C96EE
              Soft Coral #FE867B · Soft Yellow-Green #C8FE7B
   Type: Cormorant Garamond (headings) · Lato (body)
   ============================================================ */

/* ── Google Fonts ── */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;1,300;1,400&family=Lato:wght@300;400;700&display=swap');

/* ── Design Tokens ── */
:root {
  /* Brand palette */
  --nw-blue:        #97CBEE;
  --nw-blue-dark:   #6aadda;
  --nw-yellow:      #FEDD79;
  --nw-yellow-dark: #f5c93a;
  --nw-yellow-soft: #FFF4D8;
  --nw-mint:        #96EED6;
  --nw-lavender:    #9C96EE;
  --nw-coral:       #FE867B;
  --nw-yellow-green:#C8FE7B;

  /* Neutrals */
  --nw-linen:       #FAF8F3;
  --nw-linen-mid:   #F0EDE5;
  --nw-charcoal:    #2E2E2E;
  --nw-mid-gray:    #6B6B6B;
  --nw-light-rule:  #E5E0D8;
  --nw-white:       #FFFFFF;

  /* Typography */
  --font-display:  'Cormorant Garamond', Georgia, serif;
  --font-body:     'Lato', system-ui, sans-serif;

  /* Spacing rhythm */
  --section-pad-y: 5rem;
  --hub-panel-pad: 4.5rem 0;
}

/* ── Base Reset ── */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.7;
  color: var(--nw-charcoal);
  background-color: var(--nw-linen);
  -webkit-font-smoothing: antialiased;
}

/* ── Typography Scale ── */
h1, h2, h3, h4, h5, h6,
.display-1, .display-2, .display-3, .display-4,
.display-5, .display-6 {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.2;
  color: var(--nw-charcoal);
}

h1 { font-size: clamp(2.4rem, 5vw, 3.6rem); }
h2 { font-size: clamp(1.9rem, 4vw, 2.8rem); }
h3 { font-size: clamp(1.4rem, 3vw, 1.9rem); }
h4 { font-size: 1.25rem; font-weight: 500; }

.display-headline {
  font-family: var(--font-display);
  font-size: clamp(2.8rem, 6vw, 4.5rem);
  font-weight: 300;
  font-style: italic;
  line-height: 1.15;
  letter-spacing: -0.01em;
}

p { margin-bottom: 1.25rem; }
p:last-child { margin-bottom: 0; }

a {
  color: var(--nw-blue-dark);
  text-decoration: underline;
  text-decoration-color: transparent;
  transition: text-decoration-color 0.2s ease;
}
a:hover { text-decoration-color: var(--nw-blue-dark); }

.text-muted { color: var(--nw-mid-gray) !important; }

/* ── Navbar ── */
.nw-navbar {
  background-color: var(--nw-linen);
  border-bottom: 1px solid var(--nw-light-rule);
  padding: 1rem 0;
  position: sticky;
  top: 0;
  z-index: 1030;
}

.nw-navbar .navbar-brand {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 400;
  color: var(--nw-charcoal);
  letter-spacing: 0.02em;
  text-decoration: none;
}

.nw-navbar .navbar-brand span {
  color: var(--nw-blue-dark);
}

.nw-navbar .nav-link {
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 400;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--nw-charcoal) !important;
  padding: 0.35rem 0.75rem !important;
  text-decoration: none;
  position: relative;
}

.nw-navbar .nav-link::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0.75rem;
  right: 0.75rem;
  height: 1px;
  background-color: var(--nw-blue-dark);
  transform: scaleX(0);
  transition: transform 0.25s ease;
  transform-origin: left;
}

.nw-navbar .nav-link:hover::after,
.nw-navbar .nav-link.active::after {
  transform: scaleX(1);
}

.nw-navbar .nav-link.active {
  color: var(--nw-charcoal) !important;
  font-weight: 700;
}

.nw-navbar .navbar-toggler {
  border: 1px solid var(--nw-light-rule);
  border-radius: 4px;
}

.nw-navbar .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%232E2E2E' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* ── Buttons ── */
.btn-nw-primary {
  background-color: var(--nw-blue);
  color: var(--nw-charcoal);
  border: 1.5px solid var(--nw-blue);
  border-radius: 50px;
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.75rem 2rem;
  text-decoration: none;
  display: inline-block;
  transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.15s ease;
}

.btn-nw-primary:hover {
  background-color: var(--nw-yellow);
  border-color: var(--nw-yellow);
  color: var(--nw-charcoal);
  transform: translateY(-1px);
}

/* On the yellow CTA band a yellow hover would vanish — go charcoal there */
.nw-cta-band .btn-nw-primary:hover {
  background-color: var(--nw-charcoal);
  border-color: var(--nw-charcoal);
  color: var(--nw-linen);
}

.btn-nw-secondary {
  background-color: transparent;
  color: var(--nw-charcoal);
  border: 1.5px solid var(--nw-charcoal);
  border-radius: 50px;
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.75rem 2rem;
  text-decoration: none;
  display: inline-block;
  transition: background-color 0.2s ease, color 0.2s ease, transform 0.15s ease;
}

.btn-nw-secondary:hover {
  background-color: var(--nw-charcoal);
  color: var(--nw-linen);
  transform: translateY(-1px);
}

.btn-nw-yellow {
  background-color: var(--nw-yellow);
  color: var(--nw-charcoal);
  border: 1.5px solid var(--nw-yellow);
  border-radius: 50px;
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.75rem 2rem;
  text-decoration: none;
  display: inline-block;
  transition: background-color 0.2s ease, transform 0.15s ease;
}

.btn-nw-yellow:hover {
  background-color: var(--nw-yellow-dark);
  border-color: var(--nw-yellow-dark);
  color: var(--nw-charcoal);
  transform: translateY(-1px);
}

/* ── Hero ── */
.nw-hero {
  background-color: var(--nw-linen);
  padding: 5rem 0 4rem;
  position: relative;
  overflow: hidden;
}

.nw-hero-text {
  padding-right: 3rem;
}

.nw-hero-image {
  max-height: 480px;
  width: 100%;
  object-fit: cover;
  border-radius: 4px;
}

.nw-hero-eyebrow {
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--nw-blue-dark);
  margin-bottom: 1rem;
  display: block;
}

.nw-scroll-nudge {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1rem;
  color: var(--nw-mid-gray);
  margin-top: 2rem;
}

/* ── Tagline Strip ── */
.nw-tagline-strip {
  background-color: var(--nw-blue);
  padding: 0.875rem 0;
  overflow: hidden;
}

.nw-tagline-strip p {
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--nw-charcoal);
  margin: 0;
}

/* ── Section Base ── */
.nw-section {
  padding: var(--section-pad-y) 0;
}

.nw-section-linen { background-color: var(--nw-linen); }
.nw-section-white { background-color: var(--nw-white); }
.nw-section-blue  { background-color: var(--nw-blue); }
.nw-section-mid   { background-color: var(--nw-linen-mid); }

.nw-section-label {
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--nw-blue-dark);
  margin-bottom: 0.75rem;
  display: block;
}

/* ── Divider — warm yellow accent rule (brand update 2026-07) ── */
.nw-rule {
  border: none;
  border-top: 3px solid var(--nw-yellow);
  width: 120px;
  margin: 0 auto;
  opacity: 1;
}

/* ── Hub Panels (Home page) ── */
.nw-hub-panel {
  padding: var(--hub-panel-pad);
  border-bottom: 1px solid var(--nw-light-rule);
}

.nw-hub-panel:last-child { border-bottom: none; }

.nw-hub-panel-img {
  width: 100%;
  height: 360px;
  object-fit: cover;
  border-radius: 4px;
}

.nw-hub-panel-title {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 3.5vw, 2.4rem);
  font-weight: 400;
  margin-bottom: 0.75rem;
  color: var(--nw-charcoal);
}

.nw-hub-panel-invite {
  font-size: 1.0625rem;
  color: var(--nw-mid-gray);
  margin-bottom: 1.5rem;
}

/* Alternating panel backgrounds */
.nw-hub-panel:nth-child(odd)  { background-color: var(--nw-linen); }
.nw-hub-panel:nth-child(even) { background-color: var(--nw-white); }

/* ── Who This Is For list ── */
.nw-who-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.nw-who-list li {
  padding: 0.6rem 0 0.6rem 1.75rem;
  position: relative;
  border-bottom: 1px solid var(--nw-light-rule);
  font-size: 1rem;
}

.nw-who-list li:last-child { border-bottom: none; }

.nw-who-list li::before {
  content: '–';
  position: absolute;
  left: 0;
  color: var(--nw-blue-dark);
  font-weight: 700;
}

/* ── How It Works steps ── */
.nw-steps {
  counter-reset: nw-step;
  list-style: none;
  padding: 0;
  margin: 0;
}

.nw-steps li {
  counter-increment: nw-step;
  padding: 1.5rem 0 1.5rem 3.5rem;
  border-bottom: 1px solid var(--nw-light-rule);
  position: relative;
}

.nw-steps li:last-child { border-bottom: none; }

.nw-steps li::before {
  content: counter(nw-step);
  position: absolute;
  left: 0;
  top: 1.5rem;
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-style: italic;
  color: var(--nw-blue-dark);
  width: 2.5rem;
  text-align: center;
}

/* ── Credentials / Badges ── */
.nw-creds {
  background-color: var(--nw-linen-mid);
  padding: var(--section-pad-y) 0;
}

.nw-badge-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  align-items: center;
  justify-content: center;
}

.nw-badge-grid img {
  height: 100px;
  min-height: 80px;
  width: auto;
  object-fit: contain;
  filter: none;
  transition: transform 0.2s ease;
}

/* TCE and NAPO badges display equal or larger than the ICD badges */
.nw-badge-grid img[src*="badge-tce"],
.nw-badge-grid img[src*="badge-napo"] {
  height: 120px;
}

.nw-badge-grid img:hover { transform: scale(1.05); }

.nw-creds-list {
  list-style: none;
  padding: 0;
  margin: 1.5rem 0 0;
  font-size: 0.9375rem;
}

.nw-creds-list li {
  padding: 0.4rem 0 0.4rem 1.5rem;
  position: relative;
  color: var(--nw-charcoal);
  border-bottom: 1px solid var(--nw-light-rule);
}

.nw-creds-list li:last-child { border-bottom: none; }

.nw-creds-list li::before {
  content: '✦';
  position: absolute;
  left: 0;
  font-size: 0.6rem;
  top: 0.65rem;
  color: var(--nw-blue-dark);
}

/* ── CTA Band ── */
.nw-cta-band {
  background-color: var(--nw-yellow);
  padding: 4rem 0;
  text-align: center;
}

.nw-cta-band h2 {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 3.5vw, 2.6rem);
  margin-bottom: 0.5rem;
}

.nw-cta-band p {
  font-size: 1.0625rem;
  color: var(--nw-charcoal);
  margin-bottom: 2rem;
}

/* ── Service Cards ── */
.nw-service-card {
  background-color: var(--nw-white);
  border: 1px solid var(--nw-light-rule);
  border-radius: 4px;
  padding: 2rem;
  height: 100%;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.nw-service-card:hover {
  box-shadow: 0 4px 20px rgba(0,0,0,0.07);
  transform: translateY(-2px);
}

.nw-service-card h3 {
  font-size: 1.4rem;
  margin-bottom: 0.75rem;
}

.nw-service-card .nw-service-tag {
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--nw-blue-dark);
  margin-bottom: 0.75rem;
  display: block;
}

/* ── Testimonial Cards ── */
.nw-testimonial-card {
  background-color: var(--nw-yellow-soft);
  border-left: 4px solid var(--nw-yellow);
  padding: 1.75rem 2rem;
  margin-bottom: 1.5rem;
  border-radius: 0 4px 4px 0;
}

.nw-testimonial-card blockquote {
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 2vw, 1.35rem);
  font-style: italic;
  font-weight: 300;
  line-height: 1.6;
  margin: 0 0 1rem;
  color: var(--nw-charcoal);
}

.nw-testimonial-card cite {
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-style: normal;
  color: var(--nw-mid-gray);
  display: block;
}

/* ── Accordion (FAQ) ── */
.nw-accordion .accordion-item {
  background-color: transparent;
  border: none;
  border-bottom: 1px solid var(--nw-light-rule);
}

.nw-accordion .accordion-button {
  background-color: transparent;
  color: var(--nw-charcoal);
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 500;
  padding: 1.25rem 0;
  box-shadow: none;
}

.nw-accordion .accordion-button:not(.collapsed) {
  color: var(--nw-blue-dark);
  background-color: transparent;
  box-shadow: none;
}

.nw-accordion .accordion-button::after {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%236aadda'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
  flex-shrink: 0;
}

.nw-accordion .accordion-body {
  padding: 0 0 1.25rem;
  font-size: 1rem;
  color: var(--nw-mid-gray);
  line-height: 1.8;
}

/* ── Contact Form ── */
.nw-form .form-label {
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--nw-charcoal);
  margin-bottom: 0.35rem;
}

.nw-form .form-control,
.nw-form .form-select {
  background-color: var(--nw-white);
  border: 1px solid var(--nw-light-rule);
  border-radius: 4px;
  padding: 0.75rem 1rem;
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--nw-charcoal);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.nw-form .form-control:focus,
.nw-form .form-select:focus {
  border-color: var(--nw-blue-dark);
  box-shadow: 0 0 0 3px rgba(151, 203, 238, 0.35);
  outline: none;
}

.nw-form .form-control::placeholder { color: #aaa; }

/* ── Page Hero (inner pages) ── */
.nw-page-hero {
  background-color: var(--nw-linen-mid);
  padding: 4rem 0 3rem;
  border-bottom: 1px solid var(--nw-light-rule);
}

.nw-page-hero-img {
  width: 100%;
  height: 320px;
  object-fit: cover;
  border-radius: 4px;
}

/* ── Visual Break Image ── */
.nw-visual-break {
  width: 100%;
  max-height: 400px;
  object-fit: cover;
  border-radius: 4px;
  display: block;
}

/* ── Spoke page note (referral callout) ── */
.nw-referral-box {
  background-color: var(--nw-yellow-soft);
  border-left: 4px solid var(--nw-yellow);
  padding: 1.5rem 2rem;
  border-radius: 0 4px 4px 0;
  margin: 2rem 0;
}

.nw-referral-box h4 { margin-bottom: 0.5rem; }

/* ── Footer ── */
.nw-footer {
  background-color: var(--nw-charcoal);
  color: rgba(255,255,255,0.75);
  padding: 3.5rem 0 2rem;
}

.nw-footer-brand {
  font-family: var(--font-display);
  font-size: 1.4rem;
  color: var(--nw-white);
  margin-bottom: 0.5rem;
}

.nw-footer p {
  font-size: 0.875rem;
  line-height: 1.7;
  color: rgba(255,255,255,0.6);
  margin-bottom: 0;
}

.nw-footer a {
  color: var(--nw-blue);
  text-decoration: none;
}

.nw-footer a:hover {
  color: var(--nw-white);
  text-decoration-color: var(--nw-white);
}

.nw-footer-nav {
  list-style: none;
  padding: 0;
  margin: 0;
}

.nw-footer-nav li { margin-bottom: 0.4rem; }

.nw-footer-nav a {
  font-size: 0.875rem;
  color: rgba(255,255,255,0.65);
  text-decoration: none;
}

.nw-footer-nav a:hover { color: var(--nw-white); }

.nw-footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.1);
  margin-top: 2.5rem;
  padding-top: 1.25rem;
  font-size: 0.8125rem;
  color: rgba(255,255,255,0.4);
}

.nw-footer-badge-row {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
  margin-top: 1.25rem;
}

.nw-footer-badge-row img {
  height: 52px;
  width: auto;
  object-fit: contain;
  opacity: 0.85;
  filter: brightness(1.4);
}

/* ── Scroll-fade animation ── */
[data-fade] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.55s ease, transform 0.55s ease;
}

[data-fade].is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  [data-fade] { opacity: 1; transform: none; transition: none; }
}


/* ── Tightened section rhythm (homepage intro sections) ── */
.nw-section-tight {
  padding: 3rem 0;
}

/* ── Resource section header stripes — 4px solid, sitewide-consistent ── */
.nw-stripe {
  border-left: 4px solid var(--nw-yellow);
  padding-left: 1rem;
}
.nw-stripe-blue     { border-left-color: var(--nw-blue); }
.nw-stripe-coral    { border-left-color: var(--nw-coral); }
.nw-stripe-yellow   { border-left-color: var(--nw-yellow); }
.nw-stripe-green    { border-left-color: var(--nw-yellow-green); }
.nw-stripe-mint     { border-left-color: var(--nw-mint); }
.nw-stripe-lavender { border-left-color: var(--nw-lavender); }

/* ── CTA band eyebrow (used on Kind Words / Resources CTAs) ── */
.nw-cta-eyebrow {
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--nw-charcoal);
  margin-bottom: 0.75rem;
}

/* ── Client video embed (Kind Words) ── */
.nw-video {
  width: 100%;
  max-width: 720px;
  display: block;
  margin: 0 auto;
  border-radius: 4px;
  background-color: var(--nw-charcoal);
}

/* ── Crop helper: bias image toward its left edge ── */
.nw-img-left { object-position: left center; }

/* ── Responsive tweaks ── */
@media (max-width: 991.98px) {
  :root { --section-pad-y: 3.5rem; --hub-panel-pad: 3rem 0; }
  .nw-hero-text { padding-right: 0; margin-bottom: 2rem; }
  .nw-hub-panel-img { height: 260px; }
}

@media (max-width: 767.98px) {
  :root { --section-pad-y: 2.75rem; }
  .nw-section-tight { padding: 2.25rem 0; }
  .nw-hero { padding: 3rem 0 2.5rem; }
  .nw-hub-panel-img { height: 220px; }
  .nw-badge-grid img { height: 84px; min-height: 80px; }
  .nw-badge-grid img[src*="badge-tce"],
  .nw-badge-grid img[src*="badge-napo"] { height: 96px; }
  .nw-footer-badge-row img { height: 40px; }
  .nw-cta-band { padding: 2.5rem 0; }
}