:root {
    --ink:#181818;
    --cream:#f4eee7;
    --pink:#f04475;
    --lime:#dfff55;
    --mono:'IBM Plex Mono',monospace;
    --display:'Space Grotesk',sans-serif;
    --script:'Caveat',cursive
}
* {
    box-sizing:border-box;
}
html {
    scroll-behavior:smooth;
}
body {
    margin:0;
    background:var(--ink);
    color:var(--cream);
    font-family:var(--display);
}
a {
    color:inherit;
    text-decoration:none;
}
button {
    font:inherit;
}
.wrap {
    width:min(1380px,calc(100% - 9vw));
    margin:auto;
}
.skip {
    position:absolute;
    left:-9999px;
    top:10px;
    background:var(--lime);
    color:var(--ink);
    padding:12px;
    z-index:30;
}
.skip:focus {
    left:10px;
}
.site-header {
    position:relative;
    z-index:10;
    background:var(--ink);
}
.header-inner {
    min-height:103px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:35px;
}
.brand {
    font-family:var(--display);
    font-size:clamp(39px,4vw,59px);
    font-weight:700;
    letter-spacing:-.095em;
    line-height:1;
    white-space:nowrap;
    position:relative;
}
.brand::after {
    content:'';
    position:absolute;
    height:4px;
    background:var(--lime);
    left:0;
    right:0;
    bottom:-11px;
    transform:rotate(-2deg);
    border-radius:80%;
}
.brand-dot,.footer-logo span {
    color:var(--pink)
}
.brand-k {
    position:relative;
}
.proof-e {
    position:absolute;
    color:var(--pink);
    font-family:var(--script);
    font-size:.56em;
    font-weight:700;
    top:-.48em;
    right:-.17em;
    transform:rotate(-16deg);
}
.proof-caret {
    position:absolute;
    color:var(--lime);
    font-size:.55em;
    top:-.72em;
    right:-.07em;
    transform:rotate(-10deg);
}
nav {
    display:flex;
    gap:clamp(18px,2.6vw,45px);
}
nav a,.header-cta {
    font:500 12px var(--mono);
    text-transform:uppercase;
    letter-spacing:.07em;
}
nav a:hover,.footer a:hover {
    color:var(--lime);
}
.header-cta {
    border:1px solid var(--cream);
    padding:12px 16px;
    white-space:nowrap;
}
.header-cta:hover {
    background:var(--lime);
    border-color:var(--lime);
    color:var(--ink);
}
.menu-toggle {
    display:none
}
.hero {
    background:var(--ink);
    position:relative;
    overflow:hidden;
}
.hero-grid {
    display:grid;
    grid-template-columns:49% 51%;
    min-height:570px;
    position:relative;
}
.hero-copy {
    padding:66px 0 80px;
    position:relative;
    z-index:3;
}
.eyebrow {
    font:600 14px var(--mono);
    letter-spacing:.11em;
    color:var(--lime);
    margin:0 0 19px;
}
.spark {
    margin-left:9px;
}
.hero h1 {
    font-size:clamp(53px,6.3vw,105px);
    font-weight:500;
    letter-spacing:-.075em;
    line-height:.99;
    margin:0;
    white-space:nowrap;
}
.hero h1 span {
    color:var(--pink);
}
.lime-swipe {
    width:min(360px,75%);
    height:13px;
    border-top:5px solid var(--lime);
    border-bottom:3px solid var(--lime);
    transform:rotate(-3deg);
    margin:22px 0 20px;
    border-radius:50%;
}
.hero-sub {
    font:400 clamp(14px,1.4vw,19px)/1.55 var(--mono);
    max-width:440px;
    margin:0 0 26px;
}
.button {
    display:inline-flex;
    align-items:center;
    justify-content:space-between;
    gap:32px;
    padding:18px 28px;
    font:600 14px var(--mono);
    letter-spacing:.025em;
    transition:transform .2s,filter .2s;
}
.button:hover {
    transform:translateY(-3px);
    filter:brightness(1.08);
}
.button-pink {
    background:var(--pink);
    color:var(--ink);
    border-radius:99px;
    min-width:280px;
}
.hero-art {
    position:relative;
    min-height:570px;
    z-index:2;
}
.portrait {
    position:absolute;
    inset:-50px -5vw -35px -7%;
    background-image:url('assets/bookd-portrait.png');
    background-position:center 18%;
    background-size:cover;
    background-repeat:no-repeat;
    mask-image:linear-gradient(to bottom,#000 0%,#000 89%,transparent 100%);
}
.note {
    position:absolute;
    left:-6%;
    top:132px;
    width:232px;
    background:#f7f1e7;
    color:var(--ink);
    padding:35px 20px 21px;
    transform:rotate(-7deg);
    box-shadow:5px 8px 0 #0b0b0b80;
    z-index:3;
}
.note:before {
    content:'';
    position:absolute;
    inset:0;
    border:1px solid #cfc6b9;
    pointer-events:none;
}
.tape {
    position:absolute;
    top:-15px;
    left:72px;
    width:84px;
    height:30px;
    background:#f04475c9;
    transform:rotate(5deg);
}
.note-star {
    position:absolute;
    right:10px;
    top:11px;
    color:var(--pink);
    font-size:40px;
}
.note ul {
    list-style:none;
    margin:0;
    padding:0;
}
.note li {
    font:600 13px/1.55 var(--mono);
    margin:10px 0;
    padding-left:27px;
    position:relative;
}
.note li:before {
    content:'☑';
    position:absolute;
    left:0;
    font-size:19px;
    top:-3px;
}
.scribble-spark {
    position:absolute;
    color:var(--lime);
    font-size:66px;
    z-index:2;
}
.spark-one {
    right:0;
    top:48px;
}
.spark-two {
    left:18%;
    bottom:60px;
}
.paper-edge {
    height:31px;
    background:var(--cream);
    position:relative;
    z-index:4;
    clip-path:polygon(0 25%,3% 45%,7% 30%,12% 56%,16% 37%,21% 52%,26% 35%,31% 55%,36% 30%,41% 52%,46% 34%,51% 58%,56% 29%,61% 51%,66% 33%,71% 55%,76% 30%,81% 51%,86% 35%,91% 52%,96% 28%,100% 43%,100% 100%,0 100%);
    margin-top:-24px;
}
.services {
    background:var(--cream);
    color:var(--ink);
    padding:48px 0 64px;
}
.services-grid {
    display:grid;
    grid-template-columns:36% 64%;
    gap:20px;
    align-items:center;
}
.brush-quote {
    position:relative;
    min-height:240px;
    display:flex;
    align-items:center;
    justify-content:center;
    transform:rotate(-4deg);
}
.brush-quote:before {
    content:'';
    position:absolute;
    inset:13px 0;
    background:var(--pink);
    opacity:.82;
    clip-path:polygon(4% 8%,89% 0,99% 13%,91% 23%,100% 35%,95% 48%,100% 62%,94% 79%,98% 89%,12% 100%,0 88%,8% 71%,1% 52%,6% 33%,0 17%);
}
.brush-quote p {
    position:relative;
    font:600 clamp(33px,3.7vw,58px)/.94 var(--script);
    text-align:center;
    margin:0;
    z-index:1;
}
.brush-underline {
    position:absolute;
    bottom:12px;
    right:5%;
    width:50%;
    height:8px;
    background:var(--lime);
    transform:rotate(-7deg);
    border-radius:50%;
    z-index:2;
}
.tiny-doodle {
    position:absolute;
    left:-22px;
    bottom:20px;
    font:75px var(--script);
}
.service-list {
    display:grid;
    grid-template-columns:repeat(4,1fr);
}
.service {
    text-align:center;
    padding:20px 18px;
    border-left:1px solid #c9c2ba;
}
.service-icon {
    font:70px/.95 var(--script);
    color:var(--pink);
    height:77px;
    text-shadow:5px 8px 0 var(--lime);
}
.service h2 {
    font:700 18px var(--mono);
    letter-spacing:.015em;
    margin:15px 0;
}
.service p {
    font:400 13px/1.55 var(--mono);
    margin:0;
}
.statement {
    background:var(--ink);
    padding:110px 0 120px;
    position:relative;
}
.statement:before {
    content:'';
    height:30px;
    position:absolute;
    top:-1px;
    left:0;
    right:0;
    background:var(--cream);
    clip-path:polygon(0 0,100% 0,100% 28%,94% 56%,88% 32%,80% 54%,72% 34%,64% 55%,55% 31%,46% 52%,37% 33%,28% 53%,18% 30%,9% 52%,0 32%);
}
.statement-grid {
    display:grid;
    grid-template-columns:52% 48%;
    gap:50px;
    align-items:center;
}
.photo-collage {
    position:relative;
    min-height:440px;
}
.photo-card {
    position:absolute;
    background:var(--cream);
    padding:11px 11px 34px;
    box-shadow:0 16px 25px #0005;
}
.photo-card img {
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}
.photo-one {
    width:72%;
    height:350px;
    top:10px;
    left:0;
    transform:rotate(-5deg);
}
.photo-two {
    width:45%;
    height:280px;
    right:5%;
    bottom:0;
    transform:rotate(7deg);
}
.photo-sticker {
    position:absolute;
    bottom:16px;
    left:14%;
    transform:rotate(-9deg);
    padding:14px 20px;
    background:var(--lime);
    color:var(--ink);
    font:700 14px/1.2 var(--mono);
}
.statement-copy {
    position:relative;
    padding:30px 20px 50px 0;
}
.statement-copy h2,.approach h2 {
    font-size:clamp(48px,5.5vw,82px);
    font-weight:500;
    letter-spacing:-.065em;
    line-height:1.04;
    margin:12px 0 25px;
}
.statement-copy h2 em {
    color:var(--pink);
    font-style:normal;
}
.statement-copy>p:not(.eyebrow),.approach-grid>div>p:not(.eyebrow) {
    font:16px/1.8 var(--mono);
    max-width:530px;
}
.text-link {
    display:inline-block;
    border-bottom:3px solid var(--lime);
    padding:12px 0;
    font:600 13px var(--mono);
    margin-top:20px;
}
.handwritten {
    position:absolute;
    right:0;
    bottom:-55px;
    color:var(--lime);
    font:600 38px var(--script);
    transform:rotate(-8deg);
}
.approach {
    background:var(--cream);
    color:var(--ink);
    padding:100px 0;
}
.approach-grid {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:90px;
    align-items:center;
}
.approach .eyebrow {
    color: var(--pink);
}
.approach h2 {
    margin:0;
}
.approach h2 span {
    color:var(--pink)
}
.button-lime {
    background:var(--lime);
    margin-top:18px;
}
.footer {
    background:#101010;
    padding:62px 0;
    color:var(--cream);
}
.footer-inner {
    display:grid;
    grid-template-columns:1.5fr 1fr;
    gap:25px;
}
.footer-logo {
    font:700 58px var(--display);
    letter-spacing:-.09em;
}
.footer p {
    font:13px var(--mono);
    color:#c7c1ba;
}
.footer-inner>div:nth-child(2) {
    display:flex;
    gap:25px;
    justify-content:flex-end;
    align-items:center;
    font:12px var(--mono);
}
.footer small {
    font:11px var(--mono);
    color:#aaa;
}
@media(max-width:1100px) {
    .header-cta {
        display:none;
    }
    .hero h1 {
        font-size:clamp(53px,6.7vw,78px);
    }
    .note {
        left:-15%;
        top:160px;
        transform:scale(.84) rotate(-7deg);
    }
    .services-grid {
        grid-template-columns:1fr;
    }
    .brush-quote {
        max-width:530px;
        margin:auto;
    }
    .service {
        padding:20px 13px;
    }

}
@media(max-width:740px) {
    .wrap {
        width:calc(100% - 38px);
    }
    .header-inner {
        min-height:82px;
    }
    .brand {
        font-size:44px;
    }
    .menu-toggle {
        display:block;
        color:var(--cream);
        background:none;
        border:1px solid #777;
        padding:10px 12px;
        font:12px var(--mono);
        cursor:pointer;
    }
    nav {
        display:none;
        position:absolute;
        top:82px;
        left:0;
        right:0;
        background:var(--ink);
        padding:22px 19px 30px;
        flex-direction:column;
        box-shadow:0 10px 15px #0008;
    }
    nav.open {
        display:flex;
    }
    .hero-grid {
        display:flex;
        flex-direction:column;
        min-height:0;
    }
    .hero-copy {
        padding:54px 0 12px;
    }
    .hero h1 {
        font-size:clamp(52px,11.5vw,82px);
    }
    .eyebrow {
        font-size:11px
    }
    .hero-sub {
        max-width:450px;
        font-size:14px;
    }
    .hero-art {
        min-height:390px;
        margin:0 -19px;
    }
    .portrait {
        inset:-18px -8px -5px 0;
        background-size:cover;
        background-position:center 12%;
        mask-image:linear-gradient(to bottom,#000 0%,#000 86%,transparent 100%);
    }
    .note {
        left:2%;
        top:120px;
        transform:scale(.7) rotate(-7deg);
        transform-origin:top left;
    }
    .spark-one {
        right:12%;
        top:22px;
    }
    .spark-two {
        display:none;
    }
    .services {
        padding:45px 0 60px;
    }
    .brush-quote {
        min-height:210px;
    }
    .service-list {
        grid-template-columns:repeat(2,1fr);
        gap:24px 0;
    }
    .service:nth-child(odd) {
        border-left:0;
    }
    .service-icon {
        font-size:58px;
        height:64px;
    }
    .service p {
        font-size:12px;
    }
    .statement {
        padding:70px 0 100px;
    }
    .statement-grid {
        grid-template-columns:1fr;
        gap:20px;
    }
    .photo-collage {
        min-height:340px;
    }
    .photo-one {
        height:270px;
    }
    .photo-two {
        height:220px;
    }
    .statement-copy {
        padding:0;
    }
    .statement-copy h2,.approach h2 {
        font-size:clamp(45px,10vw,70px);
    }
    .handwritten {
        position:static;
        display:block;
        margin-top:24px;
    }
    .approach {
        padding:70px 0;
    }
    .approach-grid {
        grid-template-columns:1fr;
        gap:15px;
    }
    .footer-inner {
        grid-template-columns:1fr;
    }
    .footer-inner>div:nth-child(2) {
        justify-content:flex-start;
        flex-wrap:wrap;
    }

}
@media(max-width:390px) {
    .hero h1 {
        font-size:49px;
    }
    .button-pink {
        min-width:0;
        width:100%;
    }
    .note {
        left:-4%;
        top:130px;
        transform:scale(.6) rotate(-7deg);
    }
    .hero-art {
        min-height:320px;
    }
    .brush-quote p {
        font-size:35px;
    }

}
/* Bookd identity: editorial wordmark with proofreader insertion */
.brand,.footer-logo {
    display:inline-flex;
    align-items:center;
    font-family:var(--display);
    font-weight:600;
    letter-spacing:-.065em;
    text-decoration:none;
    line-height:1.15;
}
.brand {
    font-size:clamp(39px,4vw,59px);
}
.footer-logo {
    font-size:58px;
}
.brand::after {
    display:none;
}
.logo-word {
    display:inline-flex;
    align-items:baseline;
    white-space:nowrap;
}
.logo-insert {
    display:inline-flex;
    position:relative;
    align-items:baseline;
    width:.42em;
    justify-content:center;
    margin:0 -.025em 0 .025em;
}
.logo-e {
    font-family:var(--script);
    font-weight:700;
    font-size:.98em;
    line-height:1;
    color:var(--pink);
    transform:rotate(-10deg) translateY(-.05em);
    display:inline-block;
    letter-spacing:-.06em;
}
.logo-caret {
    position:absolute;
    left:50%;
    bottom:-.43em;
    transform:translateX(-50%) rotate(180deg);
    font-family:var(--mono);
    font-weight:700;
    font-size:.58em;
    line-height:1;
    color:var(--lime);
}
/* Approved logo image assets; no CSS-built lettering */
.brand,.footer-logo {
    display:inline-block;
    line-height:0;
    flex-shrink:0;
}
.brand::after {
    display:none;
}
.brand img {
    display:block;
    width:clamp(170px,18vw,255px);
    height:auto;
}
.footer-logo img {
    display:block;
    width:min(340px,80vw);
    height:auto;
}
@media(max-width:740px) {
    .brand img {
        width:190px;
    }

}

/* Mobile hero CTA: show as a text link without changing desktop buttons. */
@media (max-width: 740px) {
    .hero .button.button-pink {
        display: inline-flex;
        align-items: center;
        justify-content: flex-start;
        gap: 12px;
        width: auto;
        min-width: 0;
        padding: 0 0 6px;
        background: transparent;
        border-bottom: 2px solid var(--pink);
        border-radius: 0;
        color: var(--pink);
        font-size: 14px;
        box-shadow: none;
    }

    .hero .button.button-pink:hover {
        transform: none;
        filter: none;
        color: var(--lime);
        border-bottom-color: var(--lime);
    }
}