/*
Theme Name: InnerCrews Divi Child Theme
Theme URI: http://www.elegantthemes.com/gallery/divi/
Description: Divi child theme for InnerCrews.com — adapted from the HeartRich.ca
              child theme, recolored to the InnerCrews palette, and trimmed of
              HeartRich/WooCommerce-specific rules that don't apply here.
Author: Elegant Themes
Author URI: http://www.elegantthemes.com
Template: Divi
Version: 1.0
*/

@import url("../Divi/style.css");

/*------------------------------------------------*/
/*-----------------[RESET]------------------------*/
/*------------------------------------------------*/

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}


/* ============================================================
   INNERCREWS DESIGN TOKENS
   ============================================================ */
:root {
  /* Core palette */
  --ic-plum:        #452F58;
  --ic-plum-dark:   #362444;
  --ic-jade:        #1B8C8F;
  --ic-jade-dark:   #166F71;
  --ic-blue:        #2C4694;
  --ic-blue-dark:   #233A7A;
  --ic-rust:        #E15F29;
  --ic-rust-dark:   #C9501E;
  --ic-gold:        #F0C75A;

  /* Backgrounds */
  --ic-page-bg:     #FBF7F0; /* near-white page background */
  --ic-beige:       #F3EBDE; /* "island" sections, cards */
  --ic-white:       #ffffff;

  /* Light tints — for callouts, badges, soft backgrounds */
  --ic-plum-light:  #F0EBF3;
  --ic-jade-light:  #E8F4F4;
  --ic-blue-light:  #E9EDF7;
  --ic-rust-light:  #FDEEE6;
  --ic-gold-light:  #FDF6E3;

  /* Text */
  --ic-text:        #3D3528;
  --ic-text-mid:    #6B6356;
  --ic-text-grey:   #8A8073;
  --ic-rule:        #ECE2D2;

  /* Radii */
  --ic-radius:      8px;
  --ic-radius-lg:   14px;
}


/* ============================================================
   HEADINGS
   Sizes intentionally left unset so Divi's mobile customizer
   controls remain in charge — only color is set here.
   Two-color hierarchy (vs. HeartRich's three) to match the
   simpler InnerCrews type system: plum carries primary
   headings, blue carries sub-headings.
   ============================================================ */
h1 { padding-bottom: 20px; color: var(--ic-plum) !important; }
h2 { padding-bottom: 20px; color: var(--ic-plum) !important; }
h3 { padding-bottom: 20px; padding-top: 10px; color: var(--ic-plum) !important; }
h4 { padding-bottom: 8px;  padding-top: 10px; color: var(--ic-blue) !important; }
h5 { padding-bottom: 6px;  padding-top: 10px; color: var(--ic-blue) !important; }
h6 { padding-bottom: 6px;  padding-top: 10px; color: var(--ic-blue) !important; }


/* ============================================================
   SUP / SUB
   ============================================================ */
sup { font-size: 0.6em; vertical-align: super; bottom: 0; }
sub { font-size: 0.6em; vertical-align: sub; bottom: 0; }


/* ============================================================
   IC BULLETS
   Replaces HeartRich's image-based bullet (hrbullets.png lives
   on heartrich.ca and won't resolve here) with a simple CSS dot
   in gold — ties back to the heart in the InnerCrews mark
   without depending on an external asset.

   Usage: <ul class="ic-bullets"><li>Item text</li></ul>
   ============================================================ */
ul.ic-bullets {
  list-style: none;
  padding: 0;
  margin: 0 0 1.5em;
}
ul.ic-bullets li {
  position: relative;
  padding: 0 8px 18px 32px;
  font-family: 'Lato', sans-serif;
  line-height: 1.7;
  color: var(--ic-text);
}
ul.ic-bullets li::before {
  content: '';
  position: absolute;
  left: 4px;
  top: 0.55em;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--ic-gold);
}

/* Numbered list indent/spacing */
ol.ic li { list-style-position: outside; padding: 0 45px 15px 0; }


