/* KD Sites - shared styles for every public page */

:root {
    --orange: #FE9755;
    --mint: #33EFBC;
    --ink: #2B1D16;
    --ink-soft: #5C4A3F;
    --paper: #FFFDF8;
    --paper-dim: #F3EDE6;
    --footer-muted: #D2C3B6;
    --display: 'Bagel Fat One', 'Arial Rounded MT Bold', sans-serif;
    --body: 'Atkinson Hyperlegible', Verdana, system-ui, sans-serif;
}

* { box-sizing: border-box; }

/* ---------- Page transitions ---------- */

/* Cross-document view transitions: browsers without support just navigate */
@view-transition { navigation: auto; }

/* The wordmark and nav hold still while the page changes beneath them */
.wordmark { view-transition-name: wordmark; }
.site-nav { view-transition-name: site-nav; }

::view-transition-old(root) {
    animation: kd-page-out 180ms ease-in both;
}
::view-transition-new(root) {
    animation: kd-page-in 320ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

@keyframes kd-page-out {
    to { opacity: 0; transform: translateY(-12px); }
}
@keyframes kd-page-in {
    from { opacity: 0; transform: translateY(24px); }
}

@media (prefers-reduced-motion: reduce) {
    ::view-transition-group(*),
    ::view-transition-old(*),
    ::view-transition-new(*) { animation: none !important; }
}

body {
    margin: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    overflow-x: hidden;
    background: var(--paper);
    color: var(--ink);
    font-family: var(--body);
    font-size: 18px;
    line-height: 1.6;
}

main { flex: 1 0 auto; }

a {
    color: var(--ink);
    text-decoration-thickness: 2px;
    text-underline-offset: 5px;
}
a:hover { color: var(--ink-soft); }
a:focus-visible,
button:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; border-radius: 6px; }
input:focus,
textarea:focus { outline: 3px solid var(--orange); outline-offset: 3px; }

h1, h2, h3, p, ol, ul, dl, dd { margin: 0; }
img { max-width: 100%; }

.wrap {
    max-width: 1240px;
    margin: 0 auto;
    padding-left: 24px;
    padding-right: 24px;
}

.display {
    font-family: var(--display);
    font-weight: 400;
    line-height: 1;
}

.muted { color: var(--ink-soft); }
.bold { font-weight: 700; }

/* ---------- Header band ---------- */

.band { background: var(--orange); }

.site-header {
    padding-top: 18px;
    padding-bottom: 18px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.wordmark {
    font-family: var(--display);
    font-size: 28px;
    text-decoration: none;
}

.site-nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 28px;
    font-weight: 700;
    font-size: 17px;
}
.site-nav a { text-decoration: none; padding: 10px 0; }
.site-nav .pill { padding: 10px 20px; }
.site-nav a[aria-current="page"] {
    text-decoration: underline;
    text-decoration-thickness: 3px;
    text-underline-offset: 8px;
}

.wave {
    display: block;
    width: 100%;
    height: 80px;
}
.wave path { fill: var(--orange); }
.wave--mint { transform: scaleY(-1); margin-bottom: -1px; }
.wave--mint path { fill: var(--mint); }

.page-title {
    padding-top: 56px;
    padding-bottom: 48px;
}
.page-title h1 {
    font-size: clamp(52px, 6.6vw, 96px);
    line-height: 0.94;
    max-width: 14ch;
    text-wrap: balance;
}

/* ---------- Buttons ---------- */

.pill {
    display: inline-block;
    background: var(--mint);
    color: var(--ink);
    text-decoration: none;
    font: inherit;
    font-weight: 700;
    border: 3px solid var(--ink);
    border-radius: 999px;
    padding: 10px 20px;
    cursor: pointer;
}
.pill:hover { color: var(--ink); background: #5FF5CC; }
.pill--lg { font-size: 19px; padding: 16px 30px; }
.pill--md { padding: 13px 24px; }
.pill--paper { background: var(--paper); }
.pill--paper:hover { background: #FFFFFF; }
.pill:disabled { opacity: 0.6; cursor: wait; }

.self-start { align-self: start; }

/* ---------- Sections ---------- */

.section { padding-top: 96px; padding-bottom: 96px; }

.h2 { font-size: clamp(40px, 4.6vw, 60px); text-wrap: balance; }
.h2--sm { font-size: clamp(36px, 4vw, 52px); }

.split {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(360px, 100%), 1fr));
    gap: 48px 80px;
}

.stack { display: flex; flex-direction: column; gap: 16px; align-items: start; }

.mint-band { background: var(--mint); }
.mint-band .split { padding-top: 88px; padding-bottom: 88px; align-items: start; gap: 40px 80px; }

