/* Candeo Performance — site stylesheet, Part 76 rebuild.
   Shared by all 7 pages, one file so the browser caches it once across the whole visit
   instead of re-downloading the same CSS on every page (privacy.html/terms.html predate
   this and still embed their own styles inline — fine for two standalone legal pages,
   not worth doing for a 7-page interlinked site). */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

:root {
  --color-bg: #eae3d8;
  --color-surface: #e1d7c8;
  --color-text: #211d18;
  --color-divider: rgba(33,29,24,0.14);
  --color-accent: #8a4c37;
  --color-accent-100: #f0ded2;
  --color-accent-600: #743f2d;
  --color-accent-700: #5c3324;
  --color-accent-800: #3f2318;
  --color-dark-bg: #1a1712;
  --color-dark-surface: #241f18;
  --color-dark-text: #f0eeea;
  --color-dark-divider: rgba(240,238,234,0.16);
  --color-tan: #d99b7e;
  --font-heading: "Inter", system-ui, sans-serif;
  --font-heading-weight: 700;
  --font-body: "Inter", system-ui, sans-serif;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 28px;
  --space-6: 24px;
  --space-7: 64px;
  --space-8: 32px;

  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;

  --shadow-sm: 0 1px 2px color-mix(in srgb, #211d18 14%, transparent);
  --shadow-md: 0 3px 10px color-mix(in srgb, #211d18 16%, transparent);
  --shadow-lg: 0 12px 32px color-mix(in srgb, #211d18 22%, transparent);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; font-size: 16px; line-height: 1.55; font-weight: 400;
  font-family: var(--font-body); background: var(--color-bg); color: var(--color-text);
  letter-spacing: -0.01em;
}
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  line-height: 1.12; letter-spacing: -0.015em; margin: 0 0 var(--space-2);
}
h1 { font-size: clamp(32px, 4.6vw, 56px); }
h2 { font-size: clamp(26px, 3.4vw, 38px); }
h3 { font-size: 22px; }
h4 { font-size: 18px; }
p { margin: 0 0 var(--space-3); }
a { color: var(--color-accent-700); text-decoration: underline; text-decoration-color: var(--color-accent); text-underline-offset: 3px; }
a:hover { color: var(--color-accent); }
img { display: block; max-width: 100%; }
.text-muted { color: color-mix(in srgb, var(--color-text) 55%, transparent); }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
::selection { background: color-mix(in srgb, var(--color-accent) 30%, transparent); }

.hr { height: 2px; border: 0; margin: var(--space-4) 0; background: var(--color-divider); }

/* — buttons — */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  cursor: pointer; text-decoration: none;
  font-family: var(--font-heading); font-weight: 600; font-size: 15px; line-height: 1.2;
  color: var(--color-text); background: transparent; border: 1px solid transparent;
  padding: 14px 28px; border-radius: 980px; min-height: 44px;
}
.btn-primary { background: var(--color-accent); color: #ffffff; }
.btn-primary:hover, .btn-primary:visited { color: #ffffff; background: var(--color-accent-600); }
.btn-primary:active { background: var(--color-accent-700); }
.btn-secondary { border-color: var(--color-divider); }
.btn-secondary:hover { background: color-mix(in srgb, var(--color-text) 7%, transparent); }
.btn-ghost { color: var(--color-accent-700); padding-inline: var(--space-1); text-decoration: none; }
.btn-ghost:hover { background: color-mix(in srgb, var(--color-accent) 10%, transparent); }
.btn-block { width: 100%; margin-top: var(--space-2); }

/* — forms — */
.field { display: block; margin-bottom: var(--space-4); }
.field > label { display: block; font-size: 13px; margin-bottom: 6px; color: color-mix(in srgb, var(--color-text) 70%, transparent); }
.input {
  width: 100%; min-height: 44px; padding: 10px 14px; font: inherit; font-size: 15px;
  color: var(--color-text); caret-color: var(--color-accent); background: #ffffff;
  border: 1px solid var(--color-divider); border-radius: 14px;
}
.input:hover { border-color: color-mix(in srgb, var(--color-text) 45%, transparent); }
.input:focus-visible { border-color: var(--color-accent); outline-offset: 0; }
textarea.input { min-height: 110px; resize: vertical; }

/* — cards — */
.card { padding: var(--space-6); border-radius: 22px; background: var(--color-surface); }

/* — nav — */
.site-nav {
  display: flex; align-items: center; gap: var(--space-6);
  padding: var(--space-4) var(--space-6); position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--color-bg) 78%, transparent);
  backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--color-divider);
}
.nav-brand {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-heading); font-weight: 700; font-size: 18px;
  margin-right: auto; color: var(--color-text); text-decoration: none;
}
.site-nav a:not(.btn) { color: inherit; text-decoration: none; font-size: 15px; }
.site-nav a:not(.btn):hover, .site-nav a:not(.btn)[aria-current='page'] { color: var(--color-accent); }

/* — reveal on scroll — */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.7s cubic-bezier(.2,.7,.2,1), transform 0.7s cubic-bezier(.2,.7,.2,1); }
.reveal.in-view { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1 !important; transform: none !important; transition: none !important; } }

