/* ============================================================
   THE LIVINGSTON GROUP · CrossCountry Mortgage
   Color + Type foundations
   Source of truth: CrossCountry Mortgage 2022 Brand Guidelines (V47)
   ============================================================ */

/* ---- Webfonts ----
   BRAND FONTS:  Visby Heavy / Visby Medium (display)  +  Montserrat (body)
   Visby CF is a COMMERCIAL font and is not bundled here. Until the licensed
   files are supplied, we substitute POPPINS (a geometric sans with the same
   rounded, approachable character) for all Visby roles. Montserrat is the
   real brand body font and is loaded from Google Fonts.                      */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,400;0,500;0,600;0,700;1,400&family=Poppins:wght@400;500;600;700;800;900&display=swap');

:root {
  /* ---------- BRAND COLORS ---------- */
  /* Primary (the brand runs on black type / white space) */
  --white:        #FFFFFF;   /* primary color — used as an anchor */
  --black:        #000000;   /* primary type color */
  --soft-gray:    #DBDCDB;   /* Soft Gray — rules, dividers, fills */
  --light-gray:   #F4F4F4;   /* Light Gray — digital-only surface tint */

  /* Corporate accent */
  --sky-blue:     #4B7B8B;   /* CCM corporate accent */

  /* Loan-Officer accent palette — ONE color per piece.
     The Livingston Group's chosen LO color is TEAL. */
  --teal:         #488178;   /* ← The Livingston Group accent */
  --forest:       #5E6738;
  --sunshine:     #C08C03;
  --ocean:        #165C7D;
  --plum:         #890A4D;
  --tangerine:    #BC5B22;

  /* ---------- SEMANTIC TOKENS ---------- */
  --accent:        var(--teal);   /* active LO accent for this team */
  --accent-deep:   #3a685f;       /* darker teal — hover/press only */
  --accent-tint:   #eaf0ee;       /* faint teal wash — large quiet fills */

  --bg:            var(--white);
  --bg-tint:       var(--light-gray);
  --surface:       var(--white);

  --fg:            var(--black);  /* body + headlines */
  --fg-muted:      #555759;       /* secondary text on white */
  --fg-faint:      #8b8d8e;       /* captions / meta */
  --on-accent:     var(--white);  /* type sitting on an accent block */

  --rule:          var(--soft-gray);
  --rule-strong:   #c3c5c3;

  /* ---------- TYPE FAMILIES ---------- */
  /* Visby roles → Poppins substitute (see note above) */
  --font-display:  'Poppins', 'Visby CF', 'Visby Round CF', system-ui, sans-serif; /* Visby Heavy  */
  --font-sub:      'Poppins', 'Visby CF', system-ui, sans-serif;                   /* Visby Medium */
  --font-body:     'Montserrat', system-ui, -apple-system, sans-serif;             /* Montserrat   */

  /* Weights — Visby "Heavy" maps to 800, "Medium" to 500 */
  --w-heavy:   800; /* @kind font */
  --w-bold:    700; /* @kind font */
  --w-medium:  500; /* @kind font */
  --w-reg:     400; /* @kind font */

  /* ---------- TYPE SCALE (from brand guide pt ranges) ---------- */
  --t-display:  clamp(2.5rem, 5vw, 4.375rem); /* @kind font */ /* Header  · Visby Heavy · 28–70pt */
  --t-h1:       clamp(2rem, 3.5vw, 3rem); /* @kind font */
  --t-h2:       clamp(1.5rem, 2.4vw, 2rem); /* @kind font */
  --t-sub:      clamp(1.25rem, 1.8vw, 1.625rem); /* @kind font */ /* Subheader · Visby Medium · 23–26pt */
  --t-overline: 0.875rem;                       /* Overline · Visby Heavy CAPS · 16–24pt */
  --t-body:     1.0625rem;                       /* Body · Montserrat · 10–18pt */
  --t-small:    0.8125rem;
  --t-link:     1.125rem;                        /* Hyperlink/alt overline · Montserrat SemiBold */

  /* ---------- SPACING (8pt base) ---------- */
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
  --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px;
  --space-9: 96px; --space-10: 128px;

  /* ---------- RADII ---------- */
  /* Brand is square/architectural. Corners stay crisp; pills only for buttons. */
  --r-none: 0px;
  --r-sm:   2px;
  --r-md:   4px;
  --r-lg:   8px;
  --r-pill: 999px;

  /* ---------- ELEVATION ---------- */
  /* Clean & flat — shadows are subtle, never heavy. */
  --shadow-sm: 0 1px 2px rgba(0,0,0,.06);
  --shadow-md: 0 6px 20px rgba(0,0,0,.08);
  --shadow-lg: 0 18px 50px rgba(0,0,0,.10);

  /* ---------- MOTION ---------- */
  --ease: cubic-bezier(.22,.61,.36,1); /* @kind other */
  --dur:  .22s; /* @kind other */
}

