/* ==========================================================================
   KC Smokey Studio: "Who we build for" + featured case study
   ========================================================================== */

/* ---------- Who we build for ---------- */
.who {
  background:
    radial-gradient(45% 55% at 100% 100%, rgb(227 93 31 / .22), transparent 70%),
    radial-gradient(40% 50% at 0% 0%, rgb(99 197 211 / .1), transparent 70%),
    var(--smoke-900);
}
.who-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }
.who-card {
  position: relative; overflow: hidden;
  padding: clamp(1.7rem, 1.2rem + 2vw, 3rem); border-radius: var(--radius);
  background: linear-gradient(180deg, rgb(245 236 221 / .07), rgb(245 236 221 / .02));
  border: 1px solid rgb(245 236 221 / .1);
  transition: border-color .4s, transform .5s var(--ease-out);
}
.who-card:hover { border-color: rgb(240 112 58 / .6); transform: translateY(-4px); }
.who-card::after {
  content: ""; position: absolute; right: -60px; bottom: -60px; width: 220px; height: 220px; border-radius: 50%;
  background: radial-gradient(circle, rgb(240 112 58 / .22), transparent 70%); pointer-events: none;
}
.who-card--np::after { background: radial-gradient(circle, rgb(99 197 211 / .2), transparent 70%); }
.who-icon { width: 64px; height: 64px; border-radius: 18px; display: grid; place-items: center; margin-bottom: 1.6rem; background: rgb(240 112 58 / .14); color: var(--ember-hot); }
.who-card--np .who-icon { background: rgb(99 197 211 / .14); color: var(--fountain); }
.who-icon svg { width: 34px; height: 34px; }
.who-card h3 { font-size: var(--step-3); font-weight: 780; margin-bottom: .8rem; font-stretch: 92%; }
.who-card p { color: rgb(245 236 221 / .8); font-size: var(--step-1); line-height: 1.5; max-width: 32rem; }
.who-card .tags li { background: rgb(245 236 221 / .08); color: var(--cream); border: 1px solid rgb(245 236 221 / .12); }
.who-note {
  display: flex; align-items: center; justify-content: center; gap: .6rem; margin-top: 2rem; text-align: center;
  color: rgb(245 236 221 / .78); font-weight: 550;
}
.who-note svg { width: 20px; height: 20px; flex: none; color: var(--fountain); }
@media (max-width: 800px) { .who-grid { grid-template-columns: 1fr; } .who-note { justify-content: flex-start; text-align: left; } }

