/* ============================================================
   CityTalk Design System — Tokens + semantic styles
   Colour values sampled from uploads/citytalk-logo.png
   Typography substituted from Google Fonts (Poppins + Open Sans)
   ============================================================ */

/* -------- Web fonts (local first, Google CDN fallback) -------- */
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/poppins-400.woff2') format('woff2'); }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 500; font-display: swap; src: url('fonts/poppins-500.woff2') format('woff2'); }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 600; font-display: swap; src: url('fonts/poppins-600.woff2') format('woff2'); }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 700; font-display: swap; src: url('fonts/poppins-700.woff2') format('woff2'); }
@font-face { font-family: 'Open Sans'; font-style: normal; font-weight: 400 900; font-display: swap; src: url('fonts/opensans-400.woff2') format('woff2'); }
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&family=Open+Sans:wght@400;600;700&display=swap');

:root {
  /* ---------- Brand colours (from logo) ---------- */
  --ct-navy-900:   #0D1D42;   /* deepest navy, headings on light */
  --ct-navy-800:   #172B6B;
  --ct-navy-700:   #1E3A8A;   /* primary brand navy */
  --ct-navy-600:   #2B65AD;   /* sampled from 'TALK' stroke */
  --ct-navy-500:   #386AA3;

  --ct-cyan-600:   #1796CF;   /* drop mid-tone */
  --ct-cyan-500:   #2090CA;   /* primary CTA cyan */
  --ct-cyan-400:   #57A7D7;   /* drop highlight */
  --ct-cyan-300:   #8FC4E4;
  --ct-cyan-100:   #E8F4FB;   /* tinted icon badge bg */
  --ct-cyan-50:    #F4FAFD;

  /* ---------- Neutrals ---------- */
  --ct-white:      #FFFFFF;
  --ct-grey-50:    #F6F8FC;   /* section band */
  --ct-grey-100:   #EEF1F6;
  --ct-grey-200:   #E5E8F0;   /* standard border */
  --ct-grey-300:   #D1D6E0;
  --ct-grey-400:   #A3ABBC;
  --ct-grey-500:   #6B7389;   /* secondary text */
  --ct-grey-600:   #4B5268;
  --ct-grey-700:   #2F3547;
  --ct-grey-800:   #1B1F2C;   /* body text */

  /* ---------- Semantic foreground / background ---------- */
  --fg-1:          var(--ct-navy-900);  /* display headings */
  --fg-2:          var(--ct-grey-800);  /* body */
  --fg-3:          var(--ct-grey-500);  /* muted / caption */
  --fg-inverse:    var(--ct-white);

  --bg-1:          var(--ct-white);
  --bg-2:          var(--ct-grey-50);
  --bg-3:          var(--ct-cyan-50);
  --bg-inverse:    var(--ct-navy-900);
  --bg-brand:      var(--ct-navy-700);

  --border-1:      var(--ct-grey-200);
  --border-2:      var(--ct-grey-300);
  --border-focus:  var(--ct-cyan-500);

  /* ---------- Semantic accents ---------- */
  --accent-primary:   var(--ct-cyan-500);
  --accent-primary-hover: #1781B8;
  --accent-secondary: var(--ct-navy-700);
  --success:          #1B9E5C;
  --warning:          #E0A000;
  --danger:           #D64545;
  --info:             var(--ct-cyan-500);

  /* ---------- Brand gradient (the logo drop) ---------- */
  --gradient-brand: linear-gradient(180deg, var(--ct-cyan-400) 0%, var(--ct-cyan-500) 35%, var(--ct-navy-700) 100%);
  --gradient-hero-scrim: linear-gradient(135deg, rgba(13,29,66,0.72) 0%, rgba(13,29,66,0.35) 100%);

  /* ---------- Typography ---------- */
  --font-display: 'Poppins', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --font-body:    'Open Sans', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  --fs-display: 56px;
  --fs-h1:      44px;
  --fs-h2:      32px;
  --fs-h3:      24px;
  --fs-h4:      20px;
  --fs-lead:    18px;
  --fs-body:    16px;
  --fs-small:   14px;
  --fs-caption: 12px;

  --lh-tight:   1.15;
  --lh-snug:    1.3;
  --lh-normal:  1.55;
  --lh-loose:   1.7;

  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semibold: 600;
  --fw-bold:    700;

  --ls-tight:  -0.02em;
  --ls-normal: 0;
  --ls-wide:    0.04em;
  --ls-allcaps: 0.08em;

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

  /* ---------- Radii ---------- */
  --r-xs:  4px;
  --r-sm:  6px;    /* buttons, inputs */
  --r-md:  8px;    /* icon badges */
  --r-lg:  12px;   /* cards */
  --r-xl:  16px;   /* hero imagery */
  --r-2xl: 24px;
  --r-full: 999px;

  /* ---------- Shadows ---------- */
  --shadow-xs: 0 1px 2px rgba(13, 29, 66, 0.06);
  --shadow-sm: 0 2px 6px rgba(13, 29, 66, 0.06);
  --shadow-md: 0 8px 24px rgba(30, 58, 138, 0.10);
  --shadow-lg: 0 16px 48px rgba(30, 58, 138, 0.14);
  --shadow-focus: 0 0 0 3px rgba(32, 144, 202, 0.28);

  /* ---------- Motion ---------- */
  --ease-out:  cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast:  120ms;
  --dur-base:  200ms;
  --dur-slow:  400ms;

  /* ---------- Layout ---------- */
  --container-sm: 640px;
  --container-md: 960px;
  --container-lg: 1200px;
  --container-xl: 1280px;
  --container-hero: 1440px;
  --nav-height: 72px;
}

/* ============================================================
   Semantic element defaults — apply by adding the class names,
   or by scoping this stylesheet under a `.ct` parent.
   ============================================================ */

body, .ct-body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  color: var(--fg-2);
  background: var(--bg-1);
  -webkit-font-smoothing: antialiased;
}

h1, .ct-h1 {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-h1);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  color: var(--fg-1);
  margin: 0 0 var(--s-4);
}

.ct-display {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-display);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  color: var(--fg-1);
}

h2, .ct-h2 {
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-h2);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-tight);
  color: var(--fg-1);
  margin: 0 0 var(--s-4);
}

h3, .ct-h3 {
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-h3);
  line-height: var(--lh-snug);
  color: var(--fg-1);
  margin: 0 0 var(--s-3);
}

h4, .ct-h4 {
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-h4);
  line-height: var(--lh-snug);
  color: var(--fg-1);
  margin: 0 0 var(--s-3);
}

.ct-eyebrow {
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-caption);
  letter-spacing: var(--ls-allcaps);
  text-transform: uppercase;
  color: var(--accent-primary);
}

p, .ct-p { margin: 0 0 var(--s-4); color: var(--fg-2); text-wrap: pretty; }
.ct-lead { font-size: var(--fs-lead); line-height: var(--lh-normal); color: var(--fg-2); }
.ct-small { font-size: var(--fs-small); color: var(--fg-3); }
.ct-caption { font-size: var(--fs-caption); color: var(--fg-3); letter-spacing: var(--ls-wide); }

a, .ct-link {
  color: var(--ct-navy-700);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-out);
}
a:hover, .ct-link:hover {
  color: var(--accent-primary);
  text-decoration: underline;
  text-underline-offset: 3px;
}

code, kbd, samp, .ct-code {
  font-family: var(--font-mono);
  font-size: 0.92em;
  background: var(--ct-grey-100);
  padding: 2px 6px;
  border-radius: var(--r-xs);
  color: var(--ct-navy-800);
}

hr, .ct-hr {
  border: 0;
  height: 1px;
  background: var(--border-1);
  margin: var(--s-7) 0;
}

/* ---------- Buttons ---------- */

.ct-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-body);
  line-height: 1;
  padding: 14px 22px;
  border-radius: var(--r-sm);
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease-out),
              background var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out);
  white-space: nowrap;
}
.ct-btn:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.ct-btn:active { transform: translateY(0); }

.ct-btn--primary {
  background: var(--accent-primary);
  color: #fff;
  box-shadow: var(--shadow-sm);
}
.ct-btn--primary:hover {
  background: var(--accent-primary-hover);
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
  color: #fff;
  text-decoration: none;
}

.ct-btn--secondary {
  background: var(--ct-navy-700);
  color: #fff;
}
.ct-btn--secondary:hover { background: var(--ct-navy-800); transform: translateY(-1px); color: #fff; text-decoration: none; }

.ct-btn--outline {
  background: transparent;
  color: var(--ct-navy-700);
  border-color: var(--border-2);
}
.ct-btn--outline:hover { border-color: var(--accent-primary); color: var(--accent-primary); text-decoration: none; }

.ct-btn--ghost {
  background: transparent;
  color: var(--ct-navy-700);
}
.ct-btn--ghost:hover { background: var(--ct-cyan-100); color: var(--ct-navy-700); text-decoration: none; }

.ct-btn--sm { padding: 8px 14px; font-size: var(--fs-small); }
.ct-btn--lg { padding: 18px 28px; font-size: var(--fs-lead); }

/* High-energy CTAs — use SPARINGLY, one per page/email, for the single
   most important action. Two flavours: red (urgent / book-now / reply) and
   green (positive / confirm / go). Never both on the same page. */
.ct-btn--red {
  background: var(--danger);
  color: #fff;
  font-weight: var(--fw-bold);
  box-shadow: 0 6px 18px rgba(214, 69, 69, 0.28);
}
.ct-btn--red:hover {
  background: #B83838;
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgba(214, 69, 69, 0.34);
  color: #fff;
  text-decoration: none;
}
.ct-btn--red:active { transform: translateY(0); background: #A03030; }

.ct-btn--green {
  background: var(--success);
  color: #fff;
  font-weight: var(--fw-bold);
  box-shadow: 0 6px 18px rgba(27, 158, 92, 0.28);
}
.ct-btn--green:hover {
  background: #168950;
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgba(27, 158, 92, 0.34);
  color: #fff;
  text-decoration: none;
}
.ct-btn--green:active { transform: translateY(0); background: #127042; }

/* Uppercase 'FIND OUT MORE' style link, used across the site */
.ct-cta-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-small);
  letter-spacing: var(--ls-allcaps);
  text-transform: uppercase;
  color: var(--accent-primary);
}
.ct-cta-link::after { content: "→"; transition: transform var(--dur-fast) var(--ease-out); }
.ct-cta-link:hover::after { transform: translateX(3px); }

/* ---------- Form fields ---------- */

.ct-input, .ct-textarea, .ct-select {
  width: 100%;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  color: var(--fg-2);
  padding: 12px 14px;
  background: #fff;
  border: 1px solid var(--border-1);
  border-radius: var(--r-sm);
  transition: border-color var(--dur-fast), box-shadow var(--dur-fast);
}
.ct-input:focus, .ct-textarea:focus, .ct-select:focus {
  outline: none;
  border-color: var(--border-focus);
  box-shadow: var(--shadow-focus);
}
.ct-label { display: block; font-weight: var(--fw-semibold); font-size: var(--fs-small); color: var(--fg-1); margin-bottom: 6px; }

/* ---------- Cards ---------- */

.ct-card {
  background: #fff;
  border: 1px solid var(--border-1);
  border-radius: var(--r-lg);
  padding: var(--s-5);
  transition: border-color var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out),
              transform var(--dur-base) var(--ease-out);
}
.ct-card:hover {
  border-color: var(--ct-cyan-400);
  box-shadow: var(--shadow-md);
}
.ct-card--elevated { box-shadow: var(--shadow-md); }

.ct-icon-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  background: var(--ct-cyan-100);
  color: var(--ct-navy-700);
  border-radius: var(--r-md);
}
.ct-icon-badge--lg { width: 56px; height: 56px; }

/* ---------- Badges ---------- */

.ct-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  font-size: 11px;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: var(--r-full);
  background: var(--ct-cyan-100);
  color: var(--ct-navy-700);
}
.ct-badge--navy { background: var(--ct-navy-700); color: #fff; }
.ct-badge--outline { background: transparent; border: 1px solid var(--border-1); color: var(--fg-3); }

/* ---------- Layout helpers ---------- */

.ct-container { max-width: var(--container-xl); margin: 0 auto; padding: 0 var(--s-5); }
.ct-section { padding: var(--s-9) 0; }
.ct-section--tight { padding: var(--s-7) 0; }

.ct-hero {
  padding: var(--s-10) 0 var(--s-9);
  background: var(--bg-2);
}

/* ---------- Nav ---------- */

.ct-nav {
  height: var(--nav-height);
  display: flex;
  align-items: center;
  background: #fff;
  border-bottom: 1px solid var(--border-1);
  position: sticky; top: 0; z-index: 50;
}
.ct-nav--scrolled { backdrop-filter: blur(12px); background: rgba(255,255,255,0.85); }

/* Reduce motion */
@media (prefers-reduced-motion: reduce) {
  * { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}