/* ============================================================
   SEMANTIC ELEMENT STYLES
   ============================================================ */

.tlg-overline {
  font-family: var(--font-display);
  font-weight: var(--w-heavy);
  font-size: var(--t-overline);
  text-transform: uppercase;
  letter-spacing: .14em;
  line-height: 1.1;
  color: var(--accent);
}

.tlg-display {
  font-family: var(--font-display);
  font-weight: var(--w-heavy);
  font-size: var(--t-display);
  line-height: 1.02;
  letter-spacing: -0.01em;
  color: var(--fg);
  text-wrap: balance;
}
/* NO periods at the end of headers (brand rule). Sentence/Title case only. */

.tlg-h1 { font-family: var(--font-display); font-weight: var(--w-heavy); font-size: var(--t-h1); line-height: 1.06; letter-spacing: -0.01em; color: var(--fg); }
.tlg-h2 { font-family: var(--font-display); font-weight: var(--w-heavy); font-size: var(--t-h2); line-height: 1.12; color: var(--fg); }

.tlg-sub {
  font-family: var(--font-sub);
  font-weight: var(--w-medium);
  font-size: var(--t-sub);
  line-height: 1.3;
  color: var(--fg-muted);
  text-wrap: pretty;
}

.tlg-body {
  font-family: var(--font-body);
  font-weight: var(--w-reg);
  font-size: var(--t-body);
  line-height: 1.6;
  color: var(--fg);
  text-wrap: pretty;
}

.tlg-small { font-family: var(--font-body); font-weight: var(--w-reg); font-size: var(--t-small); line-height: 1.5; color: var(--fg-muted); }

/* Hyperlink / alternate overline — Montserrat SemiBold, tracked out */
.tlg-link {
  font-family: var(--font-body);
  font-weight: var(--w-bold);
  font-size: var(--t-link);
  letter-spacing: .05em;
  color: var(--accent);
  text-decoration: none;
}
.tlg-link:hover { color: var(--accent-deep); }

