body{background:#f5f7f2}.case-hero{display:grid;grid-template-columns:.8fr 1.2fr;gap:5vw;align-items:center;padding-block:64px 76px}.case-hero-copy h1{font-size:clamp(65px,8vw,132px);line-height:1;margin:20px 0 25px;letter-spacing:-.08em}.case-lede{font-size:clamp(19px,2.1vw,29px);line-height:1.55;letter-spacing:-.03em;max-width:640px}.case-tags{display:flex;gap:7px;flex-wrap:wrap;margin:26px 0 34px}.case-tags span{border:1px solid #b7cfc0;border-radius:100px;padding:7px 11px;font-size:12px;color:#43624c}.case-hero-image{margin:0;background:#102018;border-radius:20px;overflow:hidden;box-shadow:0 24px 70px #2348301a}.case-hero-image img{width:100%;height:auto}.case-bar{background:#183c2e;color:#fff}.case-bar>.wrap{display:flex;align-items:center;gap:36px;padding-block:18px}.case-bar span{font-weight:750;white-space:nowrap;font-size:13px}.case-bar p{margin:0;color:#c7dfcc;font-size:13px;line-height:1.55}.case-jump{display:flex;gap:9px;flex-wrap:wrap;padding-block:34px}.case-jump a{border:1px solid #b8d4c1;border-radius:100px;padding:10px 14px;text-decoration:none;font-size:13px;font-weight:650}.case-jump a:hover{background:#dff1e3}.case-section{padding-block:60px;border-top:1px solid #d9e2da}.case-section-head{display:grid;grid-template-columns:180px minmax(0,1fr) minmax(230px,440px);align-items:start;gap:20px;margin-bottom:38px}.case-section-head h2{font-size:clamp(32px,4vw,56px);letter-spacing:-.055em;line-height:1.15;margin:0}.case-section-head>p:last-child{font-size:15px;line-height:1.8;color:#59665d;margin:0}.boards{display:grid;gap:48px;justify-items:center}.case-board{margin:0;width:min(100%,1120px)}.case-board a{display:block;border-radius:14px;overflow:hidden;background:#fff;box-shadow:0 14px 42px #24432e16;outline-offset:5px}.case-board img{width:100%;height:auto}.case-board figcaption{display:flex;justify-content:space-between;gap:20px;padding:13px 3px;font-size:12px;color:#607267}.case-board figcaption span:first-child{font-weight:700;color:#28382f}.screen-section{padding-block:80px 100px;background:#17221c;color:#f7fbf6}.screen-section .section-index{color:#8adcb0}.screen-section .case-section-head>p:last-child{color:#c2d4c6}.screen-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:34px 14px;margin-top:40px}.screen-grid figure{margin:0;text-align:center;min-width:0}.screen-grid a{display:block;outline-offset:2px;transition:transform .2s}.screen-grid a:hover{transform:translateY(-7px)}.screen-grid img{width:100%;height:auto;max-height:470px;object-fit:contain}.screen-grid figcaption{font-size:13px;font-weight:650;color:#d4e6d8;margin-top:8px}.case-end{padding-block:92px;display:flex;align-items:end;justify-content:space-between;gap:30px}.case-end p{font:bold clamp(32px,6vw,83px)/.95 Arial,sans-serif;letter-spacing:-.075em;max-width:580px;margin:0}.case-end div{display:flex;gap:16px;flex-wrap:wrap}.case-end a{font-size:14px;font-weight:700;text-underline-offset:5px}
@media(max-width:960px){.case-hero{grid-template-columns:1fr;gap:35px}.case-hero-copy h1{font-size:80px}.case-hero-image{max-width:760px}.case-section-head{grid-template-columns:1fr;gap:9px}.case-section-head>p:last-child{max-width:690px}.screen-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:640px){.site-header nav{gap:8px}.site-header nav a{font-size:11px}.case-hero{padding-block:48px}.case-hero-copy h1{font-size:70px}.case-lede{font-size:20px}.case-bar>.wrap{display:block}.case-bar p{margin-top:6px}.case-jump{padding-block:25px}.case-jump a{font-size:12px;padding:9px}.case-section{padding-block:48px}.boards{gap:28px}.case-board figcaption{font-size:11px}.screen-section{padding-block:56px}.screen-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 5px}.screen-grid img{max-height:320px}.case-end{display:block;padding-block:65px}.case-end p{margin-bottom:24px}.case-end div{display:grid;gap:12px}}
@media(prefers-reduced-motion:reduce){.screen-grid a{transition:none}}

