/* ==========================================================================
   Katie Bernard · UGC portfolio
   Every value here comes from reference/prototype.html. Do not change values
   without Katie asking; colors and fonts are set once in :root.
   ========================================================================== */

:root {
  /* Palette */
  --c-forest: #2F3B1D;       /* primary dark green */
  --c-ink: #1F2A14;          /* body text */
  --c-sage-bg: #EDF0E1;      /* page background */
  --c-cream: #F7F5EC;        /* light sections, nav */
  --c-white: #FFFFFF;
  --c-rust: #9A4A22;         /* accent */
  --c-peach: #E8B48A;        /* accent on dark */
  --c-line: #D9DEC9;         /* borders */
  --c-input-line: #D3D9C2;
  --c-muted: #4F5A3C;
  --c-muted-2: #3E4830;
  --c-brand-text: #5B6648;
  --c-icon-bg: #E2E7D2;
  --c-chip-line: #C9D2B4;

  /* Fonts */
  --f-display: 'Fraunces', serif;
  --f-body: 'Manrope', system-ui, sans-serif;

  /* Layout */
  --max-w: 1280px;
  --gutter: 32px;
}

/* ---------- Base (from the prototype's <style> block) ---------- */
body { margin: 0; background: var(--c-sage-bg); }
html { scroll-behavior: smooth; }
a { color: var(--c-forest); }
a:hover { color: var(--c-rust); }
.kb-bullets li::marker { color: var(--c-rust); }
.kb-nav a { text-decoration: none; }
.kb-nav a:hover { text-decoration: underline; text-underline-offset: 6px; }
.kb-input { font: inherit; font-size: 15px; color: var(--c-ink); background: var(--c-sage-bg); border: 1px solid var(--c-input-line); border-radius: 12px; padding: 14px 16px; width: 100%; box-sizing: border-box; }
.kb-input:focus { outline: 2px solid var(--c-forest); outline-offset: 1px; }

.kb-page { width: 100%; min-height: 100%; background: var(--c-sage-bg); color: var(--c-ink); font-family: var(--f-body); font-size: 16px; line-height: 1.55; }

/* ---------- Nav ---------- */
.kb-header { position: sticky; top: 0; z-index: 20; background: var(--c-cream); border-bottom: 1px solid var(--c-line); }
.kb-nav { max-width: var(--max-w); margin: 0 auto; padding: 16px var(--gutter); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 32px; }
.kb-nav__brand, .kb-nav__brand:hover { font-family: var(--f-display); font-size: 24px; font-weight: 600; color: var(--c-forest); }
.kb-nav__links { display: flex; flex-wrap: wrap; gap: 8px 28px; font-size: 13px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; }
/* Menu button: only shown on phones/tablets (see "Responsive" at the bottom) */
.kb-nav__toggle { display: none; }

/* ---------- Handle band ---------- */
.kb-band { background: var(--c-forest); color: var(--c-cream); }
.kb-band__inner { max-width: var(--max-w); margin: 0 auto; padding: 22px var(--gutter); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; }
.kb-band__handle-wrap { display: flex; align-items: center; gap: 14px; }
.kb-band__handle { font-family: var(--f-display); font-weight: 800; font-size: 40px; letter-spacing: 0.02em; line-height: 1; }
.kb-band__accent { color: var(--c-peach); }
.kb-band__icons { display: flex; gap: 14px; }
.kb-icon-btn { width: 48px; height: 48px; border-radius: 50%; background: var(--c-cream); display: flex; align-items: center; justify-content: center; }

