/* =========================================================
   Ten Decisions Consulting — site styles
   One stylesheet for every page.

   Brand colors (pulled from the logo asset files, not guessed):
     --warm-white  #F1ECE4   headline text, mark, CTA button background
     --charcoal    #23292C   CTA button text, dark surfaces
     --green       #4FBF57   accent only, used sparingly
   ========================================================= */

:root {
  --warm-white: #F1ECE4;
  --charcoal:   #23292C;
  --green:      #4FBF57;

  --page-bg:    #FAF8F5;   /* light page background */
  --hero-bg:    #1A1613;   /* sits behind the hero photo while it loads */
  --ink:        #2B2F33;   /* body text on light backgrounds */
  --ink-soft:   #5C6469;   /* secondary text */
  --rule:       #E4DED3;   /* hairline borders */

  --wrap:       1080px;
  --wrap-text:  680px;     /* narrower measure for reading */
}

/* ---------- reset ---------- */

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--page-bg);
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               Helvetica, Arial, sans-serif;
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }

a { color: inherit; }

h1, h2, h3 { line-height: 1.25; margin: 0 0 16px; font-weight: 600; }

p { margin: 0 0 18px; }

.wrap      { width: 100%; max-width: var(--wrap);      margin: 0 auto; padding: 0 24px; }
.wrap-text { width: 100%; max-width: var(--wrap-text); margin: 0 auto; padding: 0 24px; }

/* Screen-reader-only text. Visible to screen readers, hidden on screen. */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Keyboard users can jump straight to the main content. */
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--charcoal); color: var(--warm-white);
  padding: 12px 20px; border-radius: 0 0 6px 0;
}
.skip-link:focus { left: 0; }

/* ---------- buttons ---------- */