/* ============================================================
   FIXED MOBILE MENU
   Generic Divi behavior — unchanged from HeartRich.
   ============================================================ */
@media (max-width: 980px) {
  .et_non_fixed_nav.et_transparent_nav #main-header,
  .et_non_fixed_nav.et_transparent_nav #top-header,
  .et_fixed_nav #main-header,
  .et_fixed_nav #top-header {
    position: fixed !important;
  }
}
.et_mobile_menu {
  overflow: scroll !important;
  max-height: 83vh;
}

/* Hamburger icon color */
span.mobile_menu_bar:before {
  color: var(--ic-plum);
}
/* Change the hamburger icon to an X when opened */
.mobile_nav.opened .mobile_menu_bar:before {
  content: '\4d';
}

/* Top nav desktop — reduce space between items */
#top-menu li {
  padding-right: 10px;
}


/* ============================================================
   RECAPTCHA
   Keep — likely needed once the assessment form is live.
   ============================================================ */
.grecaptcha-badge { display: none; }


/* ============================================================
   JETPACK FORM BUTTON
   Recolored to InnerCrews. Note: the `button:hover` rule below
   is global (affects any <button> sitewide, as it was in the
   HeartRich file) — worth scoping more tightly later if it
   ever clashes with a Divi module's own button styling.
   ============================================================ */
button.pushbutton-wide {
  color: #fff !important;
  background: var(--ic-plum) !important;
  font-size: 20px;
  font-family: 'Rosario';
}
button:hover {
  background-color: var(--ic-jade) !important;
}


/* ============================================================
   SIDEBAR / WIDGET MENU
   ============================================================ */
.et_pb_widget_area .menu .menu-item a {
  color: var(--ic-blue);
}
.et_pb_widget_area .menu .menu-item:hover a {
  color: var(--ic-plum);
}
.et_pb_widget_area .menu .current-menu-item a {
  color: var(--ic-jade) !important;
}

.et_pb_widget.widget_nav_menu {
  border-bottom: 1px solid var(--ic-plum);
}
.et_pb_widget.widget_nav_menu ul li {
  border-top: 1px dotted var(--ic-plum);
  padding-bottom: 0.5em;
  padding-top: 0.5em;
  padding-left: 7px;
}
.et_pb_widget ul li {
  margin-bottom: 0;
}

@media all and (max-width: 980px) {
  .et_pb_column .et_pb_widget.widget_nav_menu {
    width: 100% !important;
  }
}

/* Footer — remove default bullets, add spacing to Recent Entries */
.footer-widget li:before { display: none; }
div.widget_recent_entries ul li { margin-bottom: 15px; }


/* ============================================================
   IC CTA BUTTON (single inline button)
   Pill shape, matching the homepage button style — a deliberate
   change from HeartRich's 7px-radius rectangular button.

   Usage: <a href="#" class="ic-cta-button">Take the Assessment</a>
   ============================================================ */
.ic-cta-button {
  display: inline-block;
  background: var(--ic-blue);
  color: #ffffff !important;
  border: 2px solid var(--ic-blue);
  border-radius: 40px;
  padding: 11px 28px;
  font-family: 'Oswald', sans-serif;
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  line-height: 1.3;
  text-decoration: none !important;
  white-space: nowrap;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}
.ic-cta-button:hover {
  background: var(--ic-jade);
  border-color: var(--ic-jade);
  color: #ffffff !important;
  text-decoration: none !important;
}

/* Outline variant — pairs with the button above (rust outline,
   as used for secondary actions on the homepage) */
.ic-cta-button--outline {
  background: transparent;
  color: var(--ic-rust) !important;
  border: 2px solid var(--ic-rust);
}
.ic-cta-button--outline:hover {
  background: var(--ic-rust);
  color: #ffffff !important;
}

@media only screen and (max-width: 767px) {
  .ic-cta-button,
  .ic-cta-button--outline {
    padding: 10px 20px;
    font-size: 0.78rem;
    letter-spacing: 0.06em;
  }
}