/* ---------- Hero ---------- */
.kb-hero { position: relative; overflow: hidden; }
.kb-hero__inner { position: relative; z-index: 1; max-width: var(--max-w); margin: 0 auto; padding: 72px var(--gutter) 96px; display: flex; flex-wrap: wrap; gap: 48px; align-items: center; }
.kb-hero__left { flex: 1 1 520px; min-width: 0; display: flex; flex-direction: column; gap: 28px; }
.kb-hero__title { margin: 0; font-family: var(--f-display); font-weight: 800; font-size: clamp(48px, 7vw, 88px); line-height: 1; color: var(--c-forest); }
.kb-hero__subtitle { margin: 14px 0 0; font-family: var(--f-display); font-style: italic; font-size: 26px; color: var(--c-rust); }
.kb-card { background: var(--c-white); border-radius: 28px; box-shadow: 0 1px 0 var(--c-line); }
.kb-hero__card { padding: 28px 32px; }
.kb-hero__bullets { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 10px; font-size: 18px; }
.kb-hero__tags { margin: 20px 0 0; padding-top: 16px; border-top: 1px solid var(--c-line); font-size: 14px; color: var(--c-muted); }
.kb-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 12px; }
.kb-stat { background: var(--c-cream); border: 1px solid var(--c-line); border-radius: 16px; padding: 14px 16px; }
.kb-stat__value { font-family: var(--f-display); font-weight: 800; font-size: 28px; color: var(--c-forest); }
.kb-stat__label { font-size: 13px; color: var(--c-muted); }
.kb-hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }
.kb-btn-primary, .kb-btn-primary:hover { display: inline-flex; align-items: center; min-height: 52px; padding: 0px 34px; border-radius: 999px; background: var(--c-forest); color: var(--c-cream); font-family: var(--f-display); font-size: 20px; text-decoration: none; }
.kb-hero__email { font-weight: 600; text-underline-offset: 5px; }
.kb-hero__right { flex: 1 1 440px; min-width: 0; position: relative; display: flex; justify-content: center; align-items: flex-end; min-height: 640px; }
.kb-hero__photo { position: relative; display: block; width: 490px; max-width: 100%; height: auto; filter: drop-shadow(0 18px 28px rgba(47,59,29,0.22)); }

/* ---------- Shared headings ---------- */
.kb-h2 { margin: 0; font-family: var(--f-display); font-weight: 600; font-size: 52px; line-height: 1.05; }
.kb-h2--forest { color: var(--c-forest); }
.kb-section-head { text-align: center; display: flex; flex-direction: column; gap: 14px; align-items: center; }
.kb-lede { margin: 0; font-family: var(--f-display); font-style: italic; font-size: 20px; color: var(--c-forest); }

/* ---------- Video grids (Paid Ads = dark, Organic = light) ---------- */
.kb-work--dark { background: var(--c-forest); color: var(--c-cream); }
.kb-work--light { background: var(--c-cream); }
.kb-work__inner { max-width: var(--max-w); margin: 0 auto; padding: 88px var(--gutter); display: flex; flex-direction: column; gap: 40px; }
.kb-work__head { text-align: center; }
.kb-eyebrow { margin: 0 0 8px; font-size: 13px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; }
.kb-work--dark .kb-eyebrow { color: var(--c-peach); }
.kb-work--light .kb-eyebrow { color: var(--c-rust); }
.kb-work--light .kb-work__title { color: var(--c-forest); }
.kb-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 22px; }

.kb-vcard { display: flex; flex-direction: column; gap: 12px; }
.kb-vcard__brand { min-height: 22px; text-align: center; font-family: var(--f-display); font-size: 20px; font-weight: 600; }
.kb-work--dark .kb-vcard__brand { color: var(--c-cream); }
.kb-work--light .kb-vcard__brand { color: var(--c-forest); }
.kb-vcard__media { box-sizing: border-box; /* matches the prototype's <button> sizing */ position: relative; width: 100%; aspect-ratio: 9 / 16; border-radius: 16px; border: 3px solid; background: var(--placeholder); display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; }
.kb-work--dark .kb-vcard__media { border-color: var(--c-cream); }
.kb-work--light .kb-vcard__media { border-color: var(--c-white); box-shadow: 0 10px 24px rgba(47,59,29,0.14); }
/* Real video inside the card frame (same 9:16 shape, radius, border, shadow) */
.kb-vcard__media--video { overflow: hidden; cursor: default; }
.kb-vcard__media--placeholder { cursor: default; }
.kb-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; background: var(--placeholder); }
.kb-vcard__play { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: transparent; border: 0; padding: 0; margin: 0; cursor: pointer; }
.kb-vcard__play:focus-visible { outline: 3px solid var(--c-peach); outline-offset: -6px; border-radius: 12px; }
.kb-vcard.is-playing .kb-vcard__play { display: none; }
.kb-play { width: 56px; height: 56px; border-radius: 50%; background: rgba(255,255,255,0.92); display: flex; align-items: center; justify-content: center; }
.kb-vcard__label { border-radius: 999px; color: var(--c-ink); padding: 9px 12px; font-size: 13px; line-height: 1.3; text-align: center; }
.kb-work--dark .kb-vcard__label { background: var(--c-cream); }
.kb-work--light .kb-vcard__label { border: 1.5px solid var(--c-forest); background: var(--c-white); }