/* The gallery stays inside the project page instead of navigating to image files. */
.case-board .image-trigger,.screen-grid .image-trigger{display:block;width:100%;padding:0;border:0;background:transparent;cursor:zoom-in;outline-offset:5px}
.case-board .image-trigger{border-radius:14px;overflow:hidden;background:#fff;box-shadow:0 14px 42px #24432e16}
.case-board .image-trigger img{width:100%;height:auto;display:block}
.screen-grid .image-trigger{transition:transform .2s}
.screen-grid .image-trigger:hover{transform:translateY(-7px)}
.screen-grid .image-trigger img{width:100%;height:auto;max-height:470px;object-fit:contain}
.media-viewer{width:min(96vw,1800px);max-width:96vw;max-height:96dvh;padding:0;border:1px solid #ffffff2b;border-radius:16px;background:#17221c;color:#fff;box-shadow:0 25px 80px #0006;overflow:hidden}
.media-viewer::backdrop{background:#08140edb;backdrop-filter:blur(5px)}
.viewer-toolbar{height:62px;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:11px 18px;background:#17221c;border-bottom:1px solid #ffffff23}
.viewer-caption{margin:0;font-size:13px;font-weight:650;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.viewer-toolbar>div{display:flex;gap:7px;flex:none}
.viewer-toolbar button{border:1px solid #ffffff5c;border-radius:100px;padding:8px 13px;background:transparent;color:#fff;font-family:inherit;font-size:12px;font-weight:600;line-height:1.3;cursor:pointer}
.viewer-toolbar button:hover{background:#ffffff1c}
.viewer-canvas{height:calc(96dvh - 62px);overflow:auto;display:flex;align-items:center;justify-content:center;padding:13px}
.viewer-canvas img{display:block;width:auto;height:auto;max-width:100%;max-height:calc(96dvh - 88px);object-fit:contain}
.media-viewer.is-zoomed .viewer-canvas{align-items:flex-start;justify-content:flex-start}
.media-viewer.is-zoomed .viewer-canvas img{max-width:none;max-height:none}

/* Add finished artwork directly into the PDF page's reserved image slots. */
.composite-visual,.composite-viewer-frame{position:relative;display:block}
.case-board .image-trigger .composite-base,.viewer-canvas .composite-viewer-frame .composite-base{display:block;width:100%;height:auto}
.case-board .image-trigger .composite-overlay,.viewer-canvas .composite-viewer-frame .composite-overlay{position:absolute;top:var(--y);left:var(--x);width:var(--w);height:var(--h);max-width:none;max-height:none;object-fit:var(--fit,cover);object-position:var(--position,center);border-radius:var(--radius,0);background:var(--background,transparent);pointer-events:none}
.persona-portrait{--y:25.65%;--w:19.6%;--h:20.7%;--position:center 34%;--radius:5%}
.persona-portrait-planner{--x:9%}
.persona-portrait-companion{--x:53.25%}
.mood-image{--x:65.35%;--y:21.5%;--w:24.15%;--h:42.3%;--position:center 58%;--radius:0 0 4% 4%}
.component-image{--x:73.15%;--y:34.6%;--w:21.3%;--h:56.8%;--fit:contain;--background:#eff8ef;--radius:3%}
.me-orders-image,.me-preferences-image{--x:46.25%;--w:34.45%;--fit:cover;--radius:2%;--background:#ecf7ef}
.me-orders-image{--y:26.2%;--h:17.8%}
.me-preferences-image{--y:44%;--h:19.7%}
.composite-viewer-frame{width:min(100%,var(--fit-width,900px));flex:none}
.composite-viewer-frame[hidden],.viewer-canvas img[hidden]{display:none}
.media-viewer.is-zoomed .composite-viewer-frame{width:var(--native-width,2000px);max-width:none}

/* Only icons that appear in the current app screens are shown here. */
.actual-icons-board{border-radius:16px;background:#eff6f0;padding:clamp(25px,4vw,56px);min-height:610px}
.actual-icons-top{display:flex;justify-content:space-between;gap:20px;color:#57695d;font-size:13px}
.actual-icons-top strong{color:#243c2e}
.actual-icons-intro{display:grid;grid-template-columns:minmax(200px,.72fr) 1.28fr;align-items:end;gap:35px;margin:68px 0 30px}
.actual-icons-intro h3{font-size:clamp(30px,4vw,54px);letter-spacing:-.06em;line-height:1.12;margin:0}
.actual-icons-intro p{font-size:15px;line-height:1.75;color:#52675a;margin:0;max-width:580px}
.actual-icons-panel{background:#fff;border-radius:18px;padding:30px}
.actual-icons-label{margin:0 0 17px;font-size:15px;font-weight:750}
.actual-icons-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.actual-icon-item{display:flex;align-items:center;flex-direction:column;gap:4px;min-height:145px;padding:20px 10px;border-radius:14px;background:#f8fbf8;color:#395c48;text-align:center}
.actual-icon-item strong{font-size:15px}
.actual-icon-item small{font-size:11px;color:#6a8271}
.actual-icon-well{width:46px;height:46px;display:grid;place-items:center;border-radius:12px;color:#7a9a86;margin-bottom:4px}
.actual-icon-well.is-active{background:#d8f8e7;color:#12a76b}
.actual-icon-well svg,.actual-search-field svg{display:block;width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.actual-icons-search{display:grid;grid-template-columns:1fr 1.4fr;gap:28px;align-items:center;margin-top:25px;padding-top:24px;border-top:1px solid #e6eee7}
.actual-icons-search .actual-icons-label{margin-bottom:5px}
.actual-icons-search span{font-size:12px;color:#718478}
.actual-search-field{display:flex;align-items:center;gap:12px;border:1px solid #dce9de;border-radius:11px;background:#f7faf7;padding:14px 16px;color:#4f7460}
.actual-search-field span{font-size:13px}

@media(max-width:640px){.screen-grid .image-trigger img{max-height:320px}.viewer-toolbar{padding-inline:10px}.viewer-toolbar button{padding:7px 9px;font-size:11px}.viewer-canvas{padding:7px}.actual-icons-board{min-height:0;padding:24px 18px}.actual-icons-intro{grid-template-columns:1fr;gap:12px;margin:38px 0 23px}.actual-icons-intro h3{font-size:34px}.actual-icons-intro p{font-size:13px}.actual-icons-panel{padding:17px}.actual-icons-grid{grid-template-columns:repeat(2,1fr);gap:8px}.actual-icon-item{min-height:130px;padding:15px 8px}.actual-icons-search{grid-template-columns:1fr;gap:12px}.actual-search-field{padding:12px}.actual-search-field span{font-size:11px}}
@media(prefers-reduced-motion:reduce){.screen-grid .image-trigger{transition:none}}