/*
Theme Name: Kingsley Kreative
Description: Custom one-page Kingsley Kreative portfolio. Homepage content is maintained in the theme, not the block editor.
Version: 1.0.0
Author: Kingsley Kreative
Text Domain: kingsley-kreative
Requires PHP: 7.4
*/




:root { --background:#fff; --foreground:#282828; --primary:#218ed8; --primary-foreground:#111; --accent:#e8863e; --accent-foreground:#282828; --border:#d7dce0; --radius:.25rem; --muted:#eef4f8; --muted-foreground:#525961; }
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:2rem}body{margin:0;background:var(--background);color:var(--foreground);font-family:Arial,Helvetica,sans-serif;font-size:1rem;line-height:1.6}a{color:inherit;text-decoration:none}a:focus-visible,iframe:focus-visible{outline:3px solid #b64a00;outline-offset:6px}p,h1,h2,h3{margin:0}p+p{margin-top:1.15rem}.wrap{width:min(1240px,calc(100% - 96px));margin-inline:auto}.header{display:flex;align-items:center;justify-content:space-between;min-height:130px;border-bottom:1px solid var(--border);gap:2rem}.brand{display:block;width:108px;height:108px;flex-shrink:0}.brand img{width:100%;height:100%;object-fit:contain}.header nav{display:flex;gap:2.25rem;font-size:.9375rem}.header a:hover,footer a:hover,.video-caption a:hover{color:#1269a4}.nav-call{font-weight:bold;border-bottom:2px solid var(--accent);padding:.4rem 0}.nav-call span{margin-left:1rem}.hero{padding-top:72px}.eyebrow{font-size:.8125rem;letter-spacing:.15em;font-weight:bold;line-height:1.5;margin-bottom:1.5rem}.eyebrow span{display:inline-block;background:var(--accent);width:8px;height:8px;border-radius:50%;margin-right:8px}h1{font-size:clamp(3.1rem,6.5vw,6rem);line-height:1.03;letter-spacing:-.065em;max-width:1100px;font-weight:700}em{font-style:normal;color:#177bb9}h2{font-size:clamp(2.3rem,4vw,3.7rem);line-height:1.09;letter-spacing:-.045em}h3{font-size:1.25rem;line-height:1.3;letter-spacing:-.02em}.hero-bottom{display:flex;justify-content:space-between;align-items:center;gap:3rem;margin:2rem 0 3rem}.hero-bottom p{font-size:1.125rem;max-width:620px;color:#51565b}.button{display:inline-flex;align-items:center;justify-content:space-between;gap:2.75rem;padding:1rem 1.5rem;background:var(--accent);color:#282828;font-weight:700;font-size:1rem;transition:background .2s;flex-shrink:0;min-height:56px}.button:hover{background:#f19b59}.button span{font-size:1.5rem;line-height:1}.video-frame{background:#282828;padding:12px 12px 0}.video-frame iframe{border:0;height:auto;display:block;width:100%;aspect-ratio:16/9;background:#171717}.video-caption{color:#eee;display:flex;justify-content:space-between;gap:1rem;padding:1rem .5rem;font-size:.75rem;letter-spacing:.08em}.video-caption a{font-size:.875rem;letter-spacing:0;text-decoration:underline}.statement{background:#282828;color:#fff;margin-top:80px;padding:95px 0}.split{display:grid;grid-template-columns:1fr 1.35fr;gap:6rem}.statement .eyebrow{color:#e8863e}.statement h2{font-size:clamp(2.1rem,3.8vw,3.35rem);margin-bottom:2rem}.statement h2 span{color:#6cb9ed}.statement p:not(.eyebrow):not(.manifesto){color:#d1d1d1;max-width:640px}.manifesto{font-size:1.6rem;line-height:1.35;font-weight:bold;margin-top:2rem}.section{padding-block:100px}.section-heading{display:grid;grid-template-columns:1.15fr 1fr;gap:5rem;align-items:end;margin-bottom:3.5rem}.section-heading>p{max-width:475px;color:#53585c;font-size:1.0625rem}.method-grid{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--border)}.method-item{padding:2rem 2rem 2.5rem 0;border-bottom:1px solid var(--border)}.method-item:nth-child(3n+2),.method-item:nth-child(3n+3){padding-left:2rem;border-left:1px solid var(--border)}.method-top{display:flex;align-items:start;justify-content:space-between;margin-bottom:1.5rem}.letter{font-size:4.5rem;line-height:1;font-weight:700;color:#218ed8;letter-spacing:-.07em}.step{font-size:.8125rem;color:#666;letter-spacing:.1em}.method-item h3{margin-bottom:1rem}.method-item p{color:#53585c}.foundation{background:#eaf3fa;padding:85px 0}.foundation h2{margin-bottom:1.5rem}.foundation .split{grid-template-columns:1fr 1.2fr;gap:5rem}.foundation-stack article{display:flex;gap:1.5rem;padding:1.5rem 0;border-top:1px solid #aecbdf}.foundation-stack article>span{font-size:.8125rem;color:#336584}.foundation-stack h3{font-size:1.8rem;margin-bottom:.6rem}.foundation-stack small{font-size:.8125rem;letter-spacing:.02em;font-weight:normal;margin-left:1rem}.foundation-stack p{color:#435666}.workflow{display:grid;grid-template-columns:repeat(3,1fr);gap:2.5rem}.workflow article{border-top:3px solid var(--primary);padding-top:1.5rem}.workflow h3{margin:1.1rem 0}.workflow p{color:#53585c}.expectations{display:grid;grid-template-columns:1fr 2fr;gap:3rem;background:#f1f3f4;padding:2rem;margin-top:3rem}.expectations p{color:#53585c}.story{background:#282828;color:#fff;padding:95px 0}.story .split{grid-template-columns:1fr 1fr;gap:6rem}.story em{color:#6cb9ed}.story .eyebrow{color:#e8863e}.story blockquote{margin:3rem 0 1.5rem;padding-left:1.5rem;border-left:3px solid var(--accent);font-size:1.5rem;line-height:1.4;letter-spacing:-.02em}.signature{font-weight:bold}.signature span{font-weight:normal;font-size:.875rem;color:#aaa}.story-copy{padding-top:2.8rem;color:#d5d5d5}.contact{text-align:center;padding-block:100px}.contact h2{font-size:clamp(3rem,5.5vw,5rem)}.contact>p:not(.eyebrow){margin:1.6rem auto 2rem;color:#53585c}.contact .eyebrow{color:#176ca6}footer{display:flex;justify-content:space-between;gap:1.5rem;flex-wrap:wrap;border-top:1px solid var(--border);padding-block:1.7rem;font-size:.875rem;color:#626262}.skip{position:absolute;top:-100px;left:1rem;background:#fff;padding:1rem;z-index:20}.skip:focus{top:1rem}@media(max-width:850px){.wrap{width:calc(100% - 48px)}.header nav{gap:1rem;font-size:.875rem}.hero{padding-top:48px}.hero-bottom{align-items:start;flex-direction:column;gap:1.5rem}.split,.foundation .split,.story .split{grid-template-columns:1fr;gap:2.5rem}.section-heading{grid-template-columns:1fr;gap:1.5rem}.method-grid{grid-template-columns:repeat(2,1fr)}.method-item:nth-child(n){padding:1.5rem;border-left:0}.method-item:nth-child(2n){border-left:1px solid var(--border)}.workflow{grid-template-columns:1fr;gap:2rem}.expectations{grid-template-columns:1fr;gap:1rem}.section,.statement,.story,.foundation{padding-block:64px}.story-copy{padding-top:0}.statement{margin-top:48px}.contact{padding-block:70px}}@media(max-width:560px){.wrap{width:calc(100% - 36px)}.header{min-height:108px;gap:1rem}.brand{width:90px;height:90px}.header nav{display:none}.hero h1{font-size:clamp(2.65rem,10.5vw,3.7rem)}.hero h1 br{display:none}.hero-bottom p{font-size:1rem}.video-frame{padding:5px 5px 0}.video-caption{flex-direction:column;font-size:.65rem;gap:.5rem;padding:.75rem .25rem}.method-grid{grid-template-columns:1fr}.method-item:nth-child(n){padding:1.5rem 0;border-left:0}.method-top{margin-bottom:1rem}.letter{font-size:3.5rem}.method-item p{max-width:34rem}.section-heading{margin-bottom:2.5rem}.foundation-stack small{display:block;margin:.35rem 0 0}.expectations{padding:1.5rem}.desktop-break{display:none}footer span:nth-child(2){display:none}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}

.case-study{border-bottom:1px solid var(--border)}.case-highlights{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));background:#eaf3fa;margin-bottom:3.5rem}.case-highlights>div{padding:1.75rem 2rem;border-top:3px solid #218ed8}.case-highlights strong{display:block;font-size:1.6rem;line-height:1.3;letter-spacing:-.035em;margin-bottom:.65rem}.case-highlights span{display:block;font-size:.9375rem;color:#435666}.case-narrative{display:grid;grid-template-columns:1fr 1.35fr;gap:4rem}.case-narrative h3{font-size:1.6rem;margin-bottom:1rem}.case-narrative article>p:not(.eyebrow),.case-examples p{color:#53585c}.case-narrative .eyebrow{color:#176ca6;font-size:.8125rem}.case-examples{display:grid;grid-template-columns:1fr 1fr;gap:3rem;margin-top:3rem}.case-examples article{border-top:1px solid var(--border);padding-top:1.5rem}.case-examples h3{margin:1rem 0}.case-link{display:inline-block;margin-top:1.25rem;font-size:.9375rem;text-decoration:underline;text-underline-offset:4px;font-weight:bold;color:#176ca6}.case-quotes{display:grid;grid-template-columns:1.35fr 1fr;gap:2rem;margin-top:3rem}.case-quotes figure{margin:0;padding:2rem;background:#282828;color:white;border-top:3px solid #e8863e}.case-quotes blockquote{margin:0;font-size:1.25rem;line-height:1.55;letter-spacing:-.015em}.case-quotes figcaption{margin-top:1.5rem;font-size:.875rem}.case-quotes figcaption strong,.case-quotes figcaption span{display:block}.case-quotes figcaption span{color:#ccc}@media(max-width:850px){.case-highlights>div{padding:1.4rem}.case-narrative{gap:2rem}.case-quotes{grid-template-columns:1fr}.header nav{gap:.8rem}}@media(max-width:650px){.case-highlights,.case-narrative,.case-examples{grid-template-columns:1fr}.case-highlights{margin-bottom:2.5rem}.case-highlights>div{border-top:0;border-left:3px solid #218ed8}.case-highlights>div+div{border-top:1px solid #c7ddeb}.case-quotes figure{padding:1.5rem}.header nav{display:none}}

.case-gallery{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2rem;margin-top:3rem}.case-gallery figure{margin:0;min-width:0}.case-gallery .case-image-wide{grid-column:1/-1}.image-placeholder{aspect-ratio:4/3;border:2px dashed #91abc0;background:#edf3f7;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:2rem;gap:1rem;color:#365367}.case-image-wide .image-placeholder{aspect-ratio:16/9}.image-placeholder strong{font-size:clamp(1.5rem,3vw,2.5rem);letter-spacing:-.035em}.image-placeholder span{font-size:.875rem;max-width:28rem}.image-placeholder span:first-child{font-weight:bold;letter-spacing:.1em}.case-gallery figcaption{font-size:.9375rem;color:#53585c;margin-top:.75rem}@media(max-width:650px){.case-gallery{grid-template-columns:1fr}.image-placeholder{padding:1rem;gap:.6rem}}

.case-gallery img{display:block;width:100%;height:auto}.case-gallery .case-bart-image{aspect-ratio:4/3;object-fit:contain;background:#eef2f4}

.case-brand-logo{display:block;width:min(320px,100%);height:auto;margin:0 0 1.75rem}

.clarity-image{margin-top:3rem}.clarity-image img{display:block;width:100%;height:auto}