/* ---------- Brands ---------- */
.kb-brands { background: var(--c-rust); color: var(--c-white); }
.kb-brands__inner { max-width: var(--max-w); margin: 0 auto; padding: 72px var(--gutter); display: flex; flex-direction: column; align-items: center; gap: 32px; }
.kb-brands__title { margin: 0; font-family: var(--f-display); font-weight: 600; font-size: 40px; text-align: center; }
.kb-brands__list { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; }
.kb-brand { width: 96px; height: 96px; border-radius: 50%; background: var(--c-white); border: 3px solid var(--c-cream); display: flex; align-items: center; justify-content: center; text-align: center; padding: 8px; box-sizing: border-box; color: var(--c-brand-text); font-size: 12px; font-weight: 700; }
/* Logo inside each brand circle: contained in a box ~60% of the 96px circle */
.kb-brand .kb-logo { display: block; width: 58px; height: 58px; object-fit: contain; }

/* ---------- Services ---------- */
.kb-services { background: var(--c-cream); }
.kb-services__inner { max-width: var(--max-w); margin: 0 auto; padding: 96px var(--gutter); display: flex; flex-direction: column; gap: 48px; }
.kb-services__cols { display: flex; flex-wrap: wrap; gap: 28px; align-items: stretch; }
.kb-services__card { flex: 1 1 560px; min-width: 0; background: var(--c-white); border-radius: 28px; padding: 40px; box-sizing: border-box; display: flex; flex-direction: column; gap: 30px; box-shadow: 0 1px 0 var(--c-line); }
.kb-services__h3 { margin: 0; font-family: var(--f-display); font-weight: 600; font-size: 34px; color: var(--c-forest); }
.kb-service { display: flex; gap: 18px; align-items: flex-start; }
.kb-service__icon { flex: 0 0 48px; height: 48px; border-radius: 50%; background: var(--c-icon-bg); display: flex; align-items: center; justify-content: center; }
.kb-service__title { margin: 0 0 8px; font-family: var(--f-display); font-weight: 800; font-size: 22px; color: var(--c-forest); }
.kb-service__bullets { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; }

.kb-packages { flex: 1 1 400px; min-width: 0; background: var(--c-forest); color: var(--c-cream); border-radius: 28px; padding: 40px; box-sizing: border-box; display: flex; flex-direction: column; gap: 28px; }
.kb-packages__h3 { margin: 0 0 16px; font-family: var(--f-display); font-weight: 600; font-size: 34px; }
.kb-packages__list { display: flex; flex-direction: column; gap: 14px; }
.kb-package { margin: 0; padding-bottom: 14px; border-bottom: 1px solid rgba(247,245,236,0.2); }
.kb-package:last-child { padding-bottom: 0; border-bottom: none; }
.kb-package__title { display: block; font-family: var(--f-display); font-size: 20px; color: var(--c-peach); }
.kb-addons__h3 { margin: 0 0 14px; font-family: var(--f-display); font-weight: 600; font-size: 26px; }
.kb-addons { display: flex; flex-wrap: wrap; gap: 8px; font-size: 13px; font-weight: 600; }
.kb-addon { border: 1.5px solid var(--c-chip-line); border-radius: 999px; padding: 7px 14px; }
.kb-btn-light, .kb-btn-light:hover { margin-top: auto; display: inline-flex; align-self: flex-start; align-items: center; min-height: 48px; padding: 0 28px; border-radius: 999px; background: var(--c-cream); color: var(--c-forest); font-family: var(--f-display); font-size: 18px; text-decoration: none; }

