:root{--paper:#fafdff;--ink:#203544;--muted:#6b8595;--line:#dbe8ef;--green:#e8f3f9}
body{background:var(--paper)}
body>header{position:sticky;top:0;z-index:50;height:66px;max-width:none;padding:0 5%;background:#f8fcffb8;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-bottom:1px solid #bed8e53b}
header nav{gap:34px;font-size:13px}header nav a:hover{color:#3983b4}
header .brand{position:relative;width:112px;height:44px;display:flex;align-items:center;font-size:26px;letter-spacing:-1.3px}
.brand .brand-plain{color:var(--ink);transition:opacity .25s,transform .35s}.brand-script{position:absolute;inset:0;width:112px;height:44px;opacity:0;transform:translateY(5px);transition:opacity .3s,transform .4s}.brand:hover .brand-plain,.brand:focus-visible .brand-plain{opacity:0;transform:translateY(-5px)}.brand:hover .brand-script,.brand:focus-visible .brand-script{opacity:1;transform:translateY(0)}
section{scroll-margin-top:86px}.visual-section.visual-entry{height:calc(100svh - 66px);min-height:640px;max-height:860px;margin:0 calc(-5% / .9);border-radius:0;background:radial-gradient(ellipse at 23% 80%,#fffdf0a8,transparent 45%),linear-gradient(120deg,#e3f0f6,#c4e0ed 65%,#d8ebf3)}
.archive-anchor{position:absolute;top:0}.ve-center{top:49%;width:60%}.ve-center h1{font-size:clamp(48px,6.3vw,86px);font-weight:600;letter-spacing:-4px;line-height:1.03;color:#213947;margin:0 0 24px}.ve-center p{font-size:14px;color:#526e80;line-height:1.65}.ve-center .ve-greeting{font-size:17px;color:#294d62;margin:0 0 18px}.ve-cta{background:#f8e879;border-color:#f8e879;font-size:12px;padding:14px 23px}
.ve-tile{border:1px solid #ffffff95;box-shadow:inset 0 1px 3px #fff9,0 12px 35px #4f7fa91c;min-height:90px}.ve-tile span{font-size:10px;color:#3e6480;opacity:1;line-height:1.35}.ve-tile:hover,.ve-tile:focus-visible{transform:translateY(-14px) rotate(2deg) scale(1.06);box-shadow:inset 0 0 0 1px #fff,0 24px 42px #4f7fa947}.glass-ribbon{transform:translate(calc(var(--mx)*32px),calc(var(--my)*23px)) rotate(calc(var(--mx)*2deg));transition:transform .4s ease-out,filter .4s;filter:saturate(1.25)}.ribbon-base{opacity:.95}.visual-entry:hover .glass-ribbon{filter:saturate(1.6) drop-shadow(0 14px 8px #549bd342)}.glass-light{background:radial-gradient(ellipse 210px 160px at var(--light-x) var(--light-y),#fffef0cf,transparent 75%);mix-blend-mode:overlay}
.sprite{position:absolute;left:0;top:0;width:48px;height:48px;pointer-events:none;z-index:20;opacity:0;filter:drop-shadow(0 3px 5px #6a8ba64d);transform:translate(var(--sprite-x,-100px),var(--sprite-y,-100px));transition:opacity .2s}.sprite svg{width:100%;height:100%}.visual-entry.has-pointer .sprite{opacity:1}
@media(hover:hover) and (pointer:fine){.visual-entry.has-pointer,.visual-entry.has-pointer a{cursor:none}}
.purple{background:#e1eef6}.blue{background:#d4e9f3}.peach{background:#e9f1f6}.mint{background:#deedf3}.generate{background:#4c92c4}.webhero em,.footer em,.footer .call a{color:#4c92c4}.footer{background:#e6f1f7}.about-left .portrait{background:#dfedf5}.tag{background:#eff6fa;border-color:#dceaf2;color:#537e96}
/* The viewport scrolls outside the rounded content panel. */
#archive-modal.archive-modal,#archive-modal.archive-modal.is-brand,#case-dialog.dialog{position:fixed;inset:0;margin:0;width:100%;max-width:none;height:100%;max-height:none;padding:24px 3.5%;border:0;border-radius:0;background:transparent;overflow:auto;overscroll-behavior:contain;scrollbar-gutter:stable;color:var(--ink)}
.modal-panel{width:min(1320px,100%);margin:0 auto;background:#fff;border-radius:24px;overflow:clip;min-height:240px;box-shadow:0 20px 80px #17374b30}
#case-dialog .modal-panel{max-width:790px}.archive-modal-bar,.is-brand .archive-modal-bar{position:sticky;top:-24px;z-index:10;background:#ffffffed;backdrop-filter:blur(16px);padding:15px 4%;border-bottom:1px solid var(--line)}
#archive-modal::backdrop,#case-dialog::backdrop{background:#28465d80;backdrop-filter:blur(12px)}
@media(max-width:750px){body>header{height:60px;padding:0 6%}header nav{font-size:12px;gap:24px}header .brand{font-size:25px}.visual-section.visual-entry{margin:0 -6.818%;height:calc(100svh - 60px);min-height:650px;max-height:850px}.ve-center{width:88%;top:48%}.ve-center h1{font-size:clamp(43px,10vw,65px);letter-spacing:-2.3px}.ve-center p{font-size:12px}.ve-center .ve-greeting{font-size:15px;margin-bottom:14px}.ve-tile span{font-size:8px}.ve-tile{min-height:74px;padding:9px}.ve-tile[data-slot="1"]{--x:6%!important;--y:12%!important;--w:22%!important}.ve-tile[data-slot="2"]{--x:40%!important;--y:6%!important;--w:20%!important}.ve-tile[data-slot="3"]{--x:75%!important;--y:14%!important;--w:20%!important}.ve-tile[data-slot="4"]{display:flex;--x:8%!important;--y:76%!important;--w:24%!important}.ve-tile[data-slot="5"]{--x:72%!important;--y:75%!important;--w:23%!important}.glass-ribbon{opacity:1}#archive-modal.archive-modal,#archive-modal.archive-modal.is-brand,#case-dialog.dialog{padding:12px 3%}.modal-panel{border-radius:19px}.archive-modal-bar,.is-brand .archive-modal-bar{top:-12px}.sprite{display:none}}
@media(prefers-reduced-motion:reduce){.sprite{display:none}.visual-entry.has-pointer,.visual-entry.has-pointer a{cursor:auto}}
.ve-tile span{overflow-wrap:anywhere;max-width:100%}.ve-tile[data-slot="1"]{--w:12%!important}
@media(max-width:750px){.ve-tile[data-slot="1"]{--w:24%!important}}
/* Airy powder blue palette and compact category previews. */
:root{--paper:#fafbfd;--ink:#223747;--muted:#7d8b98;--line:#e2edf3}
body>header{background:#fafcfbc4}header nav a:hover,header nav a:focus-visible{text-decoration:none;color:#43afc9}
header .brand{width:82px;height:38px;justify-content:center}.brand .brand-plain{width:82px;text-align:center;font-size:26px;line-height:38px}.brand-script{inset:4px 0;width:82px;height:30px;transform:none}.brand:hover .brand-plain,.brand:focus-visible .brand-plain{transform:none}.brand:hover .brand-script,.brand:focus-visible .brand-script{transform:none}
.visual-section.visual-entry{background:radial-gradient(ellipse 34% 43% at 40% 84%,#f3f4de 0%,transparent 75%),radial-gradient(ellipse 42% 49% at 77% 52%,#b0e2f1 0%,transparent 78%),radial-gradient(ellipse 60% 70% at 28% 29%,#cfe6f5 0%,transparent 77%),#f7f8fb}
.glass-ribbon{filter:saturate(.75)}.visual-entry:hover .glass-ribbon{filter:saturate(1.15) drop-shadow(0 14px 8px #8ad8ee50)}
.ve-tile{overflow:visible}.ve-tile::before{border-radius:inherit}.ve-tile span{position:absolute;left:50%;bottom:-14px;transform:translate(-50%,100%) translateY(5px);background:#284b60;color:#fff;border-radius:30px;padding:9px 14px;white-space:nowrap;max-width:none;opacity:0;pointer-events:none;font-size:11px;transition:opacity .2s,transform .25s;box-shadow:0 5px 14px #37627c19}.ve-tile:hover span,.ve-tile:focus-visible span{opacity:1;transform:translate(-50%,100%) translateY(0)}
.purple{background:#e4f0f8}.blue{background:#dceff7}.peach{background:#eef3f9}.mint{background:#e4f3f5}.footer{background:#eaf4f8}.generate{background:#59b7d2}.webhero em,.footer em,.footer .call a{color:#49acc8}
#archive-modal.is-preview{padding:24px 1.5%}.is-preview .modal-panel{position:relative;max-width:1500px;border-radius:36px;background:#fbfdff;padding:0;min-height:0}.is-preview .archive-modal-bar{position:absolute;right:24px;top:24px;padding:0;border:0;background:none;backdrop-filter:none}.is-preview .archive-modal-bar>span{display:none}.is-preview #archive-close{width:38px;height:38px;padding:5px;background:none;color:#a5adb7}.archive-modal-bar button svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.5}.is-preview .archive-view{padding:44px 48px 32px;max-width:none;min-height:0}.is-preview .category-heading h1{font-size:clamp(25px,3vw,40px);letter-spacing:-.7px;line-height:1.2;margin:0 50px 12px 0;font-weight:650}.category-heading p{font-size:clamp(13px,1.7vw,22px);line-height:1.55;color:#7c8593;margin:0 35px 34px 0}.category-stage{display:grid;grid-template-columns:52px minmax(0,1fr) 52px;align-items:center;gap:28px}.design-placeholder{width:100%;aspect-ratio:1.58;max-height:66vh;background:#f2f5f7;transition:background .2s}.slide-arrow{width:48px;height:48px;border:1px solid #b9c1cb;border-radius:50%;background:none;display:grid;place-items:center;color:#a3adba}.slide-arrow svg{width:25px;height:25px;stroke:currentColor;stroke-width:1.5;fill:none}.slide-arrow:hover:not(:disabled){background:#e8f4fa;color:#49788f}.slide-arrow:disabled{opacity:.25;cursor:default}.slide-dots{display:flex;justify-content:center;gap:14px;margin-top:25px}.slide-dots button{border:0;padding:0;width:9px;height:9px;border-radius:50%;background:#d6dbe0;position:relative}.slide-dots button::before{content:'';position:absolute;inset:-8px}.slide-dots button[aria-current="true"]{background:#263745}.slide-announcement{position:absolute;width:1px;height:1px;clip-path:inset(50%);overflow:hidden}
@media(max-width:750px){.ve-tile span{font-size:9px;padding:8px 10px}.ve-tile[data-slot="1"] span,.ve-tile[data-slot="4"] span{left:0;transform:translateY(100%)}.ve-tile[data-slot="3"] span,.ve-tile[data-slot="5"] span{left:auto;right:0;transform:translateY(100%)}#archive-modal.is-preview{padding:14px 3%}.is-preview .modal-panel{border-radius:25px}.is-preview .archive-view{padding:32px 20px 25px}.is-preview .archive-modal-bar{right:14px;top:17px}.category-heading p{margin-right:0;margin-bottom:27px}.category-stage{grid-template-columns:30px minmax(0,1fr) 30px;gap:10px}.slide-arrow{width:30px;height:30px}.slide-arrow svg{width:18px;height:18px}.design-placeholder{aspect-ratio:.85;max-height:none}.slide-dots{margin-top:22px}}

/* Readable hero type and portfolio-detail tiles. */
.ve-center h1{letter-spacing:0;line-height:1.12;font-size:clamp(46px,5.8vw,80px)}
.ve-tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:inherit;pointer-events:none}
.ve-tile::before{display:none}
.ve-tile span{background:#fff;color:#172f58;box-shadow:0 5px 18px #24435c20;border:1px solid #e4edf4}
.ve-tile[data-slot="2"]{--x:60%!important;--y:10%!important}
@media(max-width:750px){.ve-center h1{font-size:clamp(34px,8.5vw,60px);letter-spacing:0;line-height:1.15}.ve-tile[data-slot="2"]{--x:40%!important;--y:77%!important;--w:21%!important}.ve-tile[data-slot="4"]{--x:7%!important;--y:76%!important}.ve-tile[data-slot="5"]{--x:73%!important;--y:76%!important}}

/* Single Packaging concept for review: original geometric sprite. */
.ve-tile[data-slot="5"]{--w:8.5%!important;min-height:0;padding:0;background:#f6fafb;border-radius:19px;box-shadow:0 7px 20px #47718b12;border:1px solid #fff;--angle:-5deg}
.package-sprite{display:block;width:100%;height:100%;overflow:visible;pointer-events:none}
.package-creature{transform-origin:50px 65px;transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.package-eyes{transition:transform .35s}.package-smile{opacity:0;transition:opacity .25s}.package-spark{opacity:0;transform-origin:81px 27px;transform:scale(.4);transition:opacity .25s,transform .35s}
.ve-tile[data-slot="5"]:hover,.ve-tile[data-slot="5"]:focus-visible{transform:translateY(-12px) rotate(4deg) scale(1.08);background:#fff;box-shadow:0 16px 28px #47718b24}
.ve-tile:is(:hover,:focus-visible) .package-creature{transform:translateY(-5px) rotate(-9deg) scale(1.04,.95)}
.ve-tile:is(:hover,:focus-visible) .package-eyes{transform:translate(2px,-1px)}
.ve-tile:is(:hover,:focus-visible) .package-smile{opacity:1}.ve-tile:is(:hover,:focus-visible) .package-spark{opacity:1;transform:scale(1)}
@media(max-width:750px){.ve-tile[data-slot="5"]{--w:18%!important;--x:76%!important;border-radius:14px}}
@media(prefers-reduced-motion:reduce){.package-creature,.package-eyes,.package-smile,.package-spark{transition:none}}

/* Unified typographic category tiles, following the supplied composition. */
.visual-entry .ve-tile{padding:0;min-height:0;border:0;border-radius:22%;background:linear-gradient(165deg,#b8e2fb 0%,#d6e0fc 63%,#f8f7e8 100%);box-shadow:none;--ratio:1}
.tile-lettering{position:absolute;inset:0;overflow:hidden;border-radius:inherit;display:flex;align-items:center;pointer-events:none}
.tile-lettering i{display:block;white-space:nowrap;font-family:'Snell Roundhand','Segoe Script','Apple Chancery',cursive;font-size:clamp(55px,7.6vw,115px);font-weight:700;line-height:1;letter-spacing:-.025em;color:#f9fcff;transform:translateX(-8%) rotate(-4deg);transition:transform .45s ease,color .3s}
.visual-entry .ve-tile[data-slot="1"]{--x:11%!important;--y:19%!important;--w:10.5%!important;--angle:-8deg}
.visual-entry .ve-tile[data-slot="2"]{--x:71%!important;--y:8%!important;--w:9%!important;--angle:16deg;z-index:4}
.visual-entry .ve-tile[data-slot="3"]{--x:83%!important;--y:31%!important;--w:10%!important;--angle:2deg}
.visual-entry .ve-tile[data-slot="4"]{--x:9%!important;--y:70%!important;--w:11%!important;--angle:19deg}
.visual-entry .ve-tile[data-slot="5"]{--x:74%!important;--y:73%!important;--w:9.5%!important;--angle:-17deg}
.ve-tile[data-slot="1"] .tile-lettering i{color:#bccfff}.ve-tile[data-slot="3"] .tile-lettering i{color:#b3d9fc}
.visual-entry .ve-tile:hover,.visual-entry .ve-tile:focus-visible{background:linear-gradient(155deg,#c4eaff,#e3e7ff 65%,#fffde9);transform:translateY(-10px) rotate(0deg) scale(1.06);box-shadow:0 14px 28px #47718b1a}
.ve-tile:is(:hover,:focus-visible) .tile-lettering i{transform:translateX(-15%) rotate(1deg);color:#fff}
@media(max-width:750px){.visual-entry .ve-tile[data-slot="1"]{--x:7%!important;--y:12%!important;--w:20%!important}.visual-entry .ve-tile[data-slot="2"]{--x:65%!important;--y:8%!important;--w:17%!important}.visual-entry .ve-tile[data-slot="3"]{--x:79%!important;--y:24%!important;--w:17%!important}.visual-entry .ve-tile[data-slot="4"]{--x:9%!important;--y:77%!important;--w:21%!important}.visual-entry .ve-tile[data-slot="5"]{--x:72%!important;--y:78%!important;--w:19%!important}.tile-lettering i{font-size:clamp(49px,14vw,95px)}}
@media(prefers-reduced-motion:reduce){.tile-lettering i{transition:none}}

/* Original broad, rounded lettering in place of the thin script font. */
.rounded-lettering{position:absolute;left:-7%;top:9%;height:84%;width:auto;max-width:none;color:#fbfcf3;transform:rotate(-7deg);transition:transform .4s ease,color .3s;overflow:visible}
.ve-tile[data-slot="1"] .rounded-lettering{color:#bbcfff}.ve-tile[data-slot="3"] .rounded-lettering{color:#b2d8fc}
.ve-tile:is(:hover,:focus-visible) .rounded-lettering{transform:translateX(-5%) rotate(-2deg);color:#fff}
@media(prefers-reduced-motion:reduce){.rounded-lettering{transition:none}}

/* Artwork detail tiles with soft contact shadows. */
.visual-entry .ve-tile{box-shadow:0 3px 5px #243d5d12,0 12px 17px -5px #30496d40,0 23px 35px -17px #30496d35;background:#e8f1f5}
.tile-artwork{display:block;position:absolute;inset:0;width:100%;height:100%;border-radius:inherit;overflow:hidden;pointer-events:none}
.visual-entry .ve-tile:hover,.visual-entry .ve-tile:focus-visible{box-shadow:0 5px 8px #243d5d15,0 18px 25px -6px #30496d4a,0 30px 40px -18px #30496d35}
.ve-cta{position:relative;isolation:isolate;overflow:hidden;min-width:195px;padding:17px 28px;border:1px solid #ffffffd9;border-radius:99px;color:#172b58;background:linear-gradient(105deg,#8cb5ff91 0%,#aeedfa85 48%,#c5f4e185 75%,#eef4b891 100%);backdrop-filter:blur(15px) saturate(1.2);-webkit-backdrop-filter:blur(15px) saturate(1.2);box-shadow:inset 0 2px 5px #fff,inset 0 -3px 8px #ffffffa3,0 5px 8px #34476418,0 11px 23px -10px #3447644a;transition:transform .25s,box-shadow .25s}
.ve-cta:before{content:'';position:absolute;inset:2px;border-radius:inherit;z-index:-1;background:linear-gradient(180deg,#ffffff69,transparent 48%,#ffffff20);pointer-events:none}
.ve-cta span{display:none}
.ve-cta:hover{background:linear-gradient(105deg,#8cb5ffb0,#aeedfaa3 48%,#c5f4e1a3 75%,#eef4b8b0);transform:translateY(-3px);box-shadow:inset 0 2px 6px #fff,inset 0 -3px 8px #ffffffa3,0 12px 22px -7px #34476440}
@media(max-width:750px){.ve-cta{min-width:180px;padding:15px 23px}}