@font-face { font-family: Loverine; src: url('../font/Loverine.otf') format('opentype'); font-style: normal; font-weight: 400; font-display: swap; }
:root { font-family: 'Clarity City', Arial, sans-serif; color: #111; background: #fff; --ai: #f1ff53; --brand: #98e9f5; --web: #F47A93; }
* { box-sizing: border-box; }
body { margin: 0; }
a { color: inherit; text-decoration: none; }
a:focus-visible, button:focus-visible, [tabindex]:focus-visible { outline: 2px solid #F47A93; outline-offset: 5px; }
.case-skip { position: fixed; top: -100px; padding: 12px; background: white; z-index: 20; }
.case-skip:focus { top: 10px; }
.handwritten { font-family: Loverine, cursive; font-weight: 400; color: var(--web); }
.case-header { position: relative; display: flex; align-items: center; justify-content: space-between; height: 112px; background: black; color: white; padding: 0 6%; font-size: 17px; }
.case-signature { position: absolute; width: 210px; height: 85px; left: 50%; top: 50%; transform: translate(-50%,-50%); }
.case-signature img { width: 100%; height: 100%; object-fit: contain; }
.case-toolbar { height: 75px; border-bottom: 1px solid var(--web); display: flex; align-items: center; justify-content: space-between; padding: 0 6%; }
.next-project { font-size: 30px; }
.next-project span { font-family: 'Clarity City',sans-serif; font-size: 27px; margin-left: 15px; }
.overview-link { font-size: 13px; }
.case-layout { display: grid; grid-template-columns: 46% 54%; height: calc(100dvh - 187px); min-height: 450px; }
.case-info { align-self: start; height: 100%; overflow-y: auto; text-align: center; padding: 36px 15% 25px; }
.case-kicker { display: block; text-align: right; font-size: 44px; line-height: 1.1; }
.case-info h1 { font-size: clamp(24px,2.2vw,35px); font-weight: 400; margin: 0; line-height: 1.15; white-space: nowrap; }
.case-year { margin: 3px 0 35px; font-size: 20px; }
.case-description { font-size: clamp(14px,1.25vw,19px); line-height: 1.22; margin: 0 auto; max-width: 365px; }
.description-pink { color: var(--web); }
.description-green { color: #a9b731; }
.description-cyan { color: #65cadc; }
.case-description [class^="description-"] { font-weight: 700; }
.description-green { color: #cddc43; }
.description-cyan { color: #98e9f5; }
.explore-block { margin: 34px auto 0; }
.explore-block::before { content: ''; display: block; width: 105px; height: 1px; background: #aaa; margin: 0 auto 30px; }
.explore-block h2 { font-weight: 300; font-size: 21px; line-height: 1.15; margin: 0 0 28px; }
.category-links { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px; }
.category { display: inline-block; border: 1px solid currentColor; border-radius: 50px; padding: 4px 9px; font-size: 11px; line-height: 1.2; transition: color .25s,background-color .25s,border-color .25s; white-space: nowrap; }
.category.ai { --category: var(--ai); }
.category.brand { --category: var(--brand); }
.category.web { --category: var(--web); }
.case-info .category { border-color: #aaa; }
.category:hover, .category:focus-visible, .explore-cards a:hover .category { color: #111; background: var(--category); border-color: var(--category); }
.presentation { overflow-y: auto; overscroll-behavior: contain; scroll-behavior: auto; height: 100%; scrollbar-width: thin; scrollbar-color: #ddd white; }
.presentation-image { width: 100%; height: auto; display: block; }
.subpage-title { font-size: 17px; font-weight: 400; margin: -20px 0 24px; }
.motion-control { position: fixed; right: 18px; bottom: 16px; border: 1px solid #ccc; padding: 7px 11px; border-radius: 30px; background: #fffffff2; font: 11px 'Clarity City',sans-serif; cursor: pointer; }
.explore-page { background: black; color: white; }
.explore-main { padding: 45px 5% 50px; }
.explore-heading { display: flex; align-items: center; gap: 35px; }
.explore-heading h1 { font-size: 32px; font-weight: 300; white-space: nowrap; }
.heading-rule { height: 1px; background: var(--ai); flex: 1; opacity: .55; }
.explore-heading p { font-size: 14px; font-weight: 300; width: 180px; }
.explore-main>h2 { text-align: center; font-size: 27px; font-weight: 400; margin: 55px 0 65px; }
.explore-main>h2 strong { color: var(--ai); }
.explore-cards { display: grid; grid-template-columns: 1fr 1fr 1.48fr; gap: 24px; padding: 0 2%; align-items: start; }
.explore-cards a { text-align: center; }
.explore-cards img { display: block; width: 100%; height: auto; margin-bottom: 20px; }
.explore-cards .category { color: var(--category); }
.explore-back { display: inline-block; margin-top: 45px; font-size: 14px; }
.explore-page .case-header { display: none; }
.explore-main { padding-top: 6vw; }
.explore-heading h1 { font-size: clamp(25px,3.2vw,46px); }
.explore-heading p { font-size: clamp(12px,1.7vw,24px); }
.explore-main>h2 { font-size: clamp(22px,2.7vw,40px); }
.explore-cards .category { font-size: clamp(12px,1.5vw,22px); padding: 5px 12px; }
@media(max-height:760px) and (min-width:701px) { .case-header { height: 85px; } .case-toolbar { height: 60px; } .case-layout { height: calc(100dvh - 145px); min-height: 0; } .case-info { padding-top: 20px; } .case-kicker { font-size: 34px; } .case-year { margin-bottom: 22px; } .explore-block { margin-top: 24px; } .explore-block::before { margin-bottom: 20px; } .explore-block h2 { margin-bottom: 18px; } }
@media(max-width:700px) { .case-header { height: 80px; font-size: 14px; } .case-signature { width: 150px; height: 65px; } .case-toolbar { height: 60px; padding: 0 6%; } .next-project { font-size: 25px; } .case-layout { display: block; height: auto; min-height: 0; } .case-info { height: auto; overflow: visible; padding: 35px 10% 45px; } .case-kicker { text-align: center; font-size: 40px; } .case-info h1 { font-size: 27px; } .case-year { margin-bottom: 26px; } .case-description { font-size: 15px; max-width: 310px; } .presentation { height: auto; overflow: visible; } .motion-control { display: none; } .explore-main { padding: 25px 7%; } .explore-heading { gap: 15px; } .explore-heading h1 { font-size: 22px; } .explore-heading p { font-size: 10px; width: 90px; } .explore-main>h2 { font-size: 22px; margin: 35px 0; } .explore-cards { grid-template-columns: 1fr; gap: 35px; padding: 0 8%; } .explore-cards img { max-height: 420px; object-fit: contain; } }
@media(prefers-reduced-motion:reduce) { * { transition: none !important; scroll-behavior: auto !important; } }
.overview-link{font-size:17px}
@media(min-width:701px){
.explore-main{height:100dvh;display:grid;grid-template-rows:auto auto minmax(0,1fr) auto;gap:clamp(12px,3vh,32px);padding:clamp(20px,5vh,65px) 5% 20px}
.explore-heading h1{margin:0}
.explore-heading p{margin:0;font-size:clamp(12px,1.4vw,22px)}
.explore-main>h2{margin:0;font-size:clamp(22px,2.5vw,38px)}
.explore-cards{min-height:0;height:100%;gap:24px}
.explore-cards a{min-height:0;height:100%;display:flex;align-items:center;flex-direction:column}
.explore-cards img{min-height:0;max-height:calc(100% - 48px);width:100%;object-fit:contain;object-position:top;margin-bottom:14px}
.explore-cards .category{flex-shrink:0}
.explore-back{margin:0;font-size:13px}
}

/* Original Maeve information style, shared by all case studies. */
.case-info {padding:36px 15% 25px}
.case-kicker {font-size:44px;line-height:1.1;text-align:right}
.case-info h1 {font-size:clamp(24px,2.2vw,35px);font-weight:400;line-height:1.15}
.case-year {font-size:20px;text-align:center;padding:0;margin:3px 0 35px}
.case-description {font-size:clamp(14px,1.25vw,19px);line-height:1.22;max-width:365px}
.subpage-title {font-size:17px;margin:-20px 0 24px;font-weight:400}
.explore-block {margin:34px auto 0}
.explore-block::before {width:105px;background:#aaa;margin:0 auto 30px}
.explore-block h2 {font-size:21px;line-height:1.15;margin:0 0 28px;font-weight:300}
.case-info .category {font-size:11px;padding:4px 9px}
@media(max-height:760px) and (min-width:701px){.case-info{padding-top:20px}.case-kicker{font-size:34px}.case-year{margin-bottom:22px}.explore-block{margin-top:24px}.explore-block::before{margin-bottom:20px}.explore-block h2{margin-bottom:18px}}
@media(max-width:700px){.case-info{padding:35px 10% 45px}.case-kicker{text-align:center;font-size:40px}.case-info h1{font-size:27px}.case-year{margin-bottom:26px}.case-description{font-size:15px;max-width:310px}}
/* Reserve the marked top spacing when there is no handwritten category. */
.case-info:not(:has(.case-kicker)){padding-top:56px}
@media(max-height:760px) and (min-width:701px){.case-info:not(:has(.case-kicker)){padding-top:40px}}
@media(max-width:700px){.case-info:not(:has(.case-kicker)){padding-top:55px}}
/* Maeve website mockup and the outlined visit link. */
body[data-category="web"] .presentation{display:flex;flex-direction:column;align-items:center;padding-top:clamp(48px,6.5vh,85px);overflow-x:hidden}
body[data-category="web"] .presentation video{width:108%;max-width:none;flex-shrink:0}
.visit-website{border:1px solid #111;border-radius:999px;background:transparent;color:#111;font:18px 'Clarity City',sans-serif;line-height:1.2;padding:6px 14px;margin:24px 0 30px;cursor:pointer;display:inline-flex;align-items:center;gap:12px;transition:color .25s,border-color .25s,background-color .25s}
.visit-website span{font-size:27px;line-height:1}
.visit-website:hover,.visit-website:focus-visible{background:#F47A93;border-color:#F47A93;color:#111}
@media(max-width:700px){body[data-category="web"] .presentation{padding-top:35px}.visit-website{font-size:16px;margin-top:18px}}
body[data-category="web"] .presentation{position:relative;overflow:visible}
.visit-website{position:absolute;left:-26px;top:47%;transform:translate(-50%,-50%);width:112px;height:112px;padding:0;margin:0;border-radius:50%;display:flex;flex-direction:column;justify-content:center;gap:3px;background:white;z-index:2}
.visit-website .visit-label{font-size:20px;line-height:1.15}
.visit-website .visit-arrow{font-size:30px;line-height:1}
.visit-website:hover,.visit-website:focus-visible{background:#F47A93;border-color:#F47A93;color:white}
@media(max-width:700px){body[data-category="web"] .presentation{overflow:visible}.visit-website{position:relative;left:auto;top:auto;transform:none;align-self:center;width:96px;height:96px;margin:20px 0 30px}.visit-website .visit-label{font-size:18px}}
.description-light-pink{color:#ffd7dd;font-weight:700}
/* Final simple header: signature left, three links right. */
.case-header.simple-header{height:155px;padding:0 7.5%;display:flex;align-items:center;justify-content:space-between;background:#000;color:white}
.simple-header .case-signature{position:static;transform:none;width:210px;height:85px}
.simple-header-links{display:flex;align-items:center;gap:36px;font-size:27px;font-weight:300}
.simple-header-links a:hover{color:#F47A93}
body:has(.simple-header) .case-layout{height:calc(100dvh - 230px);min-height:0}
@media(max-height:760px) and (min-width:701px){.case-header.simple-header{height:120px}body:has(.simple-header) .case-layout{height:calc(100dvh - 180px)}}
@media(max-width:700px){.case-header.simple-header{height:95px;padding:0 6%}.simple-header .case-signature{width:135px;height:65px}.simple-header-links{gap:16px;font-size:16px}body:has(.simple-header) .case-layout{height:auto}}
.simple-header-links{font-size:17px;font-weight:400}
@media(max-width:700px){.simple-header-links{font-size:14px}}
.case-header.simple-header{height:112px;padding:0 7.5%}
.simple-header .case-signature{width:170px;height:75px}
body:has(.simple-header) .case-layout{height:calc(100dvh - 187px)}
@media(max-height:760px) and (min-width:701px){.case-header.simple-header{height:85px}body:has(.simple-header) .case-layout{height:calc(100dvh - 145px)}}
@media(max-width:700px){.case-header.simple-header{height:80px;padding:0 6%}.simple-header .case-signature{width:135px;height:65px}body:has(.simple-header) .case-layout{height:auto}}
/* Branding composition matches the supplied reference below the existing header. */
body[data-category="brand"] .case-layout{height:calc(100dvh - 112px);min-height:0}
body[data-category="brand"] .case-info{padding:clamp(55px,7.5vh,90px) 12% 35px}
body[data-category="brand"] .case-kicker{font-size:clamp(38px,4vw,56px);text-align:right}
body[data-category="brand"] .case-info h1{font-size:clamp(28px,3.2vw,44px)}
body[data-category="brand"] .case-year{text-align:right;padding-right:12%;font-size:clamp(21px,2.4vw,30px);margin:3px 0 44px}
body[data-category="brand"] .case-description{font-size:clamp(17px,1.9vw,26px);line-height:1.2;max-width:none}
body[data-category="brand"] .explore-block{margin-top:42px}
body[data-category="brand"] .explore-block::before{width:40%;background:#444;margin-bottom:42px}
body[data-category="brand"] .explore-block h2{font-size:clamp(21px,2.2vw,30px);margin-bottom:30px}
body[data-category="brand"] .category-links{gap:22px}
body[data-category="brand"] .category{font-size:clamp(11px,1.25vw,16px)}
.brand-next{display:inline-block;margin-top:30px;font-size:30px}
@media(max-height:850px) and (min-width:701px){body[data-category="brand"] .case-info{padding-top:35px}body[data-category="brand"] .case-description{font-size:clamp(16px,1.4vw,21px)}body[data-category="brand"] .case-year{margin-bottom:30px}body[data-category="brand"] .explore-block{margin-top:28px}body[data-category="brand"] .explore-block::before{margin-bottom:25px}}
@media(max-height:760px) and (min-width:701px){body[data-category="brand"] .case-layout{height:calc(100dvh - 85px)}}
@media(max-width:700px){body[data-category="brand"] .case-layout{height:auto}body[data-category="brand"] .case-info{padding:40px 10%}body[data-category="brand"] .case-description{font-size:18px}body[data-category="brand"] .case-year{font-size:22px}}
/* Restore the previously approved typography, keeping the new arrangement. */
body[data-category="brand"] .case-kicker{font-size:44px}
body[data-category="brand"] .case-info h1{font-size:clamp(24px,2.2vw,35px)}
body[data-category="brand"] .case-year{font-size:20px}
body[data-category="brand"] .case-description{font-size:clamp(14px,1.25vw,19px);line-height:1.22;max-width:365px}
body[data-category="brand"] .explore-block h2{font-size:21px;line-height:1.15}
body[data-category="brand"] .category{font-size:11px}
@media(max-height:760px) and (min-width:701px){body[data-category="brand"] .case-kicker{font-size:34px}}
@media(max-width:700px){body[data-category="brand"] .case-kicker{font-size:40px}body[data-category="brand"] .case-info h1{font-size:27px}body[data-category="brand"] .case-description{font-size:15px;max-width:310px}}
.explore-language{position:fixed;right:4%;bottom:max(24px,env(safe-area-inset-bottom));display:flex;align-items:center;gap:8px;z-index:40;font-size:16px;background:#000;padding:8px 10px;border-radius:20px}
.explore-language button{font:inherit;color:#888;background:none;border:0;padding:4px;cursor:pointer}
.explore-language button[aria-pressed="true"],.explore-language button:hover{color:#dfff00}
.explore-language button:focus-visible{outline:1px solid #dfff00;outline-offset:3px}