/* ============================================================
   1. INTRO HOOK
   Usage: <div class="ic-hook"><p>Your opening paragraph.</p></div>
   ============================================================ */
.ic-hook {
  border-left: 5px solid var(--ic-rust);
  padding: 22px 28px;
  background: var(--ic-white);
  border-radius: 0 var(--ic-radius) var(--ic-radius) 0;
  margin: 0 0 2em;
}
.ic-hook p {
  font-family: 'Lato', sans-serif;
  font-size: 1.08rem;
  line-height: 1.8;
  color: var(--ic-text);
  font-style: italic;
  margin: 0;
}
.ic-hook p strong {
  font-style: normal;
  color: var(--ic-plum);
}


/* ============================================================
   2. PULL QUOTE / BANGER
   Usage: <div class="ic-banger"><p>The line worth stopping for.</p></div>
   ============================================================ */
.ic-banger {
  position: relative;
  background: var(--ic-plum);
  border-radius: var(--ic-radius-lg);
  padding: 34px 44px 30px;
  margin: 2em 0;
  overflow: hidden;
}
.ic-banger::before {
  content: '\201C';
  position: absolute;
  top: -10px;
  left: 16px;
  font-size: 8.5rem;
  color: rgba(255,255,255,0.07);
  font-family: Georgia, serif;
  line-height: 1;
  pointer-events: none;
}
.ic-banger p {
  font-family: 'Rosario', serif;
  font-size: 1.22rem;
  font-weight: 600;
  font-style: italic;
  line-height: 1.55;
  color: var(--ic-white);
  position: relative;
  z-index: 1;
  margin: 0;
}


/* ============================================================
   3. CALLOUT BOXES
   Base class: ic-callout
   Variants:   ic-callout--jade  (Insight)
               ic-callout--plum  (Reflect)
               ic-callout--blue  (Notice)
               ic-callout--rust  (Try This)

   Usage:
   <div class="ic-callout ic-callout--jade">
     <p class="ic-callout-title">Insight</p>
     <p>Your callout text here.</p>
   </div>
   ============================================================ */
.ic-callout {
  border-radius: var(--ic-radius);
  padding: 20px 24px;
  margin: 1.8em 0;
}
.ic-callout p {
  font-family: 'Lato', sans-serif;
  font-size: 0.97rem;
  line-height: 1.72;
  color: var(--ic-text);
  margin: 0 0 0.4em;
}
.ic-callout p:last-child { margin-bottom: 0; }
.ic-callout-title {
  font-family: 'Rosario', serif !important;
  font-size: 1rem !important;
  font-weight: 700 !important;
  font-style: italic !important;
  margin-bottom: 6px !important;
}

/* Jade — Insight */
.ic-callout--jade {
  background: var(--ic-jade-light);
  border-left: 4px solid var(--ic-jade);
}
.ic-callout--jade .ic-callout-title { color: var(--ic-jade-dark); }

/* Plum — Reflect */
.ic-callout--plum {
  background: var(--ic-plum-light);
  border-left: 4px solid var(--ic-plum);
}
.ic-callout--plum .ic-callout-title { color: var(--ic-plum); }

/* Blue — Notice */
.ic-callout--blue {
  background: var(--ic-blue-light);
  border-left: 4px solid var(--ic-blue);
}
.ic-callout--blue .ic-callout-title { color: var(--ic-blue-dark); }

/* Rust — Try This */
.ic-callout--rust {
  background: var(--ic-rust-light);
  border-left: 4px solid var(--ic-rust);
}
.ic-callout--rust .ic-callout-title { color: var(--ic-rust-dark); }


/* ============================================================
   4. CREW CARDS
   Solid color blocks with light text — matches the homepage
   "Meet a Few Crew Members" cards (a deliberate departure from
   HeartRich's light-tint-with-border crew cards).

   Base class: ic-crew
   Variants:   ic-crew--plum, ic-crew--jade, ic-crew--blue, ic-crew--rust

   Usage:
   <div class="ic-crew ic-crew--plum">
     <p class="ic-crew-name">The Perfection Crew</p>
     <p>Description text here.</p>
   </div>
   ============================================================ */
