/* Shared UTI-PUTI typography and action colours. */
@font-face{font-family:'Noto Sans';src:url('/assets/fonts/noto-sans-variable.ttf') format('truetype');font-weight:100 900;font-display:swap}
@font-face{font-family:Nunito;src:url('/assets/fonts/nunito-variable.ttf') format('truetype');font-weight:200 1000;font-display:swap}
:root{--brand-green:#7cb348;--brand-green-gradient:linear-gradient(65deg,#5e952c 0%,#94ce5e 100%);--brand-cta:linear-gradient(65deg,#f3b72f 0%,#ffd86b 100%);--brand-display:clamp(3.1rem,4.3vw,5rem);--land-green:var(--brand-green);--land-lime:var(--brand-green)}
body,.landing-main{font-family:'Noto Sans',Arial,sans-serif}
h1,h2,h3,h4,h5,h6,.landing-main h1,.landing-main h2,.landing-main h3{font-family:Nunito,Arial,sans-serif}
.landing-button,.primary,.create-button,.site-header nav a[href='/order']{background:var(--brand-cta);color:#332b18;font-family:Nunito,Arial,sans-serif;font-weight:700}
.landing-button:hover,.primary:hover,.create-button:hover,.site-header nav a[href='/order']:hover{color:#332b18;background:var(--brand-cta)}
.site-header nav a[href='/order']{padding:13px 25px;border-radius:999px;text-decoration:none}
.site-header nav a.account-cta{box-sizing:border-box;min-height:44px;padding:13px 25px;border-radius:999px;text-decoration:none}
.site-header nav a.account-cta,.site-header nav a.account-cta:hover{background:var(--brand-green-gradient);color:#fffcef}
.landing-hero h1{font-size:var(--brand-display);line-height:1;letter-spacing:-.045em;font-weight:700}
.landing-hero h1 span,.moment-copy h2 span{color:var(--brand-green)}
.landing-hero{box-sizing:border-box;min-height:100vh;min-height:100dvh;grid-template-columns:minmax(0,.83fr) minmax(0,1fr);align-content:center;align-items:center;padding:120px calc((100% - var(--site-content-width))/2);gap:48px}
.hero-art{height:540px}
.hero-lead{font-size:18px;line-height:1.5}
.hero-cover{width:38%;right:0;bottom:1%}
@media(max-width:1100px){:root{--brand-display:clamp(2.8rem,4.3vw,5rem)}.landing-hero{gap:24px}.hero-art{height:460px}}
@media(max-width:900px){.landing-hero{grid-template-columns:1fr}.hero-art{width:min(620px,100%);margin-inline:auto}}
@media(max-width:680px){:root{--brand-display:clamp(2.3rem,9vw,3.3rem)}.landing-hero{padding-block:138px 36px;gap:24px}.hero-art{height:390px}.hero-lead{font-size:16px}.site-header nav a[href='/order']{padding:8px 12px}}

/* One display hierarchy across the landing. */
.landing-main h2{font-size:clamp(2.3rem,3.3vw,3.2rem);line-height:1.08;letter-spacing:-.04em}
.landing-text-link{font-family:Nunito,Arial,sans-serif;font-weight:700}
.hero-facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;width:100%}
.hero-facts>span{display:flex;align-items:center;gap:8px;font-family:'Noto Sans',Arial,sans-serif;font-size:1rem;line-height:1.25}
.hero-facts b{flex:none;font-family:Nunito,Arial,sans-serif;font-size:2.5rem;line-height:1;font-weight:700;letter-spacing:0;font-variant-numeric:tabular-nums;margin:0}
.hero-facts .fact-label{display:block;max-width:11ch}
.hero-facts>span:nth-child(1) b{color:#5299e6}.hero-facts>span:nth-child(2) b{color:#f43881}.hero-facts>span:nth-child(3) b{color:#7cb348}
.landing-final{background:radial-gradient(circle at 86% 13%,rgba(255,239,179,.85),transparent 31%),linear-gradient(290deg,#ffa22e 0%,#f18372 62%,#ffec89 100%)}
.landing-final h2,.landing-final p{color:#fff}
.landing-final .landing-kicker{color:rgba(255,255,255,.82)}
.landing-final .landing-button-dark{background:var(--brand-cta);color:#332b18}
.quality-section{background:#eef3e5}
.landing-main .section-index,.landing-main .landing-kicker,.process-step>span,.personal-card span{font-family:Nunito,Arial,sans-serif;font-size:14px;font-weight:800;line-height:1.3;letter-spacing:.09em}
.landing-hero{background:#fff}
.hero-art.hero-art-complete{height:auto;aspect-ratio:1450/1068;display:grid;align-items:center}
.hero-art-complete img.hero-scene{position:relative;width:100%;height:auto;inset:auto;object-fit:contain;filter:drop-shadow(0 20px 28px rgba(54,70,39,.12))}
/* Three-layer hero: a grounded book, one changing character pair, and small floating props. */
.hero-art.hero-art-layered{position:relative;display:block;width:100%;height:auto;aspect-ratio:1.18;isolation:isolate;overflow:visible}
.hero-art-layered .hero-layer{position:absolute;display:block;pointer-events:none}
.hero-art-layered .hero-layer img{display:block;position:relative;width:100%;height:100%;inset:auto;object-fit:contain;filter:none}
.hero-book-layer{z-index:1;left:0;right:0;bottom:4%;height:58%;animation:hero-book-drift 8s ease-in-out infinite}
.hero-characters{z-index:3;left:12%;top:3%;width:78%;height:79%;animation:hero-people-drift 9s ease-in-out -2s infinite;will-change:transform;backface-visibility:hidden}
.hero-art-layered .hero-character{position:absolute!important;inset:0!important;width:100%;height:100%;opacity:0;visibility:hidden;transform:translateX(-90px) scale(.97);transition:opacity 1.1s ease,transform 1.6s cubic-bezier(.22,.61,.36,1),visibility 0s linear 1.6s}
.hero-art-layered .hero-character.is-active{opacity:1;visibility:visible;transform:translateX(0) scale(1);transition:opacity 1.1s ease .25s,transform 1.6s cubic-bezier(.22,.61,.36,1),visibility 0s}
.hero-art-layered .hero-character.is-leaving{visibility:visible;opacity:0;transform:translateX(90px) scale(.97);transition:opacity 1s ease,transform 1.6s cubic-bezier(.55,0,.45,1),visibility 0s linear 1.6s}
.hero-art-layered .hero-character.is-reset{transition:none!important}
.hero-object{z-index:2;animation:hero-object-drift 4.6s ease-in-out infinite alternate}
.hero-object--earth{width:15%;height:17%;left:0;bottom:17%;animation-delay:-1.4s}
.hero-object--moon{width:14%;height:16%;right:-1%;top:42%;animation-delay:-2.6s}
.hero-object--rocket{width:15.6%;height:20.4%;left:8%;top:1%;animation-delay:-.7s;filter:blur(.8px)}
.hero-object--kite{width:18%;height:25.5%;right:17%;top:-3%;animation-delay:-2.1s}
.hero-object--boat{z-index:4;width:19.5%;height:19.5%;left:5%;top:46%;animation-delay:-3s}
.hero-object--lantern{width:18%;height:28%;right:-1%;bottom:5%;animation-delay:-1.8s;filter:blur(1.3px)}
.hero-avatar-tray{z-index:4;right:0;top:2.5%;width:11%;height:auto;aspect-ratio:498/1420}
.hero-art-layered .hero-avatar-tray img{width:100%;height:auto;object-fit:contain}
@keyframes hero-book-drift{0%,100%{transform:translateY(0)}50%{transform:translateY(-15px)}}
@keyframes hero-people-drift{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(0,-14px,0) rotate(.4deg)}}
@keyframes hero-object-drift{0%{transform:translate(-3px,5px) rotate(-3deg)}50%{transform:translate(4px,-8px) rotate(2deg)}100%{transform:translate(-1px,2px) rotate(4deg)}}
@media(prefers-reduced-motion:reduce){.hero-book-layer,.hero-characters,.hero-object,.hero-avatar-tray{animation:none}.hero-art-layered .hero-character{transition:none}}
@media(max-width:680px){.landing-main h2{font-size:clamp(1.9rem,7.5vw,2.8rem)}.hero-facts{gap:14px}.hero-facts b{font-size:2rem}}
@media(max-width:680px){
 .landing-hero{display:flex;flex-direction:column;justify-content:center;align-items:stretch;gap:0;padding:82px 16px 24px}
 .landing-hero .hero-copy{display:contents}
 .landing-hero .landing-kicker{order:1;margin:0 0 8px}
 .landing-hero h1{order:2;margin:0 0 8px;font-size:clamp(2.1rem,9vw,2.7rem);line-height:1.03}
 .landing-hero .hero-art.hero-art-complete,.landing-hero .hero-art.hero-art-layered{order:3;width:min(100%,440px);margin:0 auto 12px}
 .hero-object--moon{right:0;top:42%;width:12%;height:14%}
 .hero-object--rocket{width:14%;height:19%}
 .hero-object--kite{width:15%;height:21%;right:17%;top:-1%}
 .hero-object--boat{width:18%;height:18%;left:5%}
 .hero-object--lantern{width:15%;height:23%;right:0;bottom:5%}
 .landing-hero .hero-lead{order:4;margin:0;font-size:14px;line-height:1.5}
 .landing-hero .hero-actions{order:5;display:flex;flex-direction:column;align-items:stretch;gap:16px;width:100%;margin:14px 0 0}
 .landing-hero .hero-actions .landing-button{box-sizing:border-box;width:100%;min-height:46px}
 .landing-hero .hero-actions .landing-text-link{align-self:center;margin:0 0 4px}
 .landing-hero .hero-facts{order:6;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:14px 0 0;padding-top:14px}
 .landing-hero .hero-facts>span{font-size:12px;line-height:1.3}
 .landing-hero .hero-facts b{font-size:1.7rem;margin-bottom:2px}
}

/* Personal story: supplied landscape, restrained frosted glass and scroll depth. */
.landing-statement.story-world{position:relative;isolation:isolate;overflow:hidden;display:grid;place-items:center;min-height:720px;padding:110px max(24px,calc((100% - var(--site-content-width))/2));background:#55452e}
.story-world-background{position:absolute;z-index:-2;inset:-90px 0;display:block;pointer-events:none}
.story-world-background img{width:100%;height:100%;object-fit:cover;object-position:center}
.story-world:after{content:"";position:absolute;z-index:-1;inset:0;background:rgba(20,24,18,.12);pointer-events:none}
.story-glass{box-sizing:border-box;position:relative;width:min(100%,1006px);padding:48px 64px;border-radius:16px;background:linear-gradient(180deg,rgba(34,32,29,.3),rgba(24,25,20,.58));backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);box-shadow:0 24px 64px rgba(0,0,0,.16);text-align:center;color:#fff}
.story-glass:before{content:"";position:absolute;inset:0;border:1px solid transparent;border-radius:inherit;background:linear-gradient(180deg,#fff5ea,rgba(255,245,234,0)) border-box;-webkit-mask:linear-gradient(#000 0 0) padding-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}
.story-glass .section-index{color:#fff4df;margin-bottom:24px}
.story-glass h2{font-size:clamp(2.2rem,3.3vw,3.2rem);line-height:1.05;color:#fff;letter-spacing:-.035em;margin:0 0 28px}
.story-glass .statement-copy{max-width:720px;margin:0 auto;color:#fff;font-size:19px;line-height:1.6}
.story-example{max-width:720px;margin:24px auto 0;padding-top:22px;border-top:1px solid rgba(255,255,255,.22);color:#f7eedf;font-size:16px;line-height:1.65}
.book-sample{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:48px;margin:42px 0 64px}
.book-sample img{width:100%;height:320px;object-fit:contain}
.book-sample h3{font-size:clamp(1.8rem,3vw,2.7rem);line-height:1.12;margin:12px 0 20px}
.book-sample p{color:var(--land-muted);line-height:1.65}
.book-sample small{display:block;color:var(--land-muted);font-size:13px;line-height:1.5;margin-top:18px}
@media(max-width:680px){.landing-statement.story-world{min-height:640px;padding:60px 16px}.story-glass{padding:32px 22px;border-radius:18px;backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px)}.story-glass .statement-copy{font-size:16px}.story-example{font-size:14px}.book-sample{grid-template-columns:1fr;gap:12px;margin:28px 0 40px}.book-sample img{height:250px}.hero-actions .landing-text-link{font-size:15px}}
.landing-hero .hero-actions .landing-button{min-width:224px;min-height:52px;padding:0 24px;white-space:nowrap}
.landing-hero .hero-actions .landing-text-link{white-space:nowrap;font-size:16px}
@media(pointer:fine){a[href],button:not(:disabled),summary,[role="button"]{cursor:url('/assets/ui/cursor-3d-48.webp') 5 2,url('/assets/ui/cursor-3d-48.png') 5 2,pointer}}
@media(prefers-reduced-motion:reduce){.story-world-background{translate:none!important}}