/* ---------- Featured case study ---------- */
.case {
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(2rem, 1rem + 4vw, 4.5rem); align-items: center;
  padding: clamp(1.25rem, .8rem + 2.5vw, 3rem); border-radius: calc(var(--radius) + 8px);
  background:
    radial-gradient(70% 80% at 0% 100%, rgb(227 93 31 / .28), transparent 70%),
    radial-gradient(50% 60% at 100% 0%, rgb(244 181 68 / .12), transparent 70%),
    var(--smoke-800);
  border: 1px solid rgb(245 236 221 / .1);
  box-shadow: 0 40px 80px -50px rgb(0 0 0 / .9);
}
.case-media { position: relative; padding: 0 9% 9% 0; }
.case-browser {
  border-radius: 16px; overflow: hidden; background: var(--cream-200);
  box-shadow: 0 30px 60px -24px rgb(0 0 0 / .75), 0 0 0 1px rgb(245 236 221 / .12);
  transition: transform .8s var(--ease-out);
}
.case-browser .browser-bar span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.case-browser img { display: block; width: 100%; height: auto; }
.case-phone {
  position: absolute; right: 0; bottom: 0; width: 26%; min-width: 92px;
  padding: 7px; border-radius: 26px; background: #0b0908;
  box-shadow: 0 30px 50px -18px rgb(0 0 0 / .85), 0 0 0 1px rgb(245 236 221 / .14);
  transform: rotate(4deg); transition: transform .8s var(--ease-out);
}
.case-phone img { display: block; width: 100%; height: auto; border-radius: 19px; }
.case:hover .case-browser { transform: translateY(-4px); }
.case:hover .case-phone { transform: rotate(1deg) translateY(-10px); }
.case-kicker { font-size: var(--step--1); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--honey); }
.case-copy h3 { font-size: var(--step-3); font-weight: 780; font-stretch: 92%; margin: .8rem 0 1rem; }
.case-lede { font-size: var(--step-1); line-height: 1.5; color: rgb(245 236 221 / .85); }
.case-lede strong { color: var(--cream); font-weight: 650; }
.case-label { margin-top: 1.6rem; font-size: .8rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ash); }
.case-list { list-style: none; padding: 0; margin: .8rem 0 2rem; display: grid; gap: .55rem; }
.case-list li { display: flex; gap: .6rem; align-items: flex-start; color: rgb(245 236 221 / .85); }
.case-list svg { width: 18px; height: 18px; flex: none; margin-top: .25em; color: var(--fountain); }
.more-work { margin-top: 2rem; text-align: center; color: var(--ash); font-weight: 550; }
.more-work a { color: var(--ember-hot); font-weight: 650; text-underline-offset: 4px; }
@media (max-width: 960px) {
  .case { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .case-media { padding: 0 12% 14% 0; }
  .case-phone { width: 34%; border-radius: 18px; padding: 5px; }
  .case-phone img { border-radius: 13px; }
  .case-copy .btn { width: 100%; }
}

/* ---------- Pricing ---------- */
.founding {
  position: relative; overflow: hidden; isolation: isolate;
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 1.5rem clamp(1.5rem, 1rem + 2vw, 3rem);
  padding: clamp(1.5rem, 1rem + 2.5vw, 3rem); border-radius: calc(var(--radius) + 4px); margin-bottom: 1.25rem;
  background: linear-gradient(115deg, var(--honey) 0%, var(--ember-hot) 45%, var(--ember) 100%);
  color: var(--smoke-950);
  box-shadow: 0 30px 60px -30px rgb(166 58 11 / .6);
}
.founding::before {
  content: ""; position: absolute; z-index: -1; inset: 0; opacity: .35; mix-blend-mode: soft-light;
  background: repeating-linear-gradient(-45deg, rgb(255 255 255 / .35) 0 2px, transparent 2px 14px);
}
.founding-badge {
  width: clamp(96px, 8vw + 40px, 132px); aspect-ratio: 1; border-radius: 50%; display: grid; place-content: center; text-align: center;
  background: var(--smoke-950); color: var(--cream); transform: rotate(-8deg);
  box-shadow: 0 0 0 6px rgb(19 16 14 / .15);
}
.founding-badge span { font-family: var(--f-display); font-weight: 800; font-size: clamp(1.9rem, 1.2rem + 2vw, 2.6rem); letter-spacing: -.04em; line-height: .9; color: var(--honey); }
.founding-badge small { font-weight: 700; letter-spacing: .14em; text-transform: uppercase; font-size: .8rem; }
.founding-kicker { font-size: var(--step--1); font-weight: 750; letter-spacing: .1em; text-transform: uppercase; }
.founding h3 { font-size: var(--step-3); font-weight: 800; font-stretch: 90%; letter-spacing: -.03em; margin: .5rem 0 .6rem; }
.founding p:last-child { max-width: 40rem; font-weight: 500; }
.founding .btn-dark { box-shadow: 0 14px 30px -12px rgb(0 0 0 / .6); }
@media (max-width: 900px) {
  .founding { grid-template-columns: auto minmax(0, 1fr); }
  .founding .btn { grid-column: 1 / -1; justify-self: start; }
}
@media (max-width: 560px) {
  .founding { grid-template-columns: 1fr; }
  .founding .btn { width: 100%; }
}

.plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; align-items: stretch; }
.plan {
  display: flex; flex-direction: column;
  padding: clamp(1.5rem, 1.1rem + 1.5vw, 2.3rem); border-radius: var(--radius);
  background: #FFF9EF; border: 1px solid rgb(27 23 20 / .08);
  box-shadow: 0 1px 0 rgb(255 255 255 / .8) inset, 0 20px 50px -30px rgb(80 40 10 / .35);
  transition: transform .5s var(--ease-out);
}
.plan:hover { transform: translateY(-4px); }
.plan h3 { font-size: var(--step-2); font-weight: 760; }
.plan-for { margin-top: .6rem; color: var(--ink-muted); }
.plan-price {
  margin: 1.4rem 0 1.2rem; padding-bottom: 1.2rem; border-bottom: 1.5px dashed rgb(27 23 20 / .15);
  font-family: var(--f-display); font-weight: 800; font-size: clamp(2.4rem, 1.8rem + 2vw, 3.4rem); letter-spacing: -.04em; line-height: 1;
}
.plan-price span { display: block; margin-bottom: .45rem; font-family: var(--f-body); font-size: .8rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ember-text); }
.plan-list { list-style: none; padding: 0; display: grid; gap: .6rem; }
.plan-list li { display: flex; gap: .6rem; align-items: flex-start; color: var(--ink); }
.plan-list svg { width: 18px; height: 18px; flex: none; margin-top: .28em; color: var(--ember-text); }
.plan--feature { background: var(--smoke-900); color: var(--cream); border-color: transparent;
  background-image: radial-gradient(80% 60% at 100% 0%, rgb(227 93 31 / .35), transparent 70%); }
.plan--feature .plan-for { color: rgb(245 236 221 / .78); }
.plan--feature .plan-price { border-color: rgb(245 236 221 / .18); }
.plan--feature .plan-price span { color: var(--honey); }
.plan--feature .plan-list li { color: rgb(245 236 221 / .9); }
.plan--feature .plan-list svg { color: var(--fountain); }
@media (max-width: 960px) { .plans { grid-template-columns: 1fr; } }

.extras { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; margin-top: 1.25rem; }
.extra { display: flex; gap: 1.2rem; align-items: center; padding: 1.4rem 1.6rem; border-radius: var(--radius-sm); background: rgb(255 249 239 / .7); border: 1.5px solid rgb(27 23 20 / .1); }
.extra h3 { font-size: var(--step-1); font-weight: 760; letter-spacing: -.01em; }
.extra p { color: var(--ink-muted); margin-top: .25rem; }
.extra-icon { width: 52px; height: 52px; flex: none; border-radius: 14px; display: grid; place-items: center; background: var(--fountain); color: var(--smoke-950); }
.extra-icon svg { width: 28px; height: 28px; }
.extra--np .extra-icon { background: var(--ember); }
@media (max-width: 760px) { .extras { grid-template-columns: 1fr; } }

.pricing-cta { margin-top: 2.5rem; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 1rem 1.5rem; text-align: center; }
.pricing-cta p { font-family: var(--f-display); font-weight: 700; font-size: var(--step-1); letter-spacing: -.01em; }

/* ---------- Nav: 6 links need a wider breakpoint ---------- */
.brand-name, .nav-links a { white-space: nowrap; }
@media (max-width: 1080px) {
  .nav-links, .nav-cta { display: none; }
  .menu-btn { display: grid; }
}
@media (max-width: 600px) { .hero-eyebrow { letter-spacing: .04em; font-size: .7rem; padding-inline: .6rem .75rem; } }

/* Logo: raster mark from Ross's smoke-S (variant C) */
img.brand-mark { border-radius: 23%; box-shadow: 0 6px 18px -8px rgb(227 93 31 / .7); }
img.badge-mark { border-radius: 23%; }