/* ---------- BUTTONS ---------- */
.tlg-btn {
  font-family: var(--font-body);
  font-weight: var(--w-bold);
  font-size: 0.9375rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  display: inline-flex; align-items: center; gap: 10px;
  padding: 15px 30px;
  border-radius: var(--r-pill);
  border: 2px solid var(--accent);
  background: var(--accent);
  color: var(--on-accent);
  cursor: pointer;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.tlg-btn:hover  { background: var(--accent-deep); border-color: var(--accent-deep); }
.tlg-btn:active { transform: translateY(1px); }

.tlg-btn--ghost { background: transparent; color: var(--accent); }
.tlg-btn--ghost:hover { background: var(--accent); color: var(--on-accent); }

.tlg-btn--dark { background: var(--black); border-color: var(--black); color: var(--white); }
.tlg-btn--dark:hover { background: #1c1c1c; border-color: #1c1c1c; }


/* Value Blueprint standalone rebrand: The Livingston Group design system */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
body {
  margin: 0;
  min-width: 320px;
  background: var(--light-gray);
  color: var(--fg);
  font-family: var(--font-body);
}
a { color: inherit; text-decoration: none; }
button, select { font: inherit; }
button { cursor: pointer; }
img { display: block; max-width: 100%; }
.site-shell { min-height: 100vh; }
.site-header {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  min-height: 82px;
  padding: 16px clamp(20px, 5vw, 64px);
  background: var(--white);
  border-bottom: 1px solid var(--rule);
}
.brand { display: inline-flex; align-items: center; min-width: 0; }
.brand img { width: clamp(178px, 16vw, 240px); height: auto; }
.site-nav {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: clamp(18px, 3vw, 38px);
}
.site-nav a {
  color: var(--fg-muted);
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: var(--w-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 8px 0;
  border-bottom: 2px solid transparent;
}
.site-nav a:hover,
.site-nav a.is-active { color: var(--accent); border-bottom-color: var(--accent); }
.site-nav a.is-active::after { content: none; }
main, .site-footer { width: min(1180px, calc(100% - 40px)); margin: 0 auto; }
.hero {
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 14px;
  padding: clamp(34px, 5vw, 54px) 0 clamp(28px, 4vw, 42px);
  text-align: center;
}
.hero-kicker,
.section-heading span,
.focus-card span,
.feature-resource > span,
.sop-card span,
.video-library-card span {
  color: var(--accent);
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-weight: var(--w-heavy);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.hero-kicker { order: 0; }
.hero h1 {
  max-width: 14ch;
  margin: 0;
  color: var(--fg);
  font-family: var(--font-display);
  font-size: clamp(3.2rem, 6.2vw, 5.8rem);
  font-weight: var(--w-heavy);
  letter-spacing: -0.035em;
  line-height: 0.98;
  text-transform: none;
}
.hero p {
  max-width: 760px;
  margin: 0;
  color: var(--fg-muted);
  font-family: var(--font-body);
  font-size: clamp(1rem, 1.35vw, 1.16rem);
  font-weight: var(--w-reg);
  line-height: 1.55;
}
.daily-brief { display: block; margin-bottom: var(--space-4); }
.focus-card {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(22px, 3vw, 34px);
  padding: clamp(28px, 4vw, 44px) clamp(24px, 5vw, 56px);
  background: var(--white);
  border: 1px solid var(--rule);
  border-left: 4px solid var(--accent);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-sm);
}
.focus-card h2,
.section-heading h2,
.feature-resource h3 {
  margin: 0;
  color: var(--fg);
  font-family: var(--font-display);
  font-weight: var(--w-heavy);
  letter-spacing: -0.015em;
  line-height: 1.02;
  text-transform: none;
}
.focus-card h2 { font-size: clamp(2rem, 3.6vw, 3.2rem); }
.focus-card p {
  max-width: 700px;
  margin: 0;
  color: var(--fg-muted);
  font-size: 1rem;
  line-height: 1.65;
}
.brief-copy {
  display: grid;
  justify-items: center;
  gap: 12px;
  text-align: center;
}
.brief-copy p {
  max-width: 780px;
}
.brief-signals {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
.brief-signal {
  display: grid;
  align-content: start;
  gap: 8px;
  min-height: 132px;
  padding: 20px;
  background: var(--bg);
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
}
.brief-signal span {
  color: var(--accent);
  font-family: var(--font-display);
  font-size: 0.68rem;
  font-weight: var(--w-heavy);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.brief-signal strong {
  color: var(--fg);
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 1.4vw, 1.25rem);
  font-weight: var(--w-heavy);
  letter-spacing: 0;
  line-height: 1.18;
}
.brief-signal p {
  max-width: none;
  color: var(--fg-muted);
  font-size: 0.86rem;
  line-height: 1.5;
}
.brief-signal-link {
  color: var(--accent);
  text-decoration: none;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.brief-signal-link strong {
  display: inline;
  color: var(--accent-deep);
  background: linear-gradient(transparent 58%, color-mix(in srgb, var(--accent) 22%, transparent) 58%);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 5px;
}
.brief-signal-link:hover {
  background: var(--accent-tint);
}
.brief-signal-link:hover strong {
  color: var(--accent-deep);
}
.quick-links {
  grid-column: 1 / -1;
  width: min(100%, 980px);
  margin: 0 auto;
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 12px;
}
.quick-links a,
.button {
  width: 100%;
  min-height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 0 14px;
  border: 2px solid var(--accent);
  border-radius: var(--r-pill);
  background: var(--accent);
  color: var(--on-accent);
  font-family: var(--font-body);
  font-size: clamp(0.72rem, 1vw, 0.84rem);
  font-weight: var(--w-bold);
  letter-spacing: 0.06em;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease), transform var(--dur) var(--ease);
  white-space: nowrap;
}
.quick-links a::after { content: ">"; color: currentColor; transition: transform var(--dur) var(--ease); }
.quick-links a:hover,
.button:hover { background: var(--accent-deep); border-color: var(--accent-deep); transform: translateY(-1px); box-shadow: none; }
.quick-links a:hover::after { transform: translateX(3px); }
.library-section,
.sop-section,
.video-section,
.tools-section {
  padding: clamp(42px, 6vw, 72px) clamp(28px, 5vw, 64px);
  background: var(--white);
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  margin-bottom: var(--space-4);
  box-shadow: var(--shadow-sm);
}
.section-heading { display: grid; justify-items: center; gap: var(--space-4); max-width: 820px; margin: 0 auto var(--space-6); text-align: center; }
.section-heading--center { justify-items: center; max-width: 820px; margin-left: auto; margin-right: auto; text-align: center; }
.section-heading span { display: inline-block; width: fit-content; padding-bottom: 12px; border-bottom: 3px solid var(--accent); }
.section-heading h2 { font-size: clamp(2.15rem, 4.2vw, 4.35rem); }
.section-heading p { max-width: 720px; margin: 0 auto; color: var(--fg-muted); line-height: 1.65; }
.library-layout { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: clamp(28px, 5vw, 64px); align-items: start; margin-top: var(--space-6); }
.category-list { position: sticky; top: 110px; display: grid; gap: 8px; }
.category-button {
  min-height: 44px;
  border: 1px solid transparent;
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--fg-muted);
  padding: 0 16px;
  text-align: left;
  font-family: var(--font-body);
  font-weight: var(--w-bold);
  letter-spacing: 0.02em;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.category-button.is-active { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.category-button:hover:not(.is-active) { background: var(--accent-tint); border-color: var(--accent); color: var(--accent); transform: translateX(2px); }
.feature-resource {
  min-height: 430px;
  display: grid;
  align-content: center;
  gap: var(--space-5);
  padding: clamp(30px, 5vw, 58px);
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  background: var(--light-gray);
  box-shadow: none;
}
.feature-resource a,
.sop-card a,
.video-library-card strong,
.tool-tile span {
  color: var(--accent-deep);
  font-weight: var(--w-bold);
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--accent) 46%, transparent);
  text-decoration-thickness: 2px;
  text-underline-offset: 5px;
}
.feature-resource a:hover,
.sop-card a:hover,
.video-library-card:hover strong,
.tool-tile:hover span {
  color: var(--accent-deep);
  text-decoration-color: var(--accent-deep);
}
.feature-resource h3 { max-width: 12ch; font-size: clamp(2.65rem, 5vw, 4.6rem); }
.feature-resource p { max-width: 650px; margin: 0; color: var(--fg-muted); font-size: 1.02rem; line-height: 1.7; }
.resource-links { display: grid; gap: 0; max-width: 720px; margin-top: var(--space-2); }
.resource-links a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 16px 0;
  border-top: 1px solid var(--rule);
  color: var(--fg);
  font-family: var(--font-body);
  font-weight: var(--w-bold);
  transition: color var(--dur) var(--ease), transform var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.resource-links a::after { content: ">"; color: var(--accent); }
.resource-links a:hover { color: var(--accent); border-top-color: var(--accent); transform: translateX(3px); }
.sop-grid,
.video-library-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); max-width: 980px; }
.sop-grid { grid-template-columns: minmax(0, 1fr); }
.sop-card,
.video-library-card,
.tool-tile {
  background: var(--white);
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  color: var(--fg);
  box-shadow: none;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.sop-card,
.video-library-card { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: var(--space-5); padding: clamp(22px, 3vw, 30px); }
.sop-card:hover,
.video-library-card:hover,
.tool-tile:hover { background: var(--accent-tint); border-color: var(--accent); color: var(--accent); transform: translateY(-2px); box-shadow: none; }
.sop-card-icon,
.video-library-icon,
.tool-tile-icon {
  display: grid;
  place-items: center;
  background: var(--white);
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.sop-card-icon { width: 58px; height: 58px; }
.video-library-icon { width: 52px; height: 52px; }
.sop-card-icon svg,
.video-library-icon svg,
.tool-tile-icon svg { stroke: var(--fg); transition: stroke var(--dur) var(--ease); }
.sop-card:hover svg,
.video-library-card:hover svg,
.tool-tile:hover svg { stroke: var(--accent); }
.sop-card span,
.video-library-card span { display: block; margin-bottom: 6px; }
.sop-card strong,
.video-library-card strong {
  display: block;
  color: var(--fg);
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 3.2vw, 2.8rem);
  font-weight: var(--w-heavy);
  line-height: 1;
  letter-spacing: -0.01em;
  text-transform: none;
}
.sop-card p { max-width: 700px; margin: 8px 0 0; color: var(--fg-muted); line-height: 1.6; }
.tools-grid { display: grid; gap: var(--space-5); }
.tool-group { display: grid; gap: var(--space-4); }
.tool-group h3 {
  margin: 0;
  color: var(--fg);
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: var(--w-heavy);
  letter-spacing: 0.1em;
  line-height: 1;
  text-transform: uppercase;
  padding-bottom: 12px;
  border-bottom: 2px solid var(--accent);
  width: fit-content;
}
.tool-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 12px; }
.tool-tiles.compact { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.tool-tile {
  min-height: 148px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 18px 12px;
  text-align: center;
  font-size: 0.78rem;
  font-weight: var(--w-bold);
  line-height: 1.35;
}
.tool-tile-icon { width: 46px; height: 46px; }
.site-footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px;
  padding: 30px 0 46px;
  border-top: 1px solid var(--rule);
  color: var(--fg-muted);
  font-size: 0.78rem;
  font-weight: var(--w-bold);
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; scroll-behavior: auto !important; }
}
@media (max-width: 960px) {
  .library-layout { grid-template-columns: 1fr; }
  .focus-card { grid-template-columns: 1fr; }
  .brief-signals { grid-template-columns: 1fr; }
  .site-header { flex-wrap: wrap; gap: 14px; }
  .site-nav { position: static; left: auto; transform: none; order: 3; width: 100%; justify-content: center; }
  .category-list { position: static; grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 680px) {
  main, .site-footer { width: min(100% - 24px, 1180px); }
  .site-header { padding: 16px 14px; }
  .brand img { width: 176px; }
  .site-nav { width: 100%; justify-content: flex-start; gap: 16px; overflow-x: auto; }
  .hero { padding-top: 32px; }
  .hero h1 { font-size: clamp(3rem, 15vw, 4.8rem); }
  .category-list, .video-library-grid { grid-template-columns: 1fr; }
  .sop-card, .video-library-card { grid-template-columns: 1fr; }
  .quick-links { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}

/* Final Daily Brief override. Keep this last so exported standalone files cannot fall back to the old button wrap. */
.daily-brief .focus-card {
  grid-template-columns: 1fr !important;
}
.daily-brief .quick-links {
  display: grid !important;
  width: min(100%, 980px) !important;
  margin-inline: auto !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 12px !important;
}
.daily-brief .quick-links a {
  width: 100% !important;
}
@media (max-width: 680px) {
  .daily-brief .quick-links {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}