/* ---------- Process ---------- */
.kb-process { background: var(--c-sage-bg); }
.kb-process__inner { max-width: 1180px; margin: 0 auto; padding: 96px var(--gutter); display: flex; flex-direction: column; gap: 56px; }
.kb-process__title { margin: 0; font-family: var(--f-display); font-weight: 600; font-size: 60px; letter-spacing: 0.06em; color: var(--c-forest); }
.kb-process__lede { max-width: 680px; }
.kb-process__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(420px, 1fr)); gap: 48px 64px; }
.kb-step { display: flex; gap: 24px; align-items: flex-start; }
.kb-step__icon { flex: 0 0 104px; height: 104px; border-radius: 24px; background: var(--c-white); display: flex; align-items: center; justify-content: center; }
.kb-step__title { margin: 0 0 6px; font-family: var(--f-display); font-weight: 800; font-size: 26px; color: var(--c-forest); }
.kb-step__text { margin: 0; color: var(--c-forest); }

/* ---------- Contact ---------- */
.kb-contact { background: var(--c-cream); }
.kb-contact__inner { max-width: var(--max-w); margin: 0 auto; padding: 96px var(--gutter); display: flex; flex-wrap: wrap; gap: 56px; align-items: flex-start; }
.kb-contact__left { flex: 1 1 420px; min-width: 0; display: flex; flex-direction: column; gap: 22px; }
.kb-contact__eyebrow { margin: 0; font-size: 13px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--c-rust); }
.kb-contact__title { margin: 0; font-family: var(--f-display); font-weight: 400; font-size: 60px; line-height: 1.05; color: var(--c-forest); }
.kb-contact__intro { margin: 0; font-size: 18px; color: var(--c-muted-2); }
.kb-contact__details { display: flex; flex-direction: column; gap: 14px; margin-top: 8px; }
.kb-detail { display: flex; align-items: center; gap: 14px; }
.kb-detail__icon { width: 44px; height: 44px; border-radius: 50%; background: var(--c-icon-bg); display: flex; align-items: center; justify-content: center; }

.kb-polaroid { position: relative; margin: 24px 0 0 12px; align-self: flex-start; width: 300px; max-width: 80%; background: var(--c-white); padding: 14px 14px 44px; box-sizing: border-box; transform: rotate(-3deg); box-shadow: 0 14px 30px rgba(47,59,29,0.16); }
.kb-polaroid__tape { position: absolute; top: -14px; left: 50%; width: 110px; height: 28px; transform: translateX(-50%) rotate(4deg); background: rgba(201,210,180,0.85); }
.kb-polaroid__img { display: block; width: 100%; height: auto; }
.kb-polaroid__caption { position: absolute; left: 0; right: 0; bottom: 10px; text-align: center; font-family: var(--f-display); font-style: italic; font-size: 18px; color: var(--c-forest); }

.kb-form { flex: 1 1 520px; min-width: 0; background: var(--c-white); border-radius: 28px; padding: 40px; box-sizing: border-box; display: flex; flex-direction: column; gap: 20px; box-shadow: 0 1px 0 var(--c-line); }
.kb-form__row { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; }
.kb-label { display: flex; flex-direction: column; gap: 8px; font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--c-muted); }
.kb-form__submit { min-height: 56px; border: none; border-radius: 999px; background: var(--c-forest); color: var(--c-cream); font: inherit; font-size: 14px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; cursor: pointer; }
.kb-form__submit:disabled { opacity: 0.7; cursor: progress; }
.kb-form__status { margin: 0; font-size: 14px; color: var(--c-rust); }
.kb-form__status a { color: inherit; font-weight: 600; }
/* Shown in place of the form after it's sent: same card as the form */
.kb-form-success { flex: 1 1 520px; min-width: 0; background: var(--c-white); border-radius: 28px; padding: 40px; box-sizing: border-box; display: flex; flex-direction: column; gap: 12px; box-shadow: 0 1px 0 var(--c-line); outline: none; scroll-margin-top: 120px; /* stay clear of the sticky nav */ }
.kb-form-success__title { margin: 0; font-family: var(--f-display); font-weight: 600; font-size: 34px; color: var(--c-forest); }
.kb-form-success__text { margin: 0; font-size: 18px; color: var(--c-muted-2); }
.kb-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

/* ---------- Footer ---------- */
.kb-footer { background: var(--c-forest); color: var(--c-cream); }
.kb-footer__inner { max-width: var(--max-w); margin: 0 auto; padding: 40px var(--gutter); display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 16px; }
.kb-footer__name { font-family: var(--f-display); font-size: 26px; }
.kb-footer__meta { font-size: 14px; color: var(--c-chip-line); }