.btn {
  display: inline-block;
  padding: 15px 34px;
  border: none;
  border-radius: 6px;
  font-size: 16px;
  font-weight: 600;
  font-family: inherit;
  text-decoration: none;
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.btn:hover  { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

/* Warm-white button on dark: the approved hero treatment. */
.btn-light {
  background: var(--warm-white);
  color: var(--charcoal);
  box-shadow: 0 2px 14px rgba(0,0,0,.18);
}
.btn-light:hover { box-shadow: 0 6px 22px rgba(0,0,0,.24); }

/* Charcoal button on light backgrounds. */
.btn-dark {
  background: var(--charcoal);
  color: var(--warm-white);
  box-shadow: 0 2px 14px rgba(35,41,44,.16);
}
.btn-dark:hover { box-shadow: 0 6px 22px rgba(35,41,44,.22); }

/* ---------- site header / navigation ---------- */

.site-header {
  position: absolute;   /* floats over the hero on the homepage */
  top: 0; left: 0; right: 0;
  z-index: 10;
  padding: 22px 0;
}
/* On pages with no photo hero, the header sits on a solid charcoal bar. */
.site-header.is-solid {
  position: relative;
  background: var(--charcoal);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

/* The mark plus real HTML text, rather than the packaged lockup SVG.
   The lockup has a tiny "CONSULTING" subtitle that turns to mush at
   header size. Live text stays crisp at every size. */
.brand {
  display: flex;
  align-items: center;
  gap: 11px;
  flex-shrink: 0;
  text-decoration: none;
  color: var(--warm-white);
}
.brand img { height: 26px; width: auto; }
.brand span {
  font-size: 23px;
  font-weight: 600;
  letter-spacing: -.01em;
  white-space: nowrap;
}

/* On the homepage the header floats over the photo, so the logo has to
   fight a bright, busy background. Size alone doesn't fix that — these
   shadows lift it off the picture. Not applied on the solid dark bar,
   where there is nothing to fight. */
.site-header:not(.is-solid) .brand img   { filter: drop-shadow(0 2px 8px rgba(0,0,0,.65)); }
.site-header:not(.is-solid) .brand span  { text-shadow: 0 2px 10px rgba(0,0,0,.7); }
.site-header:not(.is-solid) .site-nav a  { text-shadow: 0 1px 6px rgba(0,0,0,.5); }
.site-header:not(.is-solid) .site-nav .nav-cta { text-shadow: none; }

/* A soft band of shade across the top of the photo, behind the whole
   header. This is what actually makes the nav readable over any image. */
.site-header:not(.is-solid)::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 190px;
  pointer-events: none;
  z-index: -1;
  background: linear-gradient(180deg,
              rgba(10,10,15,.62) 0%,
              rgba(10,10,15,.30) 55%,
              rgba(10,10,15,0) 100%);
}

/* Hamburger button. Hidden on desktop, shown on narrow screens. */
.nav-toggle {
  display: none;
  width: 44px; height: 44px;
  padding: 0;
  border: none;
  border-radius: 6px;
  background: rgba(241,236,228,.12);
  cursor: pointer;
}
.nav-toggle span {
  display: block;
  width: 20px; height: 2px;
  margin: 4px auto;
  background: var(--warm-white);
  border-radius: 2px;
  transition: transform .2s ease, opacity .2s ease;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

.site-nav {
  display: flex;
  align-items: center;
  gap: 8px;
}
.site-nav a {
  color: var(--warm-white);
  text-decoration: none;
  font-size: 15px;
  font-weight: 500;
  padding: 9px 14px;
  border-radius: 6px;
  opacity: .85;
  transition: opacity .15s ease, background-color .15s ease;
}
.site-nav a:hover        { opacity: 1; background: rgba(241,236,228,.12); }
.site-nav a[aria-current] { opacity: 1; background: rgba(241,236,228,.14); }

.site-nav .nav-cta {
  background: var(--warm-white);
  color: var(--charcoal);
  opacity: 1;
  font-weight: 600;
}
.site-nav .nav-cta:hover { background: #fff; }

/* ---------- hero (homepage) ---------- */

.hero {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  background: var(--hero-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

/* The photo layer. Taller than the hero so it has room to slide
   during the parallax scroll without exposing an edge. */
.hero-bg {
  position: absolute;
  top: -25%; left: 0;
  width: 100%; height: 150%;
  background-image: url("../images/hero.jpg");
  background-size: cover;
  background-position: center center;
  will-change: transform;
}

/* Dark gradient between photo and text so warm white stays readable.
   The approved demo used .30 to .55. That demo had a headline and a
   button over the photo. The real hero also carries two paragraphs of
   body text, which sits over the busiest part of the picture, so this
   is nudged darker. Change the two numbers below to go back. */
.hero-overlay {
  position: absolute; inset: 0;
  background:
    /* soft pool of shade behind the text block */
    radial-gradient(ellipse 75% 65% at 50% 50%,
                    rgba(10,10,15,.50) 0%,
                    rgba(10,10,15,0) 100%),
    linear-gradient(180deg,
                    rgba(10,10,15,.46) 0%,
                    rgba(10,10,15,.70) 100%);
}

.hero-content {
  position: relative;
  z-index: 2;
  color: var(--warm-white);
  padding: 120px 24px 100px;
  max-width: 760px;
}

.hero-mark { height: 44px; width: auto; margin: 0 auto 22px; }

.hero h1 {
  font-size: 42px;
  font-weight: 600;
  max-width: 680px;
  margin: 0 auto 22px;
  color: var(--warm-white);
  text-shadow: 0 2px 20px rgba(0,0,0,.4);
}

.hero-intro {
  font-size: 18px;
  line-height: 1.6;
  max-width: 600px;
  margin: 0 auto 16px;
  color: var(--warm-white);
  opacity: .95;
  text-shadow: 0 1px 12px rgba(0,0,0,.45);
}
.hero-intro:last-of-type { margin-bottom: 30px; }

.scroll-cue {
  position: absolute;
  bottom: 24px; left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  color: var(--warm-white);
  font-size: 12px;
  letter-spacing: 1px;
  opacity: .7;
}

/* ---------- page header (non-homepage) ---------- */

.page-head {
  background: var(--charcoal);
  color: var(--warm-white);
  padding: 64px 0 72px;
  text-align: center;
}
.page-head h1 { font-size: 36px; margin-bottom: 10px; color: var(--warm-white); }
.page-head p  { color: var(--warm-white); opacity: .8; margin: 0; }

/* ---------- generic sections ---------- */

.section       { padding: 84px 0; }
.section-tight { padding: 60px 0; }
.section-alt   { background: #FFFFFF; }
.section h2    { font-size: 30px; margin-bottom: 28px; }

.lead { font-size: 19px; color: var(--ink-soft); }

/* ---------- "who this is for" list ---------- */

.pain-list { list-style: none; margin: 0 0 28px; padding: 0; }
.pain-list li {
  position: relative;
  padding: 0 0 22px 34px;
  margin-bottom: 22px;
  border-bottom: 1px solid var(--rule);
}
.pain-list li:last-child { border-bottom: none; margin-bottom: 0; }

/* Small green dot echoing the logo mark. */
.pain-list li::before {
  content: "";
  position: absolute;
  left: 4px; top: 10px;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--green);
}
.pain-list strong { display: block; margin-bottom: 4px; color: var(--ink); }

/* ---------- stats callout ---------- */

.stats {
  background: var(--charcoal);
  color: var(--warm-white);
  padding: 68px 0;
}
.stats h2 { color: var(--warm-white); text-align: center; margin-bottom: 40px; }

.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 40px;
  max-width: 820px;
  margin: 0 auto;
}
.stat { text-align: center; }
.stat-number {
  display: block;
  font-size: 54px;
  font-weight: 700;
  line-height: 1.05;
  color: var(--green);
  margin-bottom: 10px;
}
.stat p { margin: 0; opacity: .9; font-size: 16px; }

/* ---------- the formula band ----------
   Assess · Optimize · Automate

   The three dots between the words are the same shape as the marks in
   the logo, so the band reads as part of the brand rather than a
   decoration bolted on. */

.formula {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0 34px;

  /* Sits at the END of its section now, so the space goes above it. */
  margin: 48px 0 0;
  padding: 32px 34px;

  background: #FFFFFF;
  border: 1px solid var(--rule);
  border-radius: 10px;
  box-shadow: 0 2px 18px rgba(35,41,44,.05);
}

/* On the white section the band would disappear, so flip it warm. */
.section-alt .formula { background: var(--page-bg); }

.formula span {
  position: relative;
  font-size: 29px;
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--charcoal);
  white-space: nowrap;
}

/* The green dot separators, drawn between words rather than typed.
   The dot must sit dead centre in the gap, so: half the gap, minus
   half the dot. Gap 34, dot 8  ->  -17 - 4  =  -21. */
.formula span + span::before {
  content: "";
  position: absolute;
  left: -21px;
  top: 50%;
  width: 8px;
  height: 8px;
  margin-top: -4px;
  border-radius: 50%;
  background: var(--green);
}

@media (max-width: 720px) {
  .formula      { padding: 24px 18px; gap: 0 22px; }
  .formula span { font-size: 20px; }
  /* gap 22, dot 6  ->  -11 - 3  =  -14 */
  .formula span + span::before { left: -14px; width: 6px; height: 6px; margin-top: -3px; }
}

/* Very narrow phones: stack the words and centre the dots between rows. */
@media (max-width: 400px) {
  .formula      { flex-direction: column; gap: 14px 0; }
  .formula span { font-size: 22px; }
  .formula span + span::before {
    left: 50%;
    top: -11px;
    margin-left: -3px;
    margin-top: 0;
  }
}

/* ---------- 3-step process ---------- */

.steps { counter-reset: step; margin-top: 8px; }

.step {
  position: relative;
  padding-left: 74px;
  margin-bottom: 46px;
}
.step:last-child { margin-bottom: 0; }

.step::before {
  counter-increment: step;
  content: counter(step);
  position: absolute;
  left: 0; top: -4px;
  width: 50px; height: 50px;
  border-radius: 50%;
  background: var(--charcoal);
  color: var(--warm-white);
  font-size: 21px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
}
.step h3 { font-size: 21px; margin-bottom: 8px; }
.step p  { margin-bottom: 0; color: var(--ink-soft); }

/* ---------- founding client panel ---------- */

.panel {
  background: #FFFFFF;
  border: 1px solid var(--rule);
  border-left: 4px solid var(--green);
  border-radius: 8px;
  padding: 38px 40px;
}
.panel h2 { font-size: 26px; }
.panel p:last-child { margin-bottom: 0; }

/* ---------- closing call to action ---------- */

.cta-band {
  background: var(--charcoal);
  color: var(--warm-white);
  padding: 88px 0;
  text-align: center;
}
.cta-band h2 {
  color: var(--warm-white);
  font-size: 30px;
  max-width: 700px;
  margin: 0 auto 28px;
}
.cta-band .fine {
  margin: 24px auto 0;
  max-width: 540px;
  font-size: 15px;
  opacity: .75;
}

/* ---------- about page ---------- */

.about-grid {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 48px;
  align-items: start;
}
.headshot-slot {
  border: 2px dashed var(--rule);
  border-radius: 8px;
  background: #fff;
  aspect-ratio: 4 / 5;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 24px;
  color: var(--ink-soft);
  font-size: 14px;
  line-height: 1.55;
}
.headshot-slot code {
  font-size: 12.5px;
  background: var(--page-bg);
  padding: 1px 5px;
  border-radius: 4px;
  word-break: break-all;
}

/* ---------- pull quote ----------
   Used to end a section on a line that should land. Bigger than body
   text, set off with the brand green, and given room to breathe. */

.pullquote {
  /* Generous space underneath. This ends a section, so the next
     heading must not crowd it. */
  margin: 34px 0 52px;
  padding: 6px 0 6px 26px;
  border-left: 3px solid var(--green);
  font-size: 25px;
  line-height: 1.42;
  font-style: italic;
  color: var(--ink);
}

@media (max-width: 640px) {
  .pullquote { font-size: 21px; padding-left: 18px; margin: 26px 0 40px; }
}

/* ---------- contact page ---------- */

.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: start;
}
.contact-direct p { margin-bottom: 10px; }
.contact-direct a { color: var(--ink); }

.field { margin-bottom: 20px; }
.field label {
  display: block;
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 6px;
}
.field input,
.field textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--rule);
  border-radius: 6px;
  background: #fff;
  font-family: inherit;
  font-size: 16px;
  color: var(--ink);
}
.field input:focus,
.field textarea:focus {
  outline: 2px solid var(--green);
  outline-offset: 1px;
  border-color: transparent;
}
.field textarea { min-height: 130px; resize: vertical; }

.form-note {
  font-size: 14px;
  color: var(--ink-soft);
  margin-top: 14px;
}

.booking-slot {
  border: 2px dashed var(--rule);
  border-radius: 8px;
  background: #fff;
  padding: 48px 32px;
  text-align: center;
  color: var(--ink-soft);
}

/* Calendly's embedded calendar. It needs a fixed height set by us —
   the widget cannot size itself. Phones need more room because the
   calendar stacks into a single column. */
.calendly-wrap {
  margin-top: 28px;
  height: 750px;
  overflow: hidden;
  border-radius: 8px;
  background: #fff;
  border: 1px solid var(--rule);
}
.calendly-wrap iframe { display: block; width: 100%; height: 100%; border: 0; }

@media (max-width: 860px) {
  .calendly-wrap { height: 1050px; }
}

/* ---------- setup notes (removed before launch) ---------- */

.setup-note {
  background: #FFF6D6;
  border: 1px solid #E8D48A;
  border-radius: 6px;
  padding: 16px 20px;
  margin: 0 0 28px;
  font-size: 15px;
  color: #5A4A16;
}
.setup-note strong { color: #3D3208; }
.setup-note :last-child { margin-bottom: 0; }

/* ---------- legal / privacy text ---------- */

.legal h2 { font-size: 22px; margin-top: 40px; }
.legal h2:first-child { margin-top: 0; }
.legal ul { padding-left: 22px; }
.legal li { margin-bottom: 8px; }
.legal .updated { color: var(--ink-soft); font-size: 15px; }

/* ---------- footer ---------- */

.site-footer {
  background: var(--charcoal);
  color: var(--warm-white);
  padding: 52px 0 40px;
  font-size: 15px;
}
.footer-inner {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  align-items: center;
  justify-content: space-between;
}
.site-footer a { color: var(--warm-white); opacity: .8; text-decoration: none; }
.site-footer a:hover { opacity: 1; text-decoration: underline; }
.footer-links { display: flex; gap: 20px; flex-wrap: wrap; }
.footer-legal {
  margin-top: 28px;
  padding-top: 22px;
  border-top: 1px solid rgba(241,236,228,.15);
  opacity: .6;
  font-size: 14px;
}

/* =========================================================
   Responsive — phones and small tablets
   ========================================================= */

@media (max-width: 860px) {
  .about-grid,
  .contact-grid { grid-template-columns: 1fr; gap: 36px; }
  .headshot-slot { max-width: 300px; }
}

@media (max-width: 700px) {
  body { font-size: 16px; }

  .site-header { padding: 14px 0; }
  .brand img   { height: 21px; }
  .brand span  { font-size: 20px; }

  /* Swap the row of links for a hamburger button and a drop-down panel.
     Without this the links wrap onto a second line and land on top of
     the logo. */
  .nav-toggle { display: block; }

  .site-nav {
    display: none;
    position: absolute;
    top: 100%; right: 24px; left: 24px;
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    margin-top: 10px;
    padding: 10px;
    background: var(--charcoal);
    border-radius: 10px;
    box-shadow: 0 14px 40px rgba(0,0,0,.35);
  }
  .site-nav.is-open { display: flex; }
  .site-nav a       { padding: 13px 14px; font-size: 16px; text-align: center; }
  .site-nav .nav-cta { margin-top: 4px; }

  .hero h1        { font-size: 30px; }
  .hero-intro     { font-size: 16px; }
  .hero-mark      { height: 34px; }
  .hero-content   { padding: 110px 20px 90px; }

  .section        { padding: 60px 0; }
  .section h2     { font-size: 25px; }
  .page-head h1   { font-size: 29px; }
  .cta-band h2    { font-size: 25px; }

  .stat-number    { font-size: 44px; }

  .step           { padding-left: 60px; }
  .step::before   { width: 42px; height: 42px; font-size: 18px; }

  .panel          { padding: 28px 24px; }

  .footer-inner   { flex-direction: column; align-items: flex-start; }
}

/* =========================================================
   Respect reduced motion.
   Some people get motion sickness from parallax and smooth
   scrolling, and their device has a setting for it. Honor it.
   The JS also checks this and skips the parallax entirely.
   ========================================================= */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}

/* ---------- print ---------- */

@media print {
  .site-header, .scroll-cue, .site-footer { display: none; }
  body { background: #fff; }
}