.ruled-list {
    list-style: none;
    padding: 0;
    display: flex;
    flex-direction: column;
    font-weight: 700;
    font-size: 22px;
}
.ruled-list li { padding: 16px 0; border-bottom: 3px solid var(--ink); }
.ruled-list .price { display: block; margin-top: 4px; font-size: 17px; font-weight: 400; }
.ruled-list li:last-child { border-bottom: 0; }

.cta-row {
    display: flex;
    flex-wrap: wrap;
    gap: 28px;
    align-items: center;
    justify-content: space-between;
}
.cta-row h2 { max-width: 18ch; }

/* ---------- Home ---------- */

.hero {
    padding-top: 48px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(500px, 100%), 1fr));
    gap: 24px;
    align-items: end;
}
.hero-copy { display: flex; flex-direction: column; gap: 28px; padding-bottom: 72px; }
.hero h1 {
    font-size: clamp(56px, 7.4vw, 112px);
    line-height: 0.92;
    letter-spacing: -0.01em;
    text-wrap: balance;
}
.hero-answer { display: block; }

/* Every ask shares one grid cell, so the heading is always as tall as the longest */
.hero-asks {
    display: grid;
    font-size: 0.42em;
    line-height: 1.05;
    margin-bottom: 0.4em;
}
.hero-ask {
    grid-area: 1 / 1;
    opacity: 0;
    transform: translateY(0.4em);
    transition: opacity 700ms ease, transform 700ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.hero-ask.is-active { opacity: 1; transform: none; }
.hero-ask.is-leaving { transform: translateY(-0.4em); }

.hero-art img.is-shaking { animation: kd-shake 1200ms ease-in-out; }
@keyframes kd-shake {
    0%, 100% { transform: rotate(0); }
    20% { transform: rotate(-3deg); }
    40% { transform: rotate(2.5deg); }
    60% { transform: rotate(-1.5deg); }
    80% { transform: rotate(1deg); }
}
.hero-art img { transform-origin: 50% 90%; }

.hero-actions { display: flex; flex-wrap: wrap; gap: 24px; align-items: center; font-size: 19px; font-weight: 700; }
.hero-art {
    display: flex;
    justify-content: center;
    position: relative;
    z-index: 2;
    margin-bottom: -170px;
}
.hero-art img { width: min(520px, 92%); height: auto; }
.wave--over { position: relative; z-index: 1; }
.after-hero { padding-top: 160px; }

.steps {
    list-style: none;
    padding: 0;
    margin-top: 56px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
    gap: 48px;
}
.steps li {
    display: flex;
    flex-direction: column;
    gap: 12px;
    border-top: 4px solid var(--ink);
    padding-top: 20px;
}
.steps .num { font-family: var(--display); font-size: 64px; line-height: 1; color: var(--orange); }
.steps h3 { font-size: 24px; }
.steps p { max-width: 34ch; }

.shot {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    object-position: top;
    border: 3px solid var(--ink);
    border-radius: 20px;
    background: var(--paper-dim);
}

/* ---------- Services ---------- */

.services-hero {
    padding-top: 32px;
    display: flex;
    flex-wrap: wrap;
    gap: 24px 48px;
    align-items: end;
    justify-content: space-between;
}
.services-hero h1 {
    margin-bottom: 48px;
    flex: 1 1 520px;
    font-size: clamp(52px, 6.6vw, 96px);
    line-height: 0.94;
    max-width: 15ch;
    text-wrap: balance;
}
.portrait {
    flex: 0 1 380px;
    width: 100%;
    max-width: 380px;
    height: auto;
    display: block;
    margin-bottom: -40px;
    position: relative;
    z-index: 1;
}
.kd-eyes { transform-box: fill-box; transform-origin: center; animation: kd-blink 4.8s infinite; }
@keyframes kd-blink { 0%, 91%, 97%, 100% { transform: scaleY(1); } 94% { transform: scaleY(0.08); } }
@media (prefers-reduced-motion: reduce) { .kd-eyes { animation: none; } }

.service-list { padding-top: 56px; display: flex; flex-direction: column; gap: 64px; }
.service {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr));
    gap: 20px 80px;
    border-top: 4px solid var(--ink);
    padding-top: 28px;
}
.service--later { border-top-style: dashed; }
.service h2 { font-size: 44px; }
.service-body { display: flex; flex-direction: column; gap: 14px; max-width: 60ch; }
.service-body > p { font-size: 20px; }
.service-body ul { padding-left: 22px; display: flex; flex-direction: column; gap: 6px; }
.service dl { display: flex; flex-direction: column; gap: 18px; max-width: 60ch; }
.service dt { font-weight: 700; font-size: 20px; }

/* ---------- Work ---------- */

.work-list { padding-top: 56px; padding-bottom: 112px; display: flex; flex-direction: column; gap: 88px; }
.work-item {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(520px, 100%), 1fr));
    gap: 40px 56px;
    align-items: center;
}
.work-item .stack { gap: 18px; }
.work-item h2 { font-size: 48px; }
.work-item p { font-size: 20px; max-width: 40ch; }
.mint-band .cta-row { padding-top: 80px; padding-bottom: 80px; }