.ic-crew {
  padding: 16px 20px;
  margin-bottom: 12px;
  border-radius: var(--ic-radius);
}
.ic-crew p {
  font-family: 'Lato', sans-serif;
  font-size: 0.95rem;
  line-height: 1.65;
  margin: 0 0 0.3em;
}
.ic-crew p:last-child { margin-bottom: 0; }
.ic-crew-name {
  font-family: 'Rosario', serif !important;
  font-size: 1.05rem !important;
  font-weight: 700 !important;
  font-style: italic !important;
  margin-bottom: 6px !important;
}

.ic-crew--plum { background: var(--ic-plum); }
.ic-crew--plum .ic-crew-name { color: #EBE3F0; }
.ic-crew--plum p { color: #D7C9E0; }

.ic-crew--jade { background: var(--ic-jade); }
.ic-crew--jade .ic-crew-name { color: #E1F5EE; }
.ic-crew--jade p { color: #CDEDE6; }

.ic-crew--blue { background: var(--ic-blue); }
.ic-crew--blue .ic-crew-name { color: #E2E8F7; }
.ic-crew--blue p { color: #C8D3F0; }

.ic-crew--rust { background: var(--ic-rust); }
.ic-crew--rust .ic-crew-name { color: #FCEAE0; }
.ic-crew--rust p { color: #FBD9C8; }

/* Crew group wrapper — grid for pairs/sets of crew cards */
.ic-crew-group {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin: 28px 0;
}
@media (max-width: 640px) {
  .ic-crew-group { grid-template-columns: 1fr; }
}


/* ============================================================
   5. HIGHLIGHT / CENTRAL PRACTICE BLOCK
   Usage:
   <div class="ic-highlight">
     <p class="ic-highlight-kicker">The Central Practice</p>
     <h3>Heading here.</h3>
     <p>Supporting text here.</p>
   </div>
   ============================================================ */
.ic-highlight {
  background: linear-gradient(135deg, var(--ic-plum) 0%, var(--ic-blue) 100%);
  border-radius: var(--ic-radius-lg);
  padding: 38px 44px;
  text-align: center;
  margin: 2.4em 0;
}
.ic-highlight-kicker {
  font-family: 'Oswald', sans-serif !important;
  font-size: 0.72rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  color: var(--ic-gold) !important;
  margin-bottom: 10px !important;
}
.ic-highlight h3 {
  font-family: 'Rosario', serif;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--ic-white) !important;
  margin: 0 0 14px;
  line-height: 1.3;
  padding: 0;
}
.ic-highlight p {
  font-family: 'Lato', sans-serif;
  font-size: 1rem;
  line-height: 1.72;
  color: rgba(255,255,255,0.9);
  max-width: 560px;
  margin: 0 auto 0.6em;
}
.ic-highlight p:last-child { margin-bottom: 0; }


/* ============================================================
   6. REFLECTION BOX
   Usage:
   <div class="ic-reflect">
     <p class="ic-reflect-label">Reflection</p>
     <ul>
       <li>First prompt here.</li>
       <li>Second prompt here.</li>
     </ul>
   </div>
   ============================================================ */
.ic-reflect {
  background: var(--ic-jade-light);
  border-left: 5px solid var(--ic-jade);
  border-radius: 0 var(--ic-radius-lg) var(--ic-radius-lg) 0;
  padding: 26px 32px;
  margin: 2.2em 0;
}
.ic-reflect-label {
  font-family: 'Oswald', sans-serif !important;
  font-size: 0.72rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.2em !important;
  text-transform: uppercase !important;
  color: var(--ic-jade-dark) !important;
  margin-bottom: 14px !important;
}
.ic-reflect ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.ic-reflect ul li {
  font-family: 'Lato', sans-serif;
  font-size: 0.97rem;
  line-height: 1.7;
  color: var(--ic-text);
  padding: 8px 0 8px 24px;
  position: relative;
  border-bottom: 1px solid rgba(27,140,143,0.18);
}
.ic-reflect ul li:last-child { border-bottom: none; }
.ic-reflect ul li::before {
  content: '→';
  position: absolute;
  left: 0;
  color: var(--ic-jade);
  font-weight: 700;
}


/* ============================================================
   7. CTA BLOCKS
   Base class: ic-cta
   Variants:   ic-cta--plum  (primary, solid)
               ic-cta--jade
               ic-cta--blue
               ic-cta--rust

   Usage:
   <div class="ic-cta ic-cta--plum">
     <p class="ic-cta-eyebrow">Free Assessment · 10–15 Minutes</p>
     <p class="ic-cta-heading">Curious Who's On Your Crew?</p>
     <p>Supporting text here.</p>
     <a href="#" class="ic-cta-btn">Take the Free Assessment →</a>
   </div>
   ============================================================ */
.ic-cta {
  border-radius: var(--ic-radius-lg);
  padding: 34px 38px;
  margin: 2.6em 0;
  text-align: center;
}
.ic-cta-eyebrow {
  font-family: 'Oswald', sans-serif !important;
  font-size: 0.72rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  margin-bottom: 10px !important;
}
.ic-cta-heading {
  font-family: 'Rosario', serif !important;
  font-size: 1.32rem !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
  margin-bottom: 12px !important;
}
.ic-cta p {
  font-family: 'Lato', sans-serif;
  font-size: 0.97rem;
  line-height: 1.68;
  margin: 0 auto 1em;
  max-width: 520px;
}
.ic-cta p:last-of-type { margin-bottom: 20px; }
.ic-cta-btn {
  display: inline-block;
  font-family: 'Oswald', sans-serif;
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 13px 30px;
  border-radius: 40px;
  text-decoration: none;
  transition: opacity 0.2s;
}
.ic-cta-btn:hover { opacity: 0.85; text-decoration: none; }

/* Plum — primary, solid */
.ic-cta--plum {
  background: var(--ic-plum);
}
.ic-cta--plum .ic-cta-eyebrow { color: var(--ic-gold); }
.ic-cta--plum .ic-cta-heading { color: var(--ic-white) !important; }
.ic-cta--plum p { color: rgba(255,255,255,0.85); }
.ic-cta--plum .ic-cta-btn {
  background: var(--ic-jade);
  color: var(--ic-white);
}

/* Jade — light */
.ic-cta--jade {
  background: var(--ic-jade-light);
  border: 2px solid var(--ic-jade);
}
.ic-cta--jade .ic-cta-eyebrow { color: var(--ic-jade-dark); }
.ic-cta--jade .ic-cta-heading { color: var(--ic-plum) !important; }
.ic-cta--jade p { color: var(--ic-text-mid); }
.ic-cta--jade .ic-cta-btn {
  background: var(--ic-jade);
  color: var(--ic-white);
}

/* Blue — light */
.ic-cta--blue {
  background: var(--ic-blue-light);
  border: 2px solid var(--ic-blue);
}
.ic-cta--blue .ic-cta-eyebrow { color: var(--ic-blue-dark); }
.ic-cta--blue .ic-cta-heading { color: var(--ic-blue-dark) !important; }
.ic-cta--blue p { color: var(--ic-text-mid); }
.ic-cta--blue .ic-cta-btn {
  background: var(--ic-blue);
  color: var(--ic-white);
}

/* Rust — light */
.ic-cta--rust {
  background: var(--ic-rust-light);
  border: 2px solid var(--ic-rust);
}
.ic-cta--rust .ic-cta-eyebrow { color: var(--ic-rust-dark); }
.ic-cta--rust .ic-cta-heading { color: var(--ic-plum) !important; }
.ic-cta--rust p { color: var(--ic-text-mid); }
.ic-cta--rust .ic-cta-btn {
  background: var(--ic-rust);
  color: var(--ic-white);
}


/* ============================================================
   8. DIVIDERS
   Dot color is gold — a small echo of the heart in the logo.

   Dot divider:
   <div class="ic-divider"></div>

   Text divider:
   <div class="ic-divider-text"><span>A Turning Point</span></div>
   ============================================================ */
.ic-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 2.4em 0;
}
.ic-divider::before,
.ic-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--ic-rule);
}
.ic-divider-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ic-gold);
  flex-shrink: 0;
  display: inline-block;
}

/* Simpler dot divider — self-contained single element */
.ic-divider-line {
  border: none;
  border-top: 1px solid var(--ic-rule);
  margin: 2.4em 0;
  position: relative;
  text-align: center;
}
.ic-divider-line::after {
  content: '';
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ic-gold);
  position: absolute;
  top: -4px;
  left: 50%;
  transform: translateX(-50%);
}

/* Text divider */
.ic-divider-text {
  text-align: center;
  margin: 2.6em 0;
  position: relative;
}
.ic-divider-text::before,
.ic-divider-text::after {
  content: '';
  display: block;
  height: 1px;
  background: var(--ic-rule);
}
.ic-divider-text::before { margin-bottom: 10px; }
.ic-divider-text::after  { margin-top: 10px; }
.ic-divider-text span {
  font-family: 'Rosario', serif;
  font-size: 0.85rem;
  font-style: italic;
  color: var(--ic-text-grey);
  letter-spacing: 0.04em;
}


/* ============================================================
   9. DEFINITION / TERM BLOCK
   Usage:
   <div class="ic-term">
     <p class="ic-term-word">Mixed Crew</p>
     <p class="ic-term-phonetic">[ mixt kroo ] — n.</p>
     <p>The definition goes here.</p>
   </div>
   ============================================================ */
.ic-term {
  background: var(--ic-beige);
  border-radius: var(--ic-radius-lg);
  padding: 24px 28px;
  margin: 2em 0;
  border-top: 4px solid var(--ic-plum);
}
.ic-term-word {
  font-family: 'Rosario', serif !important;
  font-size: 1.15rem !important;
  font-weight: 700 !important;
  color: var(--ic-plum) !important;
  font-style: italic !important;
  margin-bottom: 3px !important;
}
.ic-term-phonetic {
  font-family: 'Lato', sans-serif !important;
  font-size: 0.78rem !important;
  color: var(--ic-text-grey) !important;
  margin-bottom: 10px !important;
}
.ic-term p {
  font-family: 'Lato', sans-serif;
  font-size: 0.95rem;
  line-height: 1.72;
  color: var(--ic-text);
  margin: 0;
}


/* ============================================================
   TRAITS LAYOUT
   Generic two-column layout (e.g. comparing Manager vs.
   Reliever traits within a Crew). Renamed from HeartRich's
   .ifs-traits.
   ============================================================ */
.ic-traits {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 48px;
}
.ic-traits > div {
  flex: 0 0 auto;
}
@media (max-width: 767px) {
  .ic-traits {
    flex-direction: column;
    gap: 16px;
  }
}


/* ============================================================
   JUMP NAV (resources-style pages)
   ============================================================ */
.ic-jumpnav {
  background: var(--ic-blue-light);
  border: 1px solid var(--ic-blue);
  border-radius: 10px;
  padding: 20px 24px;
  margin: 24px 0 32px;
}
.ic-jumpnav-label {
  font-family: 'Oswald', sans-serif !important;
  font-size: 0.68rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: var(--ic-blue-dark) !important;
  margin-bottom: 12px !important;
}
.ic-jumpnav ul {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex;
  flex-wrap: wrap;
  column-gap: 0;
}
.ic-jumpnav ul li {
  width: 50%;
  background: none !important;
  padding: 3px 0 !important;
}
.ic-jumpnav ul li a {
  font-family: 'Lato', sans-serif !important;
  font-size: 0.9rem !important;
  color: var(--ic-plum) !important;
  text-decoration: none !important;
}
.ic-jumpnav ul li a:hover { color: var(--ic-jade) !important; }
.ic-jumpnav ul li a::before { content: '↓ '; color: var(--ic-jade); font-size: 0.8rem; }


/* ============================================================
   RESOURCE CARD
   ============================================================ */
.ic-resource {
  background: var(--ic-white);
  border: 1px solid var(--ic-rule);
  border-radius: 10px;
  padding: 22px 26px;
  margin-bottom: 14px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px 20px;
  align-items: start;
}
.ic-resource-kicker {
  font-family: 'Oswald', sans-serif !important;
  font-size: 0.65rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: var(--ic-rust) !important;
  margin-bottom: 4px !important;
  display: block;
}
.ic-resource-title {
  font-family: 'Rosario', serif !important;
  font-size: 1.06rem !important;
  font-weight: 700 !important;
  color: var(--ic-plum) !important;
  margin-bottom: 8px !important;
  line-height: 1.35 !important;
  display: block;
}
.ic-resource-desc {
  font-family: 'Lato', sans-serif;
  font-size: 0.92rem;
  line-height: 1.68;
  color: var(--ic-text-mid);
  margin: 0;
}
.ic-resource-links {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 170px;
  padding-top: 2px;
}
.ic-resource-link {
  display: block;
  text-align: center;
  padding: 8px 14px;
  border-radius: 40px;
  font-family: 'Oswald', sans-serif !important;
  font-size: 0.73rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none !important;
  transition: all 0.2s;
}
.ic-resource-link--primary {
  background: var(--ic-blue);
  color: #ffffff !important;
}
.ic-resource-link--primary:hover { background: var(--ic-jade); }
.ic-resource-link--secondary {
  background: transparent;
  border: 1px solid var(--ic-rust);
  color: var(--ic-rust) !important;
}
.ic-resource-link--secondary:hover {
  background: var(--ic-rust);
  color: #ffffff !important;
}
@media (max-width: 640px) {
  .ic-resource { grid-template-columns: 1fr; }
  .ic-resource-links { flex-direction: row; flex-wrap: wrap; min-width: 0; }
  .ic-jumpnav ul li { width: 100%; }
}


/* ============================================================
   TESTIMONIAL CARD

   Usage:
   <div class="ic-testimonial">
     <p class="ic-testimonial-quote">The quote text here.</p>
     <p class="ic-testimonial-attr">— Name</p>
   </div>

   With optional kicker (for report excerpts, labeled quotes):
   <div class="ic-testimonial">
     <p class="ic-testimonial-kicker">From the report</p>
     <p class="ic-testimonial-quote">The excerpt text here.</p>
     <p class="ic-testimonial-reaction">Their reaction in their own words.</p>
     <p class="ic-testimonial-attr">— Name</p>
   </div>
   ============================================================ */
.ic-testimonial {
  background: var(--ic-white);
  border: 1px solid var(--ic-rule);
  border-left: 4px solid var(--ic-gold);
  border-radius: 8px;
  padding: 24px 28px;
  margin-bottom: 16px;
}
.ic-testimonial-kicker {
  font-family: 'Oswald', sans-serif !important;
  font-size: 0.68rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  color: var(--ic-jade) !important;
  margin: 0 0 10px 0 !important;
}
.ic-testimonial-quote {
  font-family: 'Lato', sans-serif !important;
  font-size: 1rem !important;
  font-style: italic !important;
  line-height: 1.75 !important;
  color: var(--ic-text-mid) !important;
  margin: 0 0 8px 0 !important;
}
.ic-testimonial-reaction {
  font-family: 'Lato', sans-serif !important;
  font-size: 1rem !important;
  font-style: italic !important;
  line-height: 1.75 !important;
  color: var(--ic-plum) !important;
  margin: 0 0 12px 0 !important;
}
.ic-testimonial-attr {
  font-family: 'Oswald', sans-serif !important;
  font-size: 0.72rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: var(--ic-plum) !important;
  margin: 0 !important;
}


/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 640px) {
  .ic-banger     { padding: 26px 28px 22px; }
  .ic-highlight  { padding: 28px 24px; }
  .ic-cta        { padding: 26px 22px; }
  .ic-banger p   { font-size: 1.05rem; }
  .ic-highlight h3 { font-size: 1.25rem; }
}