/* ==========================================================================
   KC Window Art Co. — Brand Design System
   Playful, warm, vibrant — professional enough to trust. Image-forward,
   lots of white space, mobile-first. Built for speed (no page builder).
   Prefix: .kc-  ·  Tokens under :root
   ========================================================================== */

:root {
  /* --- Brand color (creative purple anchor + warm accents; provisional
         until the artist's final logo/colors land) --- */
  --kc-purple:       #6A4C93;
  --kc-purple-dark:  #4E3670;
  --kc-purple-deep:  #2E1E47;  /* dark sections / footer */
  --kc-purple-light: #8A6BB1;
  --kc-purple-tint:  #F3EEFA;  /* pale lavender section bg */

  --kc-coral:        #FF6B4A;  /* warm primary CTA */
  --kc-coral-dark:   #E8543A;
  --kc-yellow:       #FFC24B;  /* sunny secondary accent */
  --kc-teal:         #2FBFA0;  /* playful accent / season tags */
  --kc-pink:         #FF5CA8;  /* playful accent / season tags */

  /* --- Ink & surfaces --- */
  --kc-ink:    #2A2340;  /* headings */
  --kc-body:   #4C4661;  /* body copy */
  --kc-muted:  #7C7690;  /* secondary text */
  --kc-paper:  #FFFFFF;
  --kc-cream:  #FBF8F3;  /* warm off-white alt bg */
  --kc-line:   #EAE4F2;  /* hairlines */

  /* --- Type --- */
  --kc-font-display: 'Caveat', 'Segoe Script', cursive;   /* hand-lettered accent */
  --kc-font: 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  /* --- Layout --- */
  --kc-container: 1180px;
  --kc-container-narrow: 780px;
  --kc-gutter: clamp(1.25rem, 5vw, 2.5rem);
  --kc-section-y: clamp(3.5rem, 9vw, 7rem);

  /* --- Form language --- */
  --kc-radius:    14px;
  --kc-radius-lg: 24px;
  --kc-radius-pill: 999px;
  --kc-shadow:    0 10px 30px rgba(46, 30, 71, 0.10);
  --kc-shadow-lg: 0 24px 60px rgba(46, 30, 71, 0.18);
  --kc-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ==========================================================================
   Base typography
   ========================================================================== */
body {
  font-family: var(--kc-font);
  color: var(--kc-body);
  font-size: 1.0625rem;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6,
.entry-title, .site-title {
  font-family: var(--kc-font);
  color: var(--kc-ink);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.01em;
}

h1 { font-size: clamp(2.25rem, 5.5vw, 3.75rem); }
h2 { font-size: clamp(1.85rem, 4vw, 2.85rem); }
h3 { font-size: clamp(1.35rem, 2.4vw, 1.7rem); }

a { color: var(--kc-purple); }
a:hover { color: var(--kc-coral); }

/* Header brand wordmark until a logo image is supplied */
.site-title,
.site-title a { color: var(--kc-purple-dark) !important; font-weight: 800; letter-spacing: -0.02em; }

/* ==========================================================================
   Layout primitives
   ========================================================================== */
.kc-container { max-width: var(--kc-container); margin-inline: auto; padding-inline: var(--kc-gutter); }
.kc-narrow    { max-width: var(--kc-container-narrow); margin-inline: auto; }
.kc-section   { padding-block: var(--kc-section-y); }
.kc-section--tint  { background: var(--kc-purple-tint); }
.kc-section--cream { background: var(--kc-cream); }
.kc-section--deep  { background: var(--kc-purple-deep); color: #E9E3F3; }
.kc-section--deep h1, .kc-section--deep h2, .kc-section--deep h3 { color: #fff; }
.kc-center { text-align: center; }

/* Hand-lettered accent line above headings */
.kc-kicker {
  font-family: var(--kc-font-display);
  font-size: clamp(1.5rem, 3.5vw, 2.1rem);
  color: var(--kc-coral);
  font-weight: 700;
  line-height: 1;
  display: inline-block;
  margin-bottom: .35rem;
  transform: rotate(-2deg);
}
.kc-section--deep .kc-kicker { color: var(--kc-yellow); }

.kc-lead { font-size: clamp(1.05rem, 1.6vw, 1.3rem); color: var(--kc-muted); max-width: 44ch; }
.kc-center .kc-lead { margin-inline: auto; }

/* ==========================================================================
   Buttons / CTAs
   ========================================================================== */
.kc-btn {
  display: inline-flex; align-items: center; gap: .55em;
  font-family: var(--kc-font); font-weight: 700; font-size: 1.05rem;
  line-height: 1; text-decoration: none;
  padding: 1.05em 1.9em; border-radius: var(--kc-radius-pill);
  border: 2px solid transparent; cursor: pointer;
  transition: transform .25s var(--kc-ease), box-shadow .25s var(--kc-ease), background-color .2s, color .2s;
  will-change: transform;
}
.kc-btn--primary { background: var(--kc-coral); color: #fff; box-shadow: 0 12px 24px rgba(255,107,74,.35); }
.kc-btn--primary:hover { background: var(--kc-coral-dark); color: #fff; transform: translateY(-3px); box-shadow: 0 18px 32px rgba(255,107,74,.45); }
.kc-btn--purple { background: var(--kc-purple); color: #fff; }
.kc-btn--purple:hover { background: var(--kc-purple-dark); color: #fff; transform: translateY(-3px); }
.kc-btn--ghost { background: transparent; color: var(--kc-purple-dark); border-color: var(--kc-purple-light); }
.kc-btn--ghost:hover { background: var(--kc-purple); color: #fff; border-color: var(--kc-purple); transform: translateY(-3px); }
.kc-btn--lg { font-size: 1.18rem; padding: 1.15em 2.3em; }
.kc-section--deep .kc-btn--ghost { color: #fff; border-color: rgba(255,255,255,.5); }

/* Turn the "Get a Free Quote" nav item into a button */
.main-header-menu .menu-item.kc-nav-cta > a,
.ast-menu-toggle + .main-header-menu .kc-nav-cta > a {
  color: #fff !important; background: var(--kc-coral);
  border-radius: var(--kc-radius-pill); padding: .55em 1.35em !important;
  margin-left: .4rem; transition: background-color .2s, transform .2s;
}
.main-header-menu .menu-item.kc-nav-cta > a:hover { background: var(--kc-coral-dark); transform: translateY(-2px); }

/* ==========================================================================
   Cards & grids (gallery, why-it-works, pricing, seasons)
   ========================================================================== */
.kc-grid { display: grid; gap: clamp(1.1rem, 2.5vw, 1.8rem); }
.kc-grid--3 { grid-template-columns: repeat(3, 1fr); }
.kc-grid--2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 921px) { .kc-grid--3 { grid-template-columns: 1fr; } .kc-grid--2 { grid-template-columns: 1fr; } }

.kc-card {
  background: var(--kc-paper); border-radius: var(--kc-radius-lg);
  box-shadow: var(--kc-shadow); overflow: hidden;
  transition: transform .3s var(--kc-ease), box-shadow .3s var(--kc-ease);
}
.kc-card:hover { transform: translateY(-6px); box-shadow: var(--kc-shadow-lg); }
.kc-card__body { padding: clamp(1.4rem, 3vw, 2rem); }

/* Playful emoji/icon token for feature points */
.kc-feature__icon {
  font-size: 2.4rem; line-height: 1; display: inline-block; margin-bottom: .6rem;
}

/* Rounded, art-forward images */
.kc-img { display: block; width: 100%; height: auto; border-radius: var(--kc-radius-lg); }

/* Season tag chips */
.kc-tag {
  display: inline-block; font-weight: 600; font-size: .82rem;
  padding: .3em .9em; border-radius: var(--kc-radius-pill);
  background: var(--kc-purple-tint); color: var(--kc-purple-dark);
}

/* ==========================================================================
   Utilities
   ========================================================================== */
.kc-mt-0 { margin-top: 0; }
.kc-stack > * + * { margin-top: 1.1rem; }
.kc-cta-row { display: flex; flex-wrap: wrap; gap: .9rem; }
.kc-center .kc-cta-row { justify-content: center; }

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .kc-btn, .kc-card, .main-header-menu .menu-item.kc-nav-cta > a { transition: none; }
  .kc-btn:hover, .kc-card:hover { transform: none; }
}

/* ==========================================================================
   Photo placeholders (until founder's real photos land — clearly labelled)
   ========================================================================== */
.kc-ph {
  position: relative; display: flex; align-items: center; justify-content: center;
  text-align: center; padding: 2rem; min-height: 220px;
  border-radius: var(--kc-radius-lg); overflow: hidden;
  background: linear-gradient(135deg, var(--kc-purple-light), var(--kc-purple) 60%, var(--kc-coral));
  color: #fff;
}
.kc-ph__label { font-weight: 600; font-size: .9rem; letter-spacing: .02em; opacity: .95; text-shadow: 0 1px 8px rgba(0,0,0,.25); }
.kc-ph--tall { min-height: 420px; }
.kc-ph--art  { background: linear-gradient(135deg, #7E5BB0, #FF6B4A 55%, #FFC24B); }
.kc-ph--paint{ background: linear-gradient(160deg, var(--kc-purple-deep), var(--kc-purple) 70%, var(--kc-pink)); }

/* Before/after pair */
.kc-ba { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; border-radius: var(--kc-radius-lg); overflow: hidden; }
.kc-ba .kc-ph { border-radius: 0; min-height: 180px; }
.kc-ba__tag { position: absolute; top: .6rem; left: .6rem; font-size: .72rem; font-weight: 700;
  background: rgba(0,0,0,.45); color:#fff; padding:.2em .7em; border-radius: var(--kc-radius-pill); letter-spacing:.04em; }

/* ==========================================================================
   HERO
   ========================================================================== */
.kc-hero { background: radial-gradient(1200px 600px at 15% -10%, var(--kc-purple-tint), #fff 60%); }
.kc-hero__grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; }
.kc-hero h1 { margin: .2rem 0 .6rem; }
.kc-hero__sub { font-size: clamp(1.05rem, 1.7vw, 1.28rem); color: var(--kc-body); max-width: 34ch; }
.kc-hero__trust { margin-top: 1.4rem; font-weight: 600; color: var(--kc-purple-dark); display: flex; align-items: center; gap: .6rem; }
.kc-hero__trust::before { content: "★"; color: var(--kc-yellow); font-size: 1.2rem; }
@media (max-width: 921px) {
  .kc-hero__grid { grid-template-columns: 1fr; }
  .kc-hero__media { order: -1; }
}

/* ==========================================================================
   VALUE BAR
   ========================================================================== */
.kc-valuebar { background: var(--kc-purple-deep); }
.kc-valuebar__row { display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem 2rem;
  padding-block: 1.15rem; color: #EDE7F6; font-weight: 600; font-size: .98rem; }
.kc-valuebar__item { display: inline-flex; align-items: center; gap: .5rem; }
.kc-valuebar__item::before { content: "●"; color: var(--kc-yellow); font-size: .7rem; }

/* ==========================================================================
   PROBLEM / OPPORTUNITY
   ========================================================================== */
.kc-problem { max-width: 60ch; margin-inline: auto; text-align: center; }
.kc-problem p { font-size: clamp(1.08rem, 1.7vw, 1.3rem); color: var(--kc-body); }
.kc-problem strong { color: var(--kc-ink); }

/* ==========================================================================
   SEASONAL PLAN TEASER
   ========================================================================== */
.kc-teaser { background:
   linear-gradient(0deg, rgba(46,30,71,.86), rgba(46,30,71,.86)),
   linear-gradient(135deg, var(--kc-purple), var(--kc-coral));
  color: #fff; border-radius: var(--kc-radius-lg); padding: clamp(2rem, 5vw, 3.5rem);
  text-align: center; box-shadow: var(--kc-shadow-lg); }
.kc-teaser h2 { color: #fff; }
.kc-teaser p { color: #EAE1F5; max-width: 52ch; margin-inline: auto; }

/* ==========================================================================
   PORTFOLIO PREVIEW
   ========================================================================== */
.kc-work__meta { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin-top: .9rem; }

/* ==========================================================================
   FOUNDER TRUST BLOCK
   ========================================================================== */
.kc-founder__grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(1.5rem, 4vw, 3rem); align-items: center; }
.kc-founder p { font-size: clamp(1.05rem, 1.6vw, 1.25rem); }
@media (max-width: 921px) { .kc-founder__grid { grid-template-columns: 1fr; } }

/* ==========================================================================
   FINAL CTA
   ========================================================================== */
.kc-finalcta { text-align: center; }
.kc-finalcta h2 { max-width: 20ch; margin-inline: auto; }