/* ---------- Tools ---------- */

.tools {
    padding-top: 56px;
    padding-bottom: 112px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(380px, 100%), 1fr));
    gap: 48px 72px;
    align-items: start;
}
.tool-card {
    border: 3px solid var(--ink);
    border-radius: 24px;
    padding: 44px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.tool-card h2 { font-size: 52px; }
.tool-card p { font-size: 21px; max-width: 34ch; }
.tools-aside { padding-top: 20px; }
.tools-aside h2 { font-size: 26px; }
.tools-aside p { max-width: 36ch; }

/* ---------- Start a project ---------- */

.start {
    padding-top: 48px;
    padding-bottom: 112px;
    display: flex;
    flex-wrap: wrap;
    gap: 56px 96px;
    align-items: start;
}
.start-main { flex: 999 1 560px; min-width: 0; }
.start-form { display: flex; flex-direction: column; gap: 28px; max-width: 680px; }
.start-form fieldset { border: 0; margin: 0; padding: 0; }
.start-form legend { font-weight: 700; font-size: 20px; padding: 0; margin-bottom: 14px; }
.kinds { display: flex; flex-wrap: wrap; gap: 10px; }
.kind {
    font: inherit;
    font-weight: 700;
    font-size: 17px;
    cursor: pointer;
    padding: 11px 18px;
    min-height: 48px;
    border-radius: 999px;
    border: 3px solid var(--ink);
    color: var(--ink);
    background: #FFFFFF;
}
.kind[aria-pressed="true"] { background: var(--orange); }

.field-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
    gap: 24px;
}
.field { display: flex; flex-direction: column; gap: 8px; }
.field label { font-weight: 700; }
.field input,
.field textarea {
    font: inherit;
    padding: 14px 16px;
    background: #FFFFFF;
    border: 3px solid var(--ink);
    border-radius: 14px;
    color: var(--ink);
}
.field textarea { resize: vertical; }

.form-error { color: #A3311A; font-weight: 700; }

.sent { display: flex; flex-direction: column; gap: 18px; align-items: start; max-width: 560px; }
.sent img { width: 130px; height: auto; }
.sent h2 { font-size: 48px; }
.sent p { font-size: 20px; }
.link-button {
    font: inherit;
    font-weight: 700;
    cursor: pointer;
    background: none;
    color: var(--ink);
    padding: 10px 0;
    border: 0;
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 5px;
}

.next-steps { flex: 1 1 300px; display: flex; flex-direction: column; gap: 24px; }
.next-steps h2 { font-size: 22px; }
.next-steps ol { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 20px; }
.next-steps li { display: flex; gap: 16px; }
.next-steps .num {
    font-family: var(--display);
    font-size: 36px;
    line-height: 1;
    color: var(--orange);
    width: 28px;
    flex: none;
}
.next-steps > p { border-top: 3px solid var(--ink); padding-top: 20px; }

[hidden] { display: none !important; }

/* ---------- Footer ---------- */

.site-footer { background: var(--ink); color: var(--paper); position: relative; }
/* A thin mint wave on top of the footer, unless a mint band already sits there */
.site-footer::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: calc(100% - 1px);
    height: 28px;
    background: var(--mint);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 80' preserveAspectRatio='none'%3E%3Cpath transform='matrix(1 0 0 -1 0 80)' d='M0 0 H1440 V40 C1380 70 1300 30 1220 52 C1130 76 1060 36 960 50 C860 64 800 80 700 58 C600 36 520 70 420 60 C320 50 260 24 160 44 C90 58 40 70 0 52 Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 80' preserveAspectRatio='none'%3E%3Cpath transform='matrix(1 0 0 -1 0 80)' d='M0 0 H1440 V40 C1380 70 1300 30 1220 52 C1130 76 1060 36 960 50 C860 64 800 80 700 58 C600 36 520 70 420 60 C320 50 260 24 160 44 C90 58 40 70 0 52 Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}
.mint-band + .site-footer::before { display: none; }
.site-footer .wrap {
    padding-top: 32px;
    padding-bottom: 32px;
    display: flex;
    flex-wrap: wrap;
    gap: 16px 40px;
    justify-content: space-between;
    align-items: center;
    font-size: 16px;
}
.site-footer a { color: var(--mint); font-weight: 700; }
.site-footer a:hover { color: #8AF7D9; }
.site-footer span { color: var(--footer-muted); }

@media (max-width: 600px) {
    .hero-art { margin-bottom: -90px; }
    .after-hero { padding-top: 120px; }
    .tool-card { padding: 28px; }
    .section { padding-top: 72px; padding-bottom: 72px; }
}