:root{--red:#ff2b3a;--orange:#ff6a1a;--pink:#ffb3cb;--blush:#ffe4ec;--ink:#24060b;--cream:#fff6f1}
*{box-sizing:border-box}html{scroll-behavior:smooth;background:var(--red)}body{margin:0;background:var(--cream);color:var(--ink);font-family:Figtree,sans-serif;font-size:1.05rem;line-height:1.55;overflow-x:clip}
a{color:inherit;text-decoration:none}h1,h2,h3,.kin,.last,.wt,.ck{font-family:Anybody,sans-serif}
.hero{background:var(--red);color:var(--pink);min-height:100vh;display:flex;flex-direction:column;padding:26px 3vw 4vh;padding-top:max(26px,env(safe-area-inset-top));padding-left:max(3vw,env(safe-area-inset-left));padding-right:max(3vw,env(safe-area-inset-right));position:relative;overflow:hidden}
.bar{display:flex;justify-content:space-between;font-weight:500;color:var(--blush)}.bar nav a{margin-left:28px}.bar a:hover{color:#fff}
.kin{display:flex;justify-content:space-between;font-size:clamp(4rem,17.2vw,20rem);line-height:.8;font-weight:800;font-variation-settings:"wdth" 100,"wght" 800;margin:auto 0 0;letter-spacing:-.01em;white-space:nowrap;user-select:none}
.kin span{display:inline-block;font-variation-settings:"wdth" var(--w,100),"wght" var(--g,800);transition:font-variation-settings .45s cubic-bezier(.2,.8,.2,1)}
.sub{display:grid;grid-template-columns:auto 1fr auto;gap:3vw;align-items:end;margin-top:3vh}
.last{font-size:clamp(2rem,6vw,6rem);margin:0;font-style:italic;font-weight:300;font-variation-settings:"wdth" 130;color:#fff;line-height:.9}
.tag{max-width:34ch;margin:0;color:var(--blush);font-size:1.1rem}
.intro{background:var(--pink);padding:16vh 6vw}.intro p{font-family:Anybody;font-weight:700;font-variation-settings:"wdth" 88;font-size:clamp(2.2rem,5.6vw,5.6rem);line-height:1.02;margin:0;max-width:16ch;letter-spacing:-.02em}
.pill{display:inline-block;padding:0 .28em;border-radius:999px;transition:transform .4s cubic-bezier(.34,1.8,.64,1)}.pill:hover{transform:rotate(-4deg) scale(1.06)}
.p1{background:var(--red);color:var(--pink)}.p2{background:var(--orange);color:#fff}.p3{background:var(--ink);color:var(--pink);font-style:italic}
.services{display:grid;grid-template-columns:1fr 1fr}.svc{padding:12vh 5vw 10vh;min-height:70vh;display:flex;flex-direction:column}.svc.o{background:var(--orange);color:var(--ink)}.svc.r{background:var(--red);color:var(--blush)}
.n{font-family:Anybody;font-weight:300;font-size:1.2rem}.svc h2{font-size:clamp(2.6rem,5.4vw,5.6rem);line-height:.9;font-weight:900;font-variation-settings:"wdth" 75;margin:auto 0 24px;letter-spacing:-.02em}.svc p{max-width:36ch;margin:0;font-size:1.15rem}
.about{display:grid;grid-template-columns:minmax(260px,32vw) 1fr;gap:6vw;align-items:center;background:var(--blush);padding:14vh 6vw}
.about figure{margin:0;aspect-ratio:4/5;border-radius:999px 999px 24px 24px;overflow:hidden;background:var(--orange)}.about img{width:100%;height:100%;object-fit:cover;object-position:50% 28%;display:block;transition:transform .8s cubic-bezier(.2,.8,.2,1)}.about figure:hover img{transform:scale(1.05)}
.about h2{font-size:clamp(3rem,7vw,7rem);line-height:.9;font-weight:900;font-variation-settings:"wdth" 90;margin:0 0 30px}.about h2 .o{color:var(--red)}.about p{font-size:1.2rem;max-width:52ch}
.contact{background:var(--orange);padding:14vh 3vw 12vh;color:var(--ink)}.ck{font-size:clamp(1.4rem,2.6vw,2.4rem);font-weight:300;font-style:italic;margin:0 0 2vh 1vw;font-variation-settings:"wdth" 130}
.kin.big{font-size:clamp(3.2rem,15vw,17rem);color:var(--ink);margin:0}.kin.big:hover{color:#fff}
.mail{display:inline-block;margin:5vh 0 0 1vw;font-size:clamp(1.2rem,2.6vw,2.2rem);font-weight:700;border-bottom:3px solid var(--ink);word-break:break-all;transition:color .3s,border-color .3s}.mail:hover{color:#fff;border-color:#fff}
footer{display:flex;justify-content:space-between;padding:22px 3vw;padding-bottom:max(22px,env(safe-area-inset-bottom));padding-left:max(3vw,env(safe-area-inset-left));padding-right:max(3vw,env(safe-area-inset-right));background:var(--ink);color:var(--pink);font-size:.9rem}
@media(max-width:820px){.bar nav{display:none}.kin{font-size:17.6vw}.sub{grid-template-columns:1fr auto;gap:18px}.last{grid-column:1/-1}
.services{grid-template-columns:1fr}.svc{min-height:auto;padding:9vh 6vw}.svc h2{margin-top:30px}
.about{grid-template-columns:1fr}.about figure{width:240px}}
@media(max-width:450px){.hero{min-height:auto;padding:20px 3vw 30px}.hero .kin{margin-top:20px;font-size:16vw}.sub{margin-top:20px}.tag{font-size:1rem}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
/* iteration 2 */
.hero{justify-content:space-between}
.kin{justify-content:flex-start;margin:0;font-size:var(--fs,17vw);line-height:.78}
.hero .kin{margin-top:auto}
.namewrap{margin:auto 0 0}
.svc{min-height:58vh}.svc h2{font-size:clamp(3rem,6.6vw,7rem)}

/* colour tokens */
body{--hb:var(--red);--hf:var(--pink);--h2:#fff;--ib:var(--pink);--if:var(--ink);--q1:var(--red);--q1f:var(--pink);--q2:var(--orange);--q2f:#fff;--q3:var(--ink);--q3f:var(--pink);--s1:var(--orange);--s1f:var(--ink);--s2:var(--red);--s2f:var(--blush);--ab:var(--blush);--cb:var(--orange);--cf:var(--ink);--bd:var(--pink)}
.hero,.intro,.svc,.about,.contact,.pill{transition:background-color .5s cubic-bezier(.2,.8,.2,1),color .5s}
.hero{background:var(--hb);color:var(--hf)}.bar{color:var(--h2)}.last{color:var(--h2)}.tag{color:var(--h2)}
.build{font-style:normal;opacity:.75}
.intro{background:var(--ib);color:var(--if)}.p1{background:var(--q1);color:var(--q1f)}.p2{background:var(--q2);color:var(--q2f)}.p3{background:var(--q3);color:var(--q3f)}
.svc.o{background:var(--s1);color:var(--s1f)}.svc.r{background:var(--s2);color:var(--s2f)}
.about{background:var(--ab)}.contact{background:var(--cb);color:var(--cf)}.kin.big{color:var(--cf)}.mail{border-color:currentColor}
.kin span{transition:font-variation-settings .45s cubic-bezier(.2,.8,.2,1),transform .5s cubic-bezier(.34,1.8,.64,1)}
/* iteration 3 */
.kin{width:max-content;max-width:none}
.kin span{font-variation-settings:"wdth" var(--w,72),"wght" var(--g,850)}
.hero .kin{line-height:.76}

.kin span{transition:transform .5s cubic-bezier(.34,1.8,.64,1)}.kin{will-change:transform}


