/* Case study: existing OCEAN tokens, isolated from the production first view. */
.making-page{background:#fff;color:var(--color-text,#14213D)}
.making-page .mk-shell{max-width:1296px}
.making-page .mk-intro{display:grid;grid-template-columns:1.05fr 1fr;gap:48px;align-items:center;padding:40px 0 72px}
.making-page .mk-label{color:#526477;font:500 12px/1.6 var(--sans);letter-spacing:.13em;margin:0 0 24px}
.making-page .mk-label span{color:#193D58;margin-right:12px}
.making-page .mk-kicker{margin:0 0 20px;color:#193D58;font-weight:500}
.making-page h1{font:500 clamp(30px,3.1vw,48px)/1.6 var(--serif);letter-spacing:.03em;margin:0 0 24px;max-width:none}
.making-page .mk-lead{font-size:17px;line-height:2;max-width:720px;color:#526477}
.making-page .mk-cover{margin:0;align-self:stretch;position:relative;min-height:440px;background:#EAF0F4}
.making-page .mk-cover img{width:100%;height:100%;position:absolute;inset:0;object-fit:cover;object-position:70% 50%}
.making-page .mk-cover figcaption{position:absolute;inset:auto 24px 24px;background:#fff;padding:20px 24px;font:500 22px/1.6 var(--serif)}
.making-page .mk-cover figcaption span{display:block;font:500 10px/1.8 var(--sans);letter-spacing:.13em;margin-top:8px;color:#526477}
.making-page .mk-nav{display:flex;flex-wrap:wrap;gap:4px 24px;padding:16px 0;border-block:1px solid #CBD5DF}
.making-page .mk-nav a{padding:12px 0;color:#193D58;font-size:14px;text-decoration:underline;text-underline-offset:6px}
.making-page .mk-statement{padding:56px 0 0;display:grid;grid-template-columns:1fr 1fr;gap:48px}
.making-page .mk-statement>p:first-child{font:500 24px/1.9 var(--serif)}
.making-page .mk-statement strong{display:block;font-weight:500;color:#193D58}
.making-page .mk-statement>p:last-child{font-size:16px;line-height:2;color:#526477}
.making-page .mk-section{padding:96px 0;border-bottom:1px solid #CBD5DF;scroll-margin-top:120px}
.making-page .mk-section-head{margin-bottom:40px}
.making-page h2{font:500 clamp(25px,2.7vw,38px)/1.65 var(--serif);margin:0 0 20px;color:#193D58}
.making-page h3{font:500 20px/1.7 var(--serif);margin:0 0 12px;color:#193D58}
.making-page p{line-height:1.9}
.making-page figure{margin:0}
.making-page img{max-width:100%;height:auto}
.making-page .mk-note{font-size:13px;color:#526477;line-height:1.9;margin:20px 0 0;max-width:900px}
.making-page .mk-small{font:500 11px/1.8 var(--sans);letter-spacing:.1em;color:#60516E;margin:0 0 16px}
.making-page .mk-screen{position:relative;aspect-ratio:16/9;background:#071324;isolation:isolate;overflow:hidden;container-type:inline-size}
.making-page .mk-screen picture,.making-page .mk-screen picture img,.making-page .mk-screen video{position:absolute;width:100%;height:100%;inset:0;object-fit:cover}
.making-page .mk-screen video{opacity:0}
.making-page .mk-screen.is-active video{opacity:1}
.making-page .mk-film-final{position:absolute;left:2.1%;top:18%;width:52%;text-align:center;color:#193D58;mix-blend-mode:multiply}
.making-page .mk-final-art{position:relative;aspect-ratio:1120/200;width:100%;overflow:hidden;mix-blend-mode:multiply}
.making-page .mk-final-art img{position:absolute;width:137.142857%;max-width:none;height:auto;left:-19.196429%;top:-82.5%}
.making-page .mk-film-en{font:600 1cqw/1.8 Georgia,serif;letter-spacing:.2em;margin:8px 0 0}
.making-page .mk-film-lead{font:400 2cqw/1.65 var(--serif);margin:2.5% 0 0}
.making-page .mk-film-audience{font:400 1.25cqw/1.8 var(--serif);margin:3% 0 0}
.making-page .mk-film-line{position:absolute;left:18.75%;top:23%;width:62.5%;mix-blend-mode:screen;text-align:center;color:white}
.making-page .mk-letter-art{position:relative;aspect-ratio:768/285;overflow:hidden}
.making-page .mk-letter-art img{position:absolute;width:200%;max-width:none;height:auto;left:0;top:-28.070175%}
.making-page [data-line="1"] .mk-letter-art img{left:-100%}
.making-page [data-line="2"] .mk-letter-art img{top:-207.017544%}
.making-page [data-line="3"] .mk-letter-art img{left:-100%;top:-207.017544%}
.making-page [data-line="2"]{left:28.125%;width:43.75%}
.making-page .mk-film-line>p{font:400 1.05cqw/1.8 Georgia,serif;letter-spacing:.28em;margin:2cqw 0 0}
.making-page .mk-controls{display:flex;flex-wrap:wrap;gap:12px 24px;align-items:center;padding:16px 20px;background:#EAF0F4}
.making-page .mk-controls button{background:#193D58;color:#fff;border:1px solid #193D58;border-radius:4px;min-height:48px;padding:12px 20px;cursor:pointer;font:500 15px/1.6 var(--sans)}
.making-page .mk-controls button[data-replay]{background:white;color:#193D58}
.making-page .mk-controls p{margin:0 0 0 auto;font-size:13px;color:#526477}
.making-page .mk-controls [hidden]{display:none}
.making-page .mk-storyboard{list-style:none;padding:0;margin:40px 0 0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:20px}
.making-page .mk-storyboard img{width:100%;aspect-ratio:16/9;object-fit:cover}
.making-page .mk-time{font-size:12px;color:#60516E;display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px;margin:14px 0}
.making-page .mk-time span{color:#193D58;font-weight:500}
.making-page .mk-storyboard h3{font-size:17px}
.making-page .mk-storyboard li>div>p:last-child{font-size:14px;color:#526477}
.making-page .mk-two{display:grid;grid-template-columns:1fr 1fr;gap:48px}
.making-page .mk-direct{margin:56px 0 32px}
.making-page .mk-direct p:not(.mk-small){font-size:16px;color:#526477}
.making-page .mk-type-study{display:grid;grid-template-columns:1fr 1fr;gap:0;background:#F6F8FA;border:1px solid #CBD5DF}
.making-page .mk-type-study>div{padding:32px;min-width:0}
.making-page .mk-type-study>div+div{border-left:1px solid #CBD5DF}
.making-page .mk-type-study span{font:500 11px/1.7 var(--sans);color:#526477;display:block;margin-bottom:20px}
.making-page .mk-type-study>div>p{font:400 clamp(20px,2.5vw,34px)/1.8 var(--serif);margin:16px 0}
.making-page .mk-type-study figcaption{grid-column:1/-1;padding:20px 32px;border-top:1px solid #CBD5DF;font-size:14px;color:#526477}
.making-page .mk-rhythm{margin-top:56px;display:grid;grid-template-columns:1fr 1.1fr;gap:48px;align-items:center}
.making-page .mk-rhythm p:not(.mk-small){font-size:16px;color:#526477}
.making-page .mk-fade-chart{list-style:none;padding:24px;margin:0;background:#EAF0F4}
.making-page .mk-fade-chart li{display:grid;grid-template-columns:100px 1fr;gap:12px;align-items:center;margin:12px 0;font-size:13px}
.making-page .mk-fade-bar{padding:10px 12px;background:linear-gradient(90deg,#F6F8FA,#B6C8D5);color:#14213D;font-weight:700;border-right:4px solid #193D58}
.making-page .mk-fade-two{margin-left:4%}.making-page .mk-fade-three{margin-left:8%}.making-page .mk-fade-four{margin-left:12%}
.making-page .mk-process-key{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;margin-bottom:24px;font-size:14px;color:#526477}
.making-page .mk-process{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));padding:0;list-style:none;border-block:1px solid #CBD5DF;margin:0}
.making-page .mk-process li{padding:24px 16px;border-right:1px solid #CBD5DF;min-width:0}
.making-page .mk-process li:last-child{border-right:0}
.making-page .mk-step{font:400 30px/1 Georgia,serif;color:#60516E;display:block;margin-bottom:20px}
.making-page .mk-process h3{font-size:21px}.making-page .mk-process p{font-size:14px}
.making-page .mk-ai{border-top:2px solid #193D58;padding-top:16px;color:#526477;margin-top:20px}
.making-page .mk-loop{background:#EAF0F4;margin:0;padding:20px;text-align:center;color:#193D58;font-size:14px}
.making-page .mk-details{border-block:1px solid #CBD5DF;margin-top:32px}
.making-page .mk-details>summary{cursor:pointer;min-height:56px;padding:20px 8px;font-size:16px;font-weight:500;color:#193D58}
.making-page .mk-details>p{padding:0 24px;font-size:15px;max-width:900px}
.making-page .mk-details>p:last-child{padding-bottom:24px}
.making-page .mk-tool-grid{display:grid;grid-template-columns:1fr 1fr;gap:32px;padding:16px 24px 32px}
.making-page .mk-tool-grid p{font-size:15px;color:#526477}
.making-page .mk-photo-grid{display:grid;grid-template-columns:1.5fr 1fr;gap:24px}
.making-page .mk-photo-grid figure:first-child{grid-row:span 2}
.making-page .mk-photo-grid img{width:100%;aspect-ratio:3/2;object-fit:cover}
.making-page .mk-photo-grid figure:first-child img{aspect-ratio:4/5;object-position:center}
.making-page .mk-photo-grid figcaption{padding:16px 0;color:#526477;font-size:14px}
.making-page .mk-photo-grid strong{display:block;margin-bottom:4px;color:#193D58;font-weight:500}
.making-page .mk-image-detail{padding:16px 24px 32px}
.making-page .mk-image-detail img{display:block;width:100%}
.making-page .mk-image-detail p{font-size:14px;color:#526477}
.making-page .mk-secrets{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;align-items:start}
.making-page .mk-secret{border:1px solid #CBD5DF;background:white;min-width:0}
.making-page .mk-secret summary{padding:24px;cursor:pointer;list-style:none}
.making-page .mk-secret summary::-webkit-details-marker{display:none}
.making-page .mk-secret-num{font:400 40px/1 Georgia,serif;color:#60516E;display:block;margin-bottom:20px}
.making-page .mk-secret-title{display:block;font:500 18px/1.7 var(--serif);color:#193D58}
.making-page .mk-secret-hint{display:block;font-size:13px;color:#526477;line-height:1.8;margin:12px 0 20px}
.making-page .mk-secret-open{display:block;font-size:12px;text-decoration:underline;text-underline-offset:5px;color:#193D58}
.making-page .mk-secret[open]{background:#F6F8FA}
.making-page .mk-secret-answer{padding:0 24px 24px;font-size:14px}
.making-page .mk-secret-answer>svg{width:72px;height:72px;display:block;color:#193D58;margin:0 auto 16px}
.making-page .mk-secret-answer img{width:100%;display:block}
.making-page .mk-secret-answer a{display:inline-block;min-height:44px;padding:10px 0;text-decoration:underline;text-underline-offset:4px}
.making-page .mk-quality article{display:grid;grid-template-columns:56px 200px 1fr;gap:32px;align-items:start;border-top:1px solid #CBD5DF;padding:28px 24px}
.making-page .mk-quality article:nth-child(2n){background:#F6F8FA}
.making-page .mk-quality article>span{font:400 28px/1.4 Georgia,serif;color:#60516E}
.making-page .mk-quality p{margin:0;font-size:15px;color:#526477}
.making-page .mk-quality .mk-quality-tech{color:#193D58;font-weight:500;margin-bottom:8px}
.making-page .mk-audit-banner{display:flex;align-items:center;gap:32px;padding:32px;margin-bottom:32px;border:1px solid #CBD5DF;background:#EAF0F4}
.making-page .mk-audit-banner strong{font:400 64px/1 Georgia,serif;color:#193D58}
.making-page .mk-audit-banner span{font:500 17px/1.6 var(--sans);display:block;margin-top:12px}
.making-page .mk-audit-banner p{margin:0;font-size:15px;max-width:600px;color:#526477}
.making-page .mk-search-map{border:1px solid #CBD5DF}
.making-page .mk-search-core{padding:32px;background:#EAF0F4;text-align:center}
.making-page .mk-search-core img{width:100px;height:auto;display:block;margin:0 auto 16px}
.making-page .mk-search-core strong{font:500 14px/1.8 var(--sans);letter-spacing:.14em;display:block}
.making-page .mk-search-core span{display:block;font-size:14px;color:#526477;margin-top:8px}
.making-page .mk-search-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0}
.making-page .mk-search-grid article{padding:28px 24px;border-right:1px solid #CBD5DF}
.making-page .mk-search-grid article:last-child{border-right:0}
.making-page .mk-search-grid .mk-small{font-size:10px}
.making-page .mk-search-grid h3{font-size:18px}
.making-page .mk-search-grid p:last-child{font-size:14px;color:#526477}
.making-page .mk-contact{padding:96px 48px;margin:80px 0;text-align:center;background:#EAF0F4}
.making-page .mk-contact p:not(.mk-label){line-height:2.2;color:#526477}
.making-page .mk-contact .button{max-width:100%;white-space:normal;margin:24px 0;min-height:56px}
.making-page .mk-contact .text-link{display:block;width:fit-content;max-width:100%;margin:0 auto;font-size:14px}
.making-page :is(button,summary,a):focus-visible{outline:3px solid #193D58;outline-offset:4px}
.making-page [hidden]{display:none}
@media(max-width:1023px){
 .making-page .mk-intro{gap:32px}.making-page .mk-cover{min-height:380px}
 .making-page .mk-process{grid-template-columns:repeat(3,minmax(0,1fr))}.making-page .mk-process li:nth-child(3){border-right:0}.making-page .mk-process li:nth-child(-n+3){border-bottom:1px solid #CBD5DF}
 .making-page .mk-storyboard{grid-template-columns:repeat(3,minmax(0,1fr))}.making-page .mk-secrets{grid-template-columns:repeat(3,minmax(0,1fr))}
 .making-page .mk-search-grid{grid-template-columns:1fr 1fr}.making-page .mk-search-grid article:nth-child(2){border-right:0}.making-page .mk-search-grid article:nth-child(-n+2){border-bottom:1px solid #CBD5DF}
 .making-page .mk-rhythm{grid-template-columns:1fr;gap:24px}.making-page .mk-quality article{grid-template-columns:40px 160px 1fr;gap:20px}
}
@media(max-width:760px){
 .making-page .mk-intro{grid-template-columns:1fr;padding:24px 0 40px;gap:32px}.making-page h1{font-size:clamp(26px,6.6vw,38px)}.making-page .mk-cover{min-height:260px}.making-page .mk-cover figcaption{font-size:20px;inset:auto 16px 16px;padding:16px 20px}
 .making-page .mk-lead{font-size:16px}.making-page .mk-nav{gap:0 20px}.making-page .mk-nav a{font-size:13px}
 .making-page .mk-statement{grid-template-columns:1fr;gap:8px;padding-top:32px}.making-page .mk-statement>p:first-child{font-size:21px}
 .making-page .mk-section{padding:64px 0;scroll-margin-top:90px}.making-page .mk-section-head{margin-bottom:28px}.making-page h2{font-size:25px}.making-page .mk-label{font-size:11px;margin-bottom:16px}
 .making-page .mk-screen{aspect-ratio:9/16}.making-page .mk-film-final{left:4%;top:23%;width:92%}.making-page .mk-film-en{font-size:2cqw;letter-spacing:.15em;margin-top:4px}.making-page .mk-film-lead{font-size:3.7cqw;margin-top:7%}.making-page .mk-film-audience{font-size:2.6cqw;margin-top:8%}
 .making-page .mk-film-line{left:4.1667%;width:91.6667%;top:30%}.making-page [data-line="2"]{left:17.9167%;width:64.1667%}.making-page .mk-film-line>p{font-size:2.3cqw;margin-top:4cqw}
 .making-page .mk-controls{padding:16px;gap:12px}.making-page .mk-controls p{margin:0}.making-page .mk-controls button{font-size:14px;padding:12px 16px}
 .making-page .mk-storyboard{display:block;margin-top:28px}.making-page .mk-storyboard li{display:grid;grid-template-columns:36% 1fr;gap:16px;margin:0;padding:20px 0;border-bottom:1px solid #CBD5DF}.making-page .mk-storyboard .mk-time{margin:0 0 8px}.making-page .mk-storyboard h3{font-size:16px}.making-page .mk-storyboard li>div>p:last-child{font-size:13px;margin-bottom:0}
 .making-page .mk-two{grid-template-columns:1fr;gap:24px}.making-page .mk-direct{margin:40px 0 24px}
 .making-page .mk-type-study{grid-template-columns:1fr}.making-page .mk-type-study>div{padding:24px}.making-page .mk-type-study>div+div{border-left:0;border-top:1px solid #CBD5DF}.making-page .mk-type-study figcaption{padding:20px 24px;font-size:13px}
 .making-page .mk-fade-chart{padding:16px}.making-page .mk-fade-chart li{grid-template-columns:80px 1fr;gap:8px;font-size:11px}.making-page .mk-fade-bar{padding:10px 6px}
 .making-page .mk-process{grid-template-columns:1fr 1fr}.making-page .mk-process li{padding:24px 16px}.making-page .mk-process li:nth-child(3){border-right:1px solid #CBD5DF}.making-page .mk-process li:nth-child(2n){border-right:0}.making-page .mk-process li:nth-child(4){border-bottom:1px solid #CBD5DF}
 .making-page .mk-tool-grid{grid-template-columns:1fr;padding:12px 16px 24px;gap:20px}.making-page .mk-photo-grid{grid-template-columns:1fr;gap:24px}.making-page .mk-photo-grid figure:first-child{grid-row:auto}.making-page .mk-photo-grid figure:first-child img{aspect-ratio:3/2}
 .making-page .mk-secrets{grid-template-columns:1fr 1fr;gap:12px}.making-page .mk-secret summary{padding:20px 16px}.making-page .mk-secret-title{font-size:17px}.making-page .mk-secret-num{font-size:34px}.making-page .mk-secret-hint{font-size:12px}.making-page .mk-secret-answer{padding:0 16px 20px;font-size:13px}
 .making-page .mk-quality article{grid-template-columns:32px 1fr;gap:12px;padding:24px 16px}.making-page .mk-quality article>div{grid-column:2}.making-page .mk-quality h3{margin:0}.making-page .mk-quality p{font-size:14px}
 .making-page .mk-audit-banner{align-items:start;gap:24px;padding:24px;flex-direction:column}.making-page .mk-audit-banner strong{font-size:56px}
 .making-page .mk-search-grid{grid-template-columns:1fr}.making-page .mk-search-grid article{padding:24px;border-right:0;border-bottom:1px solid #CBD5DF}.making-page .mk-search-grid article:last-child{border-bottom:0}
 .making-page .mk-contact{padding:48px 20px;margin:48px 0}.making-page .mk-contact h2{font-size:24px}.making-page .mk-contact p:not(.mk-label){font-size:15px}.making-page .mk-contact .button{font-size:15px;padding:16px;text-align:left;gap:16px}
}

.making-page .mk-film{scroll-margin-top:96px}
@media(max-width:760px){.making-page .mk-film{scroll-margin-top:80px}}

.making-page .mk-brand-foundation{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center;margin:40px 0}
.making-page .mk-brand-foundation figure{margin:0}.making-page .mk-brand-foundation img{display:block;width:100%;height:auto;border:1px solid #CBD5DF}
.making-page .mk-brand-foundation figcaption{font-size:13px;color:#526477;margin-top:12px}
.making-page .mk-brand-results{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;margin:48px 0 24px}
.making-page .mk-brand-results article{border-top:1px solid #CBD5DF;padding-top:24px;min-width:0}
.making-page .mk-brand-results img{width:100%;height:145px;object-fit:contain;margin-bottom:24px}
.making-page .mk-brand-results h3{font-size:21px}.making-page .mk-brand-results p{font-size:14px;color:#526477}
.making-page .mk-brand-results a{font-size:14px;text-underline-offset:5px}
.making-page .mk-brand-results .mk-brand-word{height:145px;margin:0 0 24px;display:flex;align-items:center;font:20px/1.8 Georgia,serif;color:#193D58;letter-spacing:.06em}
.making-page .mk-infra-flow{list-style:none;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px}
.making-page .mk-infra-flow li{border-top:2px solid #193D58;padding-top:24px}.making-page .mk-infra-flow span{font-size:12px;letter-spacing:.12em;color:#526477}.making-page .mk-infra-flow h3{font-size:23px;margin-top:20px}.making-page .mk-infra-flow p{font-size:16px}
.making-page .mk-mail-path{margin:40px 0;padding:32px;background:#EAF0F4}.making-page .mk-mail-path ol{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;padding:0;margin:28px 0}.making-page .mk-mail-path li{font-size:16px;border-bottom:1px solid #708496;padding-bottom:16px}.making-page .mk-mail-path p{font-size:14px;color:#526477}
@media(max-width:1023px){.making-page .mk-brand-results{grid-template-columns:1fr 1fr}.making-page .mk-infra-flow{gap:20px}.making-page .mk-infra-flow h3{font-size:20px}.making-page .mk-mail-path ol{grid-template-columns:1fr 1fr}}
@media(max-width:760px){.making-page .mk-brand-foundation{grid-template-columns:1fr;gap:24px}.making-page .mk-brand-results{grid-template-columns:1fr 1fr;gap:24px 16px}.making-page .mk-brand-results img,.making-page .mk-brand-results .mk-brand-word{height:100px}.making-page .mk-brand-results h3{font-size:18px}.making-page .mk-brand-results .mk-brand-word{font-size:16px}.making-page .mk-infra-flow{grid-template-columns:1fr;gap:24px}.making-page .mk-mail-path{padding:24px}.making-page .mk-mail-path ol{grid-template-columns:1fr;gap:16px}.making-page .mk-mail-path li{font-size:15px}}