/* ===========================================================================
   Councillor Jordan Wright — Homepage
   Static recreation of Homepage.dc.html (Claude Design bundle).
   Design tokens taken verbatim from the project's _ds token files;
   component styles mirror the design-system React components
   (Stat, Card, Badge, Button, Input, Select).
   =========================================================================== */

/* --- Brand font (Panton → Poppins substitute, per design system) --- */
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400;1,500;1,600&display=swap');

/* ===========================================================================
   TOKENS
   =========================================================================== */
:root {
  color-scheme: light;

  /* Brand core */
  --c-mustard:   #FFDE59;
  --c-cobalt:    #004AAD;
  --c-gulf-blue: #061C51;
  --c-charade:   #252731;

  /* Cobalt scale */
  --cobalt-50:  #e9f1fb;
  --cobalt-100: #c8dcf3;
  --cobalt-200: #91b8e6;
  --cobalt-300: #5a93d8;
  --cobalt-400: #2a6fc8;
  --cobalt-500: #004AAD;
  --cobalt-600: #003e92;
  --cobalt-700: #003176;
  --cobalt-800: #0a2560;
  --cobalt-900: #061C51;

  /* Mustard scale */
  --mustard-50:  #fffbe9;
  --mustard-100: #fff3c2;
  --mustard-200: #ffea94;
  --mustard-300: #ffe273;
  --mustard-400: #FFDE59;
  --mustard-500: #f5cf33;
  --mustard-600: #d9b01d;
  --mustard-700: #a9870f;

  /* Neutrals */
  --neutral-0:   #ffffff;
  --neutral-50:  #f6f7f9;
  --neutral-100: #eceef2;
  --neutral-200: #d9dce3;
  --neutral-300: #bcc1cc;
  --neutral-400: #8d93a3;
  --neutral-500: #646a7a;
  --neutral-600: #474c5a;
  --neutral-700: #343844;
  --neutral-800: #2b2e3a;
  --neutral-900: #252731;
  --neutral-950: #16171f;

  /* Semantic status */
  --c-success: #1f8a5b;
  --c-warning: #d9b01d;
  --c-danger:  #c8413a;
  --c-info:    #2a6fc8;

  /* Semantic aliases */
  --color-brand:         var(--c-cobalt);
  --color-brand-hover:   var(--cobalt-600);
  --color-brand-active:  var(--cobalt-700);
  --color-brand-deep:    var(--c-gulf-blue);
  --color-accent:        var(--c-mustard);
  --color-accent-strong: var(--mustard-600);

  --surface-page:     var(--neutral-50);
  --surface-card:     var(--neutral-0);
  --surface-raised:   var(--neutral-0);
  --surface-sunken:   var(--neutral-100);
  --surface-brand:    var(--c-cobalt);
  --surface-brand-deep: var(--c-gulf-blue);
  --surface-inverse:  var(--c-charade);

  --text-strong:   var(--c-charade);
  --text-body:     var(--neutral-700);
  --text-muted:    var(--neutral-500);
  --text-faint:    var(--neutral-400);
  --text-on-brand: var(--neutral-0);
  --text-on-accent: var(--c-gulf-blue);
  --text-link:     var(--c-cobalt);

  --border-subtle:  var(--neutral-200);
  --border-default: var(--neutral-300);
  --border-strong:  var(--neutral-400);
  --border-brand:   var(--c-cobalt);

  --focus-ring: color-mix(in srgb, var(--c-cobalt) 45%, transparent);

  /* Typography */
  --font-brand:   'Poppins', 'Panton', 'Segoe UI', system-ui, sans-serif;
  --font-display: var(--font-brand);
  --font-body:    var(--font-brand);

  /* Radii */
  --radius-xs:   4px;
  --radius-sm:   8px;
  --radius-md:   12px;
  --radius-lg:   16px;
  --radius-xl:   24px;
  --radius-pill: 999px;
  --radius-circle: 50%;

  /* Spacing */
  --space-5: 1.5rem; /* 24 */

  /* Elevation (navy-tinted) */
  --shadow-xs:  0 1px 2px rgba(6, 28, 81, 0.06);
  --shadow-sm:  0 1px 3px rgba(6, 28, 81, 0.08), 0 1px 2px rgba(6, 28, 81, 0.06);
  --shadow-md:  0 4px 12px rgba(6, 28, 81, 0.10), 0 2px 4px rgba(6, 28, 81, 0.06);
  --shadow-lg:  0 12px 28px rgba(6, 28, 81, 0.14), 0 4px 8px rgba(6, 28, 81, 0.06);
  --shadow-xl:  0 24px 48px rgba(6, 28, 81, 0.18);
  --shadow-brand: 0 8px 22px rgba(0, 74, 173, 0.30);

  /* Focus */
  --ring-width: 3px;
  --ring: 0 0 0 var(--ring-width) var(--focus-ring);

  /* Motion */
  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-slow: 360ms;
}

