/* Kazandim brand layer over Bootstrap 5.3 */
:root {
  --ks-orange: #ea7324;
  --ks-orange-text: #b8530f;   /* orange for text on light backgrounds (AA contrast) */
  --ks-heading: #d4621a;       /* orange for section headings on light backgrounds (3.5:1+) */
  --ks-ink: #1c1917;           /* warm near-black */
  --ks-cream: #faf6f1;         /* warm off-white band */

  --bs-primary: var(--ks-orange);
  --bs-primary-rgb: 234, 115, 36;
  --bs-dark: var(--ks-ink);
  --bs-dark-rgb: 28, 25, 23;
  --bs-light: var(--ks-cream);
  --bs-light-rgb: 250, 246, 241;
  --bs-body-color: #292524;
  --bs-link-color: var(--ks-orange-text);
  --bs-link-hover-color: #8f3f0a;
  --bs-body-font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
h1, h2, h3, h4, h5 { font-family: Montserrat, var(--bs-body-font-family); letter-spacing: -0.02em; }
h2 { font-size: calc(1.4rem + 1.2vw); }
@media (min-width: 1200px) { h2 { font-size: 2.4rem; } }
h3.h5 { letter-spacing: -0.01em; }

/* serif accent for quotes and the book title */
blockquote, .font-serif { font-family: Fraunces, Georgia, "Times New Roman", serif; font-style: italic; letter-spacing: 0; }
.font-serif { font-style: normal; font-weight: 700; }
.quote-mark { font-size: 4rem; line-height: 1; color: var(--ks-orange); font-family: Fraunces, Georgia, serif; }

/* white bold text on a bright orange. Contrast is ~3.3:1: fine for large bold text (the big buttons),
   below the 4.5:1 AA target for the small nav button. Use #c2570f for ~4.5:1 everywhere. */
.btn-primary {
  --ks-button: #e26a1b;
  --bs-btn-font-weight: 700;
  --bs-btn-color: #fff; --bs-btn-bg: var(--ks-button); --bs-btn-border-color: var(--ks-button);
  --bs-btn-hover-color: #fff; --bs-btn-hover-bg: #cf5e14; --bs-btn-hover-border-color: #cf5e14;
  --bs-btn-active-color: #fff; --bs-btn-active-bg: #b8530f; --bs-btn-active-border-color: #b8530f;
}
.btn-outline-primary {
  --bs-btn-color: var(--ks-orange-text); --bs-btn-border-color: var(--ks-orange);
  --bs-btn-hover-color: var(--ks-ink); --bs-btn-hover-bg: var(--ks-orange); --bs-btn-hover-border-color: var(--ks-orange);
}
.text-primary { color: var(--ks-orange) !important; }   /* only used on dark backgrounds */
.navbar-brand img { height: 40px; width: 40px; object-fit: contain; }
.hero { position: relative; isolation: isolate; background: var(--ks-ink); }
/* layer 1: the photo, mirrored. layer 2: a dark-to-light gradient (not mirrored) so the text side stays calm */
.hero::before, .hero::after { content: ""; position: absolute; inset: 0; z-index: -1; }
.hero::before { transform: scaleX(-1); background: url("../img/hero/sam-3294.jpg") center 25% / cover no-repeat; }
.hero::after { background: radial-gradient(ellipse 65% 85% at 50% 50%, rgba(28,25,23,.8) 0%, rgba(28,25,23,.62) 55%, rgba(28,25,23,.3) 100%); }
/* text spans the full width on small screens, so keep the overlay even there */
@media (max-width: 991.98px) { .hero::after { background: rgba(28,25,23,.78); } }
.feature {
  display: inline-flex; align-items: center; justify-content: center;
  height: 3.5rem; width: 3.5rem; font-size: 1.5rem; background: var(--ks-orange); color: var(--ks-ink);
}
.card-photo { aspect-ratio: 3 / 2; object-fit: cover; }
/* landscape phones: keep hero from filling several screens */
@media (max-height: 500px) and (orientation: landscape) { .hero .my-5 { margin-block: 1rem !important; } }

html { scroll-behavior: smooth; }
section[id] { scroll-margin-top: 64px; }
.navbar .nav-link.active { color: var(--ks-orange); }

.stat { font-family: Montserrat, sans-serif; font-weight: 800; font-size: 1.5rem; color: var(--ks-orange); }
.check-list li { position: relative; padding-left: 1.5rem; margin-bottom: .35rem; }
.check-list li::before { content: "\F26A"; font-family: "bootstrap-icons"; position: absolute; left: 0; color: var(--ks-orange); }
.step { height: 100%; padding: 1.5rem; border-top: 4px solid var(--ks-orange); background: var(--ks-cream); border-radius: .5rem; text-align: center; }
.step-num { display: flex; margin-inline: auto; align-items: center; justify-content: center; width: 2rem; height: 2rem; border-radius: 50%; background: var(--ks-orange); color: var(--ks-ink); font-weight: 700; margin-bottom: .75rem; }
.book-cover { max-height: 360px; border-radius: .25rem; }
.accordion-button:not(.collapsed) { background: rgba(234,115,36,.12); color: var(--ks-ink); }
.accordion-button:focus { border-color: var(--ks-orange); box-shadow: 0 0 0 .25rem rgba(234,115,36,.25); }

.portrait { max-width: 480px; width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }

/* section headings on light bands are orange; dark bands keep white */
main section:not(.bg-dark) h2 { color: var(--ks-heading); }


/* keep the longest stat label ("Author & speaker") on one line at ~1024px */
@media (min-width: 992px) and (max-width: 1199px) { .stat { font-size: 1.25rem; } }

/* accessibility */
.skip-link { position: fixed; top: .5rem; left: .5rem; z-index: 2000; padding: .6rem 1rem; background: var(--ks-ink); color: #fff; border: 2px solid var(--ks-orange); border-radius: .25rem; }
:focus-visible { outline: 3px solid var(--ks-orange); outline-offset: 2px; }
.bg-dark :focus-visible, .hero :focus-visible, footer :focus-visible { outline-color: #fff; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { transition: none !important; animation: none !important; } }


/* proof strip: black band, white text; orange rule separates it from the dark hero */
.stats-band { background: #0d0c0b; color: #fff; border-top: 4px solid var(--ks-orange); }
.stats-band .stat, .stats-band .stat-desc { color: #fff; }

/* hero buttons: all caps (text in the HTML stays normal case for screen readers) */
.hero .btn, .btn-caps { text-transform: uppercase; letter-spacing: .08em; font-weight: 700; }

/* avoid a one-word last line in the hero tagline */
.hero .lead { text-wrap: balance; }

/* "How we work" sits on a dark band: dark-gray step cards */
.bg-dark .step { background: #2a2623; color: #fff; }

/* arrows between the four steps (large screens only, where the cards sit in one row) */
@media (min-width: 992px) {
  .steps > .col { position: relative; }
  .steps > .col:not(:last-child)::after {
    content: "\f138"; font-family: "bootstrap-icons"; position: absolute; top: 50%; right: 0;
    transform: translate(50%, -50%); font-size: 1.5rem; line-height: 1; color: var(--ks-orange); z-index: 1;
  }
}


/* key figures and results inside card bullets */
.hl { font-weight: 700; color: var(--ks-orange-text); }

/* Experience: big-number cards on a white band, plain bullets (different from the Services cards) */
.exp-card { background: var(--ks-cream); border: 1px solid #efe5d8 !important; text-align: center; }
.exp-stat { font-family: Montserrat, sans-serif; font-weight: 800; font-size: 2.75rem; line-height: 1.05; color: var(--ks-heading); letter-spacing: -0.02em; }
.exp-stat-label { text-transform: uppercase; letter-spacing: .1em; font-size: .8rem; font-weight: 700; color: #57534e; margin-bottom: 1rem; }
.exp-list { text-align: left; padding-left: 1.25rem; }
.exp-list li { margin-bottom: .45rem; }
.exp-list li::marker { color: var(--ks-orange); }

/* quote bands between sections */
.quote-band .quote-mark { line-height: .8; }

/* client testimonial: a bordered card in the body font, so it reads as a real endorsement, not a pull quote */
.testimonial { max-width: 820px; background: #fff; border: 1px solid #e7ddd0; border-left: 6px solid var(--ks-orange); border-radius: .5rem; padding: 1.75rem 2rem; box-shadow: 0 .25rem 1rem rgba(28,25,23,.06); }
.testimonial-label { text-transform: uppercase; letter-spacing: .12em; font-size: 1.15rem; font-weight: 700; color: var(--ks-orange-text); margin-bottom: .75rem; }
.testimonial blockquote { font-family: Inter, system-ui, sans-serif; font-style: italic; font-size: 1.15rem; line-height: 1.65; margin-bottom: 1rem; }
.testimonial figcaption { font-weight: 700; }
.testimonial figcaption span { font-weight: 400; color: #57534e; }
@media (max-width: 575.98px) { .testimonial { padding: 1.25rem 1.25rem; } }



/* keep footer links from breaking mid-label (e.g. "Author & Speaker") */
footer a { white-space: nowrap; }




/* Turnstile's widget is at least 300px wide. The form card is (screen width - 72px) wide, so below ~372px screens the widget is
   scaled down a little to stay inside the card (no sideways scrolling). */
@media (max-width: 371px) { .cf-turnstile { transform: scale(.95); transform-origin: 0 0; margin-bottom: -4px; } }
@media (max-width: 340px) { .cf-turnstile { transform: scale(.82); margin-bottom: -12px; } }