/* ==========================================================================
   Responsive. Desktop (above 768px) is exactly the prototype; nothing above
   this line changes. These rules only adapt the layout for tablets and phones.
   ========================================================================== */

/* Process steps: never wider than the screen (no effect on desktop) */
.kb-process__grid { grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr)); }

@media (max-width: 768px) {
  /* --- Nav collapses to a menu button --- */
  .kb-nav { flex-wrap: nowrap; }
  .js .kb-nav__toggle { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin-right: -8px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--c-forest); cursor: pointer; }
  .kb-nav__toggle:focus-visible { outline: 2px solid var(--c-forest); outline-offset: 2px; }
  .kb-nav__bars, .kb-nav__bars::before, .kb-nav__bars::after { display: block; width: 22px; height: 2px; border-radius: 2px; background: currentColor; transition: transform 0.2s ease, background-color 0.2s ease; }
  .kb-nav__bars { position: relative; }
  .kb-nav__bars::before, .kb-nav__bars::after { content: ""; position: absolute; left: 0; }
  .kb-nav__bars::before { top: -7px; }
  .kb-nav__bars::after { top: 7px; }
  .kb-nav__toggle[aria-expanded="true"] .kb-nav__bars { background: transparent; }
  .kb-nav__toggle[aria-expanded="true"] .kb-nav__bars::before { transform: translateY(7px) rotate(45deg); }
  .kb-nav__toggle[aria-expanded="true"] .kb-nav__bars::after { transform: translateY(-7px) rotate(-45deg); }
  .js .kb-nav__links { display: none; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; flex-wrap: nowrap; gap: 0; padding: 8px var(--gutter) 16px; background: var(--c-cream); border-bottom: 1px solid var(--c-line); box-shadow: 0 12px 24px rgba(47,59,29,0.12); }
  .js .kb-nav__links.is-open { display: flex; }
  .js .kb-nav__links a { padding: 14px 0; border-bottom: 1px solid var(--c-line); }
  .js .kb-nav__links a:last-child { border-bottom: none; }

  /* --- Handle band fits the screen --- */
  .kb-band__handle { font-size: clamp(26px, 8vw, 40px); }

  /* --- Hero: no empty gap above the photo --- */
  .kb-hero__right { min-height: 0; }

  /* --- Video grids become a horizontal swipe row --- */
  .kb-grid { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: min(240px, 66%); overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 var(--gutter); margin: 0 calc(-1 * var(--gutter)); padding: 0 var(--gutter) 16px; overscroll-behavior-x: contain; scrollbar-width: thin; }
  .kb-grid > .kb-vcard { scroll-snap-align: start; }
  .kb-work--dark .kb-grid { scrollbar-color: rgba(247,245,236,0.4) transparent; }
  .kb-work--light .kb-grid { scrollbar-color: rgba(47,59,29,0.3) transparent; }
}

@media (max-width: 480px) {
  :root { --gutter: 20px; }
  .kb-hero__inner { padding-top: 48px; padding-bottom: 64px; }
  .kb-hero__subtitle { font-size: 22px; }
  .kb-hero__card { padding: 24px; }
  .kb-h2 { font-size: 40px; }
  .kb-work__inner, .kb-services__inner, .kb-process__inner, .kb-contact__inner { padding-top: 64px; padding-bottom: 64px; }
  .kb-brands__inner { padding-top: 56px; padding-bottom: 56px; }
  .kb-brands__title { font-size: 32px; }
  .kb-brands__list { gap: 12px; }
  .kb-brand { width: 88px; height: 88px; }
  .kb-brand .kb-logo { width: 53px; height: 53px; }
  .kb-services__card, .kb-packages, .kb-form, .kb-form-success { padding: 24px; }
  .kb-services__h3, .kb-packages__h3 { font-size: 30px; }
  .kb-process__title { font-size: 44px; letter-spacing: 0.04em; }
  .kb-process__grid { gap: 36px; }
  .kb-step { gap: 18px; }
  .kb-step__icon { flex-basis: 72px; height: 72px; border-radius: 18px; }
  .kb-step__icon svg { width: 36px; height: 36px; }
  .kb-step__title { font-size: 22px; }
  .kb-contact__title { font-size: 44px; }
  .kb-contact__inner { gap: 40px; }
  .kb-detail { overflow-wrap: anywhere; }
}