/* ===========================================================================
   BASE
   =========================================================================== */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; font-family: var(--font-brand); background: var(--surface-page); color: var(--text-body); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
html, body { overflow-x: hidden; }
img { max-width: 100%; }

::selection { background: var(--c-mustard); color: var(--c-gulf-blue); }

.lnk { color: var(--c-cobalt); text-decoration: none; font-weight: 600; }
.lnk:hover { text-decoration: underline; }
.vlist a { color: var(--text-body); text-decoration: none; }
.vlist a:hover { color: var(--c-cobalt); }

/* Contact rows: underline the value line on hover (design parity) */
.contact-row:hover > span:last-child > span:last-child { text-decoration: underline; text-underline-offset: 2px; }

section[id] { scroll-margin-top: 100px; }

/* ===========================================================================
   NAV
   =========================================================================== */
.nav-link {
  font-family: var(--font-brand); font-size: 14.5px; font-weight: 600; color: rgba(255,255,255,0.88);
  text-decoration: none; letter-spacing: 0.01em; white-space: nowrap;
  padding: 8px 16px; border-radius: 999px; background: none;
  border: 1.5px solid rgba(255,255,255,0.28);
  transition: background 180ms var(--ease-out), color 180ms var(--ease-out), transform 120ms var(--ease-out), border-color 180ms;
  display: inline-block; cursor: pointer;
}
.nav-link:hover { background: rgba(255,255,255,0.14); color: #fff; transform: scale(1.04); border-color: rgba(255,255,255,0.5); }
.nav-link:active { background: var(--c-mustard); color: var(--c-gulf-blue); transform: scale(0.96); border-color: var(--c-mustard); }
.nav-link.active { background: var(--c-mustard); color: var(--c-gulf-blue); border-color: var(--c-mustard); }
.nav-link.active:hover { background: var(--mustard-500); color: var(--c-gulf-blue); border-color: var(--mustard-500); }

.hamburger {
  display: none; align-items: center; justify-content: center;
  width: 40px; height: 40px; background: none;
  border: 1.5px solid rgba(255,255,255,0.3); border-radius: 8px;
  cursor: pointer; color: #fff; padding: 0;
}
.mob-nav {
  position: fixed; top: 84px; left: 0; right: 0; z-index: 48;
  background: var(--c-charade); border-bottom: 2px solid var(--c-mustard);
  padding: 24px 28px; display: none; flex-direction: column; gap: 20px;
}
.mob-nav.open { display: flex; }
.mob-nav .nav-link { font-size: 17px; }

/* ===========================================================================
   SOCIAL BUTTONS (footer)
   =========================================================================== */
.social-btn { transition: background 180ms, border-color 180ms, color 180ms, transform 180ms; }
.social-btn-fb:hover  { background: #1877F2 !important; border-color: #1877F2 !important; }
.social-btn-msg:hover { background: #0084FF !important; border-color: #0084FF !important; }
.social-btn-ig:hover  { background: #E4405F !important; border-color: #E4405F !important; }
.social-btn-li:hover  { background: #0A66C2 !important; border-color: #0A66C2 !important; }
.social-btn:hover { color: #fff !important; transform: scale(1.1); }

/* ===========================================================================
   COMPONENTS (mirrors the design-system React primitives)
   =========================================================================== */

/* Card */
.card {
  position: relative; background: var(--surface-card);
  border: 1px solid var(--border-subtle); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm); padding: var(--space-5); overflow: hidden;
  transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.card__accent { position: absolute; top: 0; left: 0; right: 0; height: 4px; background: var(--c-mustard); }
.card--hover:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
a .card h3, a .card p, a .card span { color: inherit; }

/* Badge (brand / soft) */
.badge {
  display: inline-flex; align-items: center; gap: 5px; font-family: var(--font-brand);
  font-size: 12px; font-weight: 700; letter-spacing: 0.02em; line-height: 1;
  padding: 5px 11px; border-radius: var(--radius-pill); white-space: nowrap;
}
.badge--brand-soft { background: var(--cobalt-50); color: var(--cobalt-700); }

/* Stat */
.stat { font-family: var(--font-brand); text-align: left; }
.stat__value { font-size: 44px; font-weight: 800; line-height: 1; letter-spacing: -0.02em; color: var(--color-brand); }
.stat__value--accent { color: var(--color-accent-strong); }
.stat__label { margin-top: 8px; font-size: 15px; font-weight: 700; color: var(--text-strong); }
.stat__sub { margin-top: 2px; font-size: 13px; color: var(--text-muted); }
a.stat { display: block; text-decoration: none; cursor: pointer; }

/* Button */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-brand); font-weight: 600; line-height: 1;
  letter-spacing: 0.01em; white-space: nowrap; border-radius: var(--radius-pill);
  cursor: pointer; text-decoration: none;
  transition: transform var(--dur-fast) var(--ease-out), filter var(--dur-fast) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.btn:hover { filter: brightness(0.94); }
.btn:active { transform: scale(0.97); }
.btn--md { padding: 11px 22px; font-size: 15px; gap: 8px; }
.btn--lg { padding: 15px 30px; font-size: 17px; gap: 10px; }
.btn--primary  { background: var(--color-brand); color: var(--text-on-brand); border: 2px solid transparent; box-shadow: var(--shadow-brand); }
.btn--secondary{ background: transparent; color: var(--color-brand); border: 2px solid var(--color-brand); box-shadow: none; }
.btn--inverse  { background: var(--neutral-0); color: var(--c-gulf-blue); border: 2px solid transparent; box-shadow: var(--shadow-md); }

/* Form fields */
.field { display: flex; flex-direction: column; gap: 6px; font-family: var(--font-brand); }
.field__label { font-size: 14px; font-weight: 600; color: var(--text-strong); }
.field__req { color: var(--c-danger); margin-left: 3px; }
.field__help { font-size: 12.5px; color: var(--text-muted); }
.field__help--error { color: var(--c-danger); font-weight: 600; }
.input, .textarea, .select {
  font-family: var(--font-brand); font-size: 15px; color: var(--text-strong);
  background: var(--neutral-0); padding: 11px 14px; border-radius: var(--radius-md);
  border: 1.5px solid var(--border-default); outline: none; width: 100%;
  transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.textarea { resize: vertical; }
.input:focus, .textarea:focus, .select:focus { border-color: var(--color-brand); box-shadow: var(--ring); }
.input--invalid { border-color: var(--c-danger); }
.select-wrap { position: relative; }
.select { appearance: none; -webkit-appearance: none; padding-right: 38px; cursor: pointer; }
.select-wrap svg { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); pointer-events: none; }

/* Google Places address input (built in JS, styled here for parity) */
#cjw-address-container input {
  font-family: var(--font-brand); font-size: 15px; color: #252731; background: #fff;
  padding: 11px 14px; border-radius: 8px; border: 1.5px solid #d9dce3;
  outline: none; width: 100%; box-sizing: border-box;
  transition: border-color 120ms, box-shadow 120ms;
}

/* ===========================================================================
   BACK TO TOP
   =========================================================================== */
.back-to-top {
  position: fixed; right: 24px; bottom: 24px; z-index: 60;
  width: 48px; height: 48px; border-radius: var(--radius-circle);
  background: var(--c-cobalt); color: #fff; border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow-lg);
  opacity: 0; visibility: hidden; transform: translateY(12px);
  transition: opacity 220ms var(--ease-out), transform 220ms var(--ease-out), visibility 220ms, background 180ms;
}
.back-to-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }
.back-to-top:hover { background: var(--cobalt-600); transform: translateY(-2px); }
.back-to-top:active { transform: translateY(0) scale(0.94); }
@media (max-width: 620px) {
  .back-to-top { right: 16px; bottom: 16px; width: 44px; height: 44px; }
}

/* ===========================================================================
   LAYOUT HELPERS
   =========================================================================== */
.wrap { max-width: 1140px; margin: 0 auto; padding: 0 28px; }

/* ===========================================================================
   RESPONSIVE
   =========================================================================== */
@media (max-width: 760px) {
  .nav-desktop { display: none !important; }
  .hamburger { display: flex !important; }
}
@media (max-width: 920px) {
  .resp-about, .resp-contact { grid-template-columns: 1fr !important; gap: 36px !important; }
  .resp-3 { grid-template-columns: 1fr 1fr !important; }
  .resp-stats { grid-template-columns: 1fr 1fr !important; }
  .sec { padding-top: 52px !important; padding-bottom: 52px !important; }
}
@media (max-width: 620px) {
  .resp-3, .resp-2 { grid-template-columns: 1fr !important; }
  .hdr { height: 84px !important; }
  .hdr img { height: 60px !important; }
}