/* — footer — */
.site-footer { padding: var(--space-6); display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: var(--space-4); max-width: 1200px; margin: 0 auto; }
.site-footer nav { display: flex; gap: var(--space-5); flex-wrap: wrap; }
.site-footer a { font-size: 13px; color: var(--color-text); opacity: 0.7; text-decoration: none; }
.site-footer a:hover { opacity: 1; color: var(--color-accent); }

/* — layout helpers used across pages — */
.page-dark {
  background: var(--color-dark-bg); color: var(--color-dark-text);
  --color-bg: var(--color-dark-bg); --color-surface: var(--color-dark-surface);
  --color-text: var(--color-dark-text); --color-divider: var(--color-dark-divider);
  --color-accent: var(--color-tan);
}
.page-light { background: #f6f1ea; --color-bg: #f6f1ea; --color-surface: #ffffff; --color-text: #14161c; --color-divider: color-mix(in srgb, #14161c 15%, transparent); color: var(--color-text); }

.wrap { max-width: 900px; margin: 0 auto; padding: clamp(56px,12vw,120px) var(--space-6) var(--space-7); }
.wrap-wide { max-width: 1100px; margin: 0 auto; padding: clamp(56px,12vw,120px) var(--space-6) var(--space-7); }
.wrap-narrow { max-width: 640px; margin: 0 auto; }

.stat-row { display: flex; gap: var(--space-8); margin-bottom: var(--space-6); flex-wrap: wrap; justify-content: center; text-align: center; }
.stat-row .stat-num { font-size: 34px; font-weight: 800; margin: 0; }
.stat-row .stat-label { font-size: 13px; margin: 4px 0 0; }

.pillars-row { display: flex; justify-content: center; gap: 28px; flex-wrap: wrap; margin-top: 32px; padding-top: 32px; border-top: 1px solid var(--color-divider); }
.pillars-row .pillar { text-align: center; width: 60px; }
.pillars-row .pillar svg { width: 20px; height: 20px; margin: 0 auto 8px; display: block; color: var(--color-accent); }
.pillars-row .pillar span { display: block; font-size: 11px; opacity: 0.75; }

.services-grid, .credentials-grid, .hero-round { }
.services-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0; }
.services-grid > div { padding: var(--space-6); border-right: 2px solid var(--color-divider); }
.services-grid > div:last-child { border-right: none; }
.credentials-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: var(--space-4); margin: var(--space-6) auto var(--space-8); max-width: 640px; text-align: center; }

.round-photo { border-radius: 50%; overflow: hidden; margin: 0 auto; }
.round-photo img { width: 100%; height: 100%; object-fit: cover; }

/* — trust strip (the "Henley methodology · Confidential · ..." line) —
   Each phrase is its own flex item, wrapping as whole phrases rather than one
   long run-on sentence, so it looks deliberately centered at any width instead
   of breaking unevenly. The middot lives at the end of each phrase's own span
   (not as a separate flex item) so it can never wrap onto its own line and read
   as a stray blank row when a phrase takes the full width on mobile. */
.trust-strip { display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: 6px 10px; font-size: 13px; letter-spacing: 0.02em; max-width: 720px; margin-left: auto; margin-right: auto; }

/* — CTA heading mobile break (e.g. 'Ready to reach your next level?') —
   Forces a deliberate two-line break on narrow screens instead of letting the
   browser wrap wherever it runs out of room, which can orphan a short trailing
   word (e.g. 'level?') alone on its own line. Hidden on desktop where the
   heading fits on one line. */
.break-mobile { display: none; }

@media (max-width: 720px) {
  .break-mobile { display: block; }

  /* Logo stays left, links + button compacted to try to hold one row (Dee's call —
     logo-left over the centred/stacked layout from the previous round). Falls back
     to wrapping gracefully (not clipping) if a given phone is too narrow for it. */
  .site-nav { gap: 8px; flex-wrap: wrap; row-gap: var(--space-2); align-items: center; padding: var(--space-3) var(--space-4); }
  .site-nav .nav-brand { font-size: 14px; gap: 6px; }
  .site-nav .nav-brand span[aria-hidden='true'] { width: 14px !important; height: 14px !important; }
  .site-nav a:not(.btn) { font-size: 12px; }
  .site-nav .btn { padding: 6px 14px; font-size: 12px; min-height: 32px; }
  .services-grid { grid-template-columns: 1fr !important; }
  .services-grid > div { border-right: none; border-bottom: 2px solid var(--color-divider); padding: var(--space-6) 0; }
  .services-grid > div:last-child { border-bottom: none; }
  /* Credentials (About page): 2 per row instead of 1, so it's 2 short rows of
     scrolling instead of 4 — the 4 items' descriptive text is too long to keep
     legible squeezed into 4 columns on a phone, so 2-up is the balance. */
  .credentials-grid { grid-template-columns: repeat(2, 1fr) !important; gap: var(--space-5) var(--space-3); }
  .stat-row { gap: var(--space-6); }
  .pillars-row { gap: 12px; }
  .pillars-row .pillar { width: 46px; }
  .pillars-row .pillar svg { width: 16px; height: 16px; margin: 0 auto 4px; }
  .pillars-row .pillar span { font-size: 9px; }
}