
/* Final spacing and original visual directions */
:root{--sidebar:220px}
body[data-page] .sidebar{width:var(--sidebar);padding:28px 17px 20px;overflow:hidden;border-right:1px solid #e6dfe5}
body[data-page] .sidebrand{padding:0 8px 25px;flex-shrink:0}
body[data-page] .sidebrand .logo{width:158px}
body[data-page] .sidebrand>span{font-size:13px;letter-spacing:.2px;margin-top:12px;color:#796b7e}
body[data-page] .sidebar #nav{gap:3px;flex-shrink:0}
body[data-page] .sidebar .sidelink{padding:11px 13px;min-height:46px;font-size:16px;line-height:1.5;border-radius:3px;font-weight:400;border:0;border-left:2px solid transparent}
body[data-page] .sidebar .sidelink[aria-current=page]{background:#f2ebf5;color:#694975;border-left-color:#9f7eb0}
body[data-page] .sidebar .sidelink:hover{background:#f6f2ef}
body[data-page] .sidebottom{padding:25px 7px 0;flex-shrink:0;margin-top:auto}
body[data-page] .sidecontact{font-size:14px;min-height:45px;padding:11px 0;gap:9px}
body[data-page] .sideproposals{font-size:13px;min-height:40px;margin-top:4px;display:flex;align-items:center}
body[data-page] .preview-toolbar{padding:12px 36px;background:#fbf8f2;min-height:73px}
body[data-page] .wrap{width:min(1160px,calc(100% - 80px))}
body[data-page] .hero{display:grid;grid-template-columns:1.05fr 1fr;gap:45px;align-items:center;min-height:610px;padding-top:58px;padding-bottom:65px}
body[data-page] .hero h1{font-size:clamp(46px,4.4vw,64px);line-height:1.1;letter-spacing:-1.9px;font-weight:900;margin-bottom:26px}
body[data-page] .hero h1 span{white-space:normal}
body[data-page] .hero h1 span:after{display:block}
body[data-page] .hero .intro{font-size:18px;line-height:1.8;max-width:465px;margin-bottom:24px}
body[data-page] .hero .eyebrow{font-size:12px;letter-spacing:1.3px;line-height:1.7;margin-bottom:23px}
body[data-page] .hero .actions{display:flex;flex-direction:row;align-items:center;gap:16px 24px;margin-top:28px}
body[data-page] .hero .btn{font-size:16px;min-height:53px;padding:15px 21px}
body[data-page] .primary{box-shadow:0 5px 0 #ce9079}
body[data-page] .primary:hover{box-shadow:0 6px 0 #ce9079;transform:translateY(-1px)}
body[data-page] .heronote{font-size:14px;margin-top:24px;line-height:1.7}
body[data-page] .section{padding-top:76px;padding-bottom:76px}
body[data-page] .sectionhead{align-items:end;gap:50px;margin-bottom:36px}
body[data-page] .sectionhead h2{font-size:42px;line-height:1.15;letter-spacing:-1.2px}
body[data-page] .sectionhead>p{margin-bottom:3px;max-width:340px;font-size:17px;line-height:1.8}
body[data-page] .pagehead{padding-top:42px;padding-bottom:42px}
body[data-page] .pagehead h1{margin-bottom:23px}
body[data-page] .pagelead{max-width:740px}
body[data-page] .aboutpreview{padding-top:72px;padding-bottom:72px;gap:65px}
body[data-page] .aboutpreview h2{margin-bottom:24px}
body[data-page] .aboutpreview p:not(.eyebrow){margin-bottom:25px}
body[data-page] .pagecta{padding:40px;gap:45px;margin-top:28px;margin-bottom:55px}
body[data-page] .pagecta .eyebrow{margin-bottom:17px}
body[data-page] .pagecta .textlink{margin-top:14px}
body[data-page] .faqs{gap:65px}
body[data-page] .faqs details{padding:21px 0}
body[data-page] .related{padding-top:10px;padding-bottom:60px}
body[data-page] .servicehero{padding:44px;margin-top:28px}
body[data-page] .servicehero .textlink{margin-left:23px;vertical-align:middle}
body[data-page] .servicehero .pagelead{margin-bottom:30px}
body[data-page] .service h3{margin-bottom:18px}
body[data-page] .service p{margin-bottom:22px}
body[data-page] .servicebottom{padding-top:19px;min-height:49px;margin-top:0}
body[data-page] .valuegrid article{padding-top:27px}
body[data-page] .valuegrid h3{margin-bottom:17px}
body[data-page] .valuegrid p{margin-bottom:0}
body[data-page] .portrait>span{padding:17px 21px}
body[data-page].editorial .hero{grid-template-columns:1.05fr 1fr;gap:65px;padding-top:50px;padding-bottom:70px}
body[data-page].editorial .hero h1{font-family:Georgia,serif;font-weight:400;font-size:clamp(48px,4.4vw,65px);line-height:1.12}
body[data-page].editorial .primary{border-radius:3px;box-shadow:none}
body[data-page].editorial .hero h1 span:after{display:block}
body[data-page].bento .hero{gap:20px;padding-top:30px;padding-bottom:42px;grid-template-columns:1.12fr 1fr;align-items:stretch}
body[data-page].bento .herocopy{padding:45px 36px;border-radius:28px}
body[data-page].bento .hero h1{font-size:clamp(44px,3.8vw,54px);line-height:1.13;font-weight:700}
body[data-page].bento .hero h1 span:after{display:none}
body[data-page].bento .heroquick{display:flex;gap:14px}
body[data-page].bento .heroquick a{min-height:124px;padding:24px;gap:17px}
body[data-page].bento .heroquick a>span{font-size:15px;line-height:1.8}
body[data-page].bento .heroquick strong{font-size:21px;letter-spacing:-.6px}
body[data-page].bento .primary{box-shadow:none;border-radius:12px}
body[data-page].notebook{background-color:#fffdf5;background-image:linear-gradient(#c3b6cc18 1px,transparent 1px),linear-gradient(90deg,#c3b6cc18 1px,transparent 1px);background-size:26px 26px}
body[data-page].notebook .hero{grid-template-columns:1.08fr 1fr;gap:55px;padding-top:67px;padding-bottom:77px;min-height:640px}
body[data-page].notebook .hero h1{font-size:clamp(48px,4.5vw,65px);line-height:1.12;letter-spacing:-2px}
body[data-page].notebook .herocopy>.eyebrow{padding:8px 12px;display:inline-flex;background:#eee9cd;transform:rotate(-1deg);border-radius:3px;letter-spacing:.7px;font-size:12px;margin-bottom:31px}
body[data-page].notebook .notepaper{display:block;min-width:0;padding:45px 30px 55px 45px;min-height:400px;transform:rotate(4deg);background:repeating-linear-gradient(#fffefb 0 37px,#d3ddea 38px 39px);border:1px solid #e6dfd1;box-shadow:8px 10px 0 #e7d8c9;border-radius:3px}
body[data-page].notebook .notepaper>p{font:800 33px/1.4 'Nunito',sans-serif;margin:29px 0 20px;transform:rotate(-2deg)}
body[data-page].notebook .notepaper ul{font-size:19px;line-height:2.05}
body[data-page].notebook .notedate{font-size:11px;letter-spacing:1.1px}
body[data-page].notebook .notestamp{margin-top:35px;font-size:22px}
body[data-page].notebook .primary{box-shadow:none;border:2px solid #665160;border-bottom-width:4px;border-radius:9px;transform:rotate(-1deg)}
body[data-page].notebook .primary:hover{transform:rotate(0) translateY(-1px);box-shadow:none}
body[data-page].notebook .service{border:1px solid #c4b6c6;border-bottom-width:2px;border-radius:4px;box-shadow:5px 6px 0 #e5ded2;transform:rotate(-1deg);position:relative}
body[data-page].notebook .service:nth-child(2){transform:rotate(1.5deg)}
body[data-page].notebook .service:nth-child(3){transform:rotate(-.8deg)}
body[data-page].notebook .service:before{display:block;content:'';position:absolute;top:-14px;left:37%;width:70px;height:28px;background:#c9b3d17a;transform:rotate(-6deg)}
body[data-page].notebook .services{gap:30px}
body[data-page].notebook .service:hover{transform:rotate(0) translateY(-3px)}
body[data-page].notebook .quote{background:#f1d6c5;transform:rotate(.4deg)}
body[data-page].notebook .portrait{border:10px solid #fffdf5;border-bottom-width:55px;border-radius:4px;transform:rotate(-3deg);box-shadow:5px 6px 0 #cbbdd3}
body[data-page].notebook .portrait>span{border-radius:0;bottom:-2px;left:0;right:0;padding:12px 18px}
body[data-page].studio .hero{width:min(1320px,calc(100% - 50px));grid-template-columns:1.1fr 1fr;background:#453449;gap:0;padding:0;min-height:620px;margin-top:20px;margin-bottom:0}
body[data-page].studio .herocopy{padding:56px 43px}
body[data-page].studio .hero h1{font:400 clamp(48px,4.8vw,68px)/1.07 Georgia,serif;letter-spacing:-2.6px}
body[data-page].studio .hero h1 span:after{display:none}
body[data-page].studio .hero>.art{height:100%;min-height:620px}
body[data-page].studio .primary{box-shadow:none;border-radius:0}
body[data-page].studio .hero .intro{color:#e0d4e0}
body[data-page].studio .sidebar .sidelink[aria-current=page]{background:#453449;color:#fcf7ef}
body[data-page] .navbackdrop{display:none}
@media(min-width:1021px) and (max-height:660px){
body[data-page] .sidebar{padding:20px 17px 15px}
body[data-page] .sidebrand{padding-bottom:17px}
body[data-page] .sidebrand>span{display:none}
body[data-page] .sidebar .sidelink{min-height:40px;padding:8px 12px}
body[data-page] .sidebottom{padding-top:13px}
body[data-page] .sidecontact{min-height:38px;padding:8px 0}
body[data-page] .sideproposals{min-height:34px}
}
@media(min-width:1021px) and (max-width:1250px){
body[data-page] .wrap{width:calc(100% - 54px)}
body[data-page] .hero{gap:26px}
body[data-page] .hero h1{font-size:46px}
body[data-page].editorial .hero{gap:35px}
body[data-page].editorial .hero h1{font-size:47px}
body[data-page].notebook .hero{gap:35px}
body[data-page].notebook .hero h1{font-size:48px}
body[data-page].notebook .notepaper{padding:37px 24px 44px 38px;min-height:390px}
body[data-page].notebook .notepaper ul{font-size:17px}
body[data-page].notebook .notestamp{margin-left:35px;font-size:20px}
body[data-page].bento .herocopy{padding:35px 28px}
body[data-page].bento .hero h1{font-size:43px}
body[data-page].bento .heroquick a{padding:20px;gap:12px}
body[data-page].bento .heroquick strong{font-size:19px}
body[data-page].studio .herocopy{padding:40px 30px}
body[data-page].studio .hero h1{font-size:51px}
body[data-page] .sectionhead h2{font-size:37px}
}
@media(max-width:1020px){
body[data-page] .sidebar{width:min(300px,88vw);padding:19px 18px;height:calc(100dvh - 76px - 77px - env(safe-area-inset-bottom,0px));overflow:hidden}
body[data-page] .sidebar .sidebottom{display:none}
body[data-page] .sidebar #nav{gap:3px}
body[data-page] .sidebar .sidelink{font-size:17px;min-height:48px;padding:11px 13px}
body[data-page] .sidebrand{display:none}
body[data-page].menu-open .navbackdrop{display:block}
body[data-page] .preview-toolbar{padding:10px 22px;min-height:68px}
}
@media(max-width:760px){
body[data-page] .wrap{width:calc(100% - 36px)}
body[data-page] .preview-toolbar{padding:8px 18px}
body[data-page] .hero,body[data-page].editorial .hero{grid-template-columns:1fr;gap:40px;min-height:0;padding-top:35px;padding-bottom:48px}
body[data-page] .hero h1,body[data-page].editorial .hero h1{font-size:clamp(36px,9.4vw,47px);line-height:1.12;letter-spacing:-1.2px}
body[data-page] .hero .intro{font-size:17px;line-height:1.8;max-width:none}
body[data-page] .hero .eyebrow{font-size:12px;letter-spacing:.7px;line-height:1.7;margin-bottom:22px}
body[data-page] .hero .actions{display:flex;flex-direction:column;gap:10px;align-items:stretch;margin-top:26px}
body[data-page] .hero .btn{width:100%;min-height:54px}
body[data-page] .hero .textlink{justify-content:center;min-height:46px}
body[data-page] .heronote{font-size:14px;margin-top:17px;line-height:1.8}
body[data-page] .art{height:370px;max-width:440px;margin:0 auto;width:100%}
body[data-page].editorial .art{height:440px}
body[data-page] .section{padding-top:49px;padding-bottom:49px}
body[data-page] .sectionhead{gap:20px;margin-bottom:28px}
body[data-page] .sectionhead h2{font-size:33px;line-height:1.2;letter-spacing:-.9px}
body[data-page] .sectionhead>p{font-size:16px;line-height:1.8;margin-top:20px}
body[data-page] .pagehead{padding-top:29px;padding-bottom:32px}
body[data-page] .servicehero{padding:30px 25px;margin-top:22px}
body[data-page] .servicehero .textlink{margin:13px 0 0;display:flex;justify-content:center}
body[data-page] .servicehero .pagelead{margin-bottom:26px}
body[data-page] .aboutpreview{padding-top:50px;padding-bottom:50px;gap:34px}
body[data-page] .pagecta{padding:31px 26px;margin-top:20px;margin-bottom:40px;gap:24px}
body[data-page] .pagecta h2{font-size:32px;line-height:1.2}
body[data-page] .pagecta .textlink{margin-top:13px}
body[data-page] .faqs{gap:18px;padding-bottom:44px}
body[data-page] .faqs details{padding:20px 0}
body[data-page] .related{padding-top:0;padding-bottom:40px}
body[data-page].bento .hero{grid-template-columns:1fr;gap:20px;padding-top:24px;padding-bottom:35px}
body[data-page].bento .herocopy{padding:32px 26px;border-radius:23px}
body[data-page].bento .hero h1{font-size:clamp(36px,9.3vw,44px);line-height:1.1}
body[data-page].bento .heroquick a{min-height:105px;padding:22px 23px;gap:15px}
body[data-page].bento .heroquick strong{font-size:21px}
body[data-page].bento .heroquick a>span{font-size:15px}
body[data-page].notebook .hero{grid-template-columns:1fr;gap:49px;padding-top:37px;padding-bottom:58px;min-height:0;overflow:hidden}
body[data-page].notebook .hero h1{font-size:clamp(39px,10.1vw,49px);line-height:1.13;letter-spacing:-1.4px}
body[data-page].notebook .herocopy>.eyebrow{padding:8px 11px;font-size:12px;letter-spacing:.3px;transform:rotate(-1deg);display:inline-flex;margin-bottom:27px}
body[data-page].notebook .notepaper{max-width:calc(100% - 28px);width:390px;margin:0 auto;min-height:365px;padding:35px 25px 40px 40px;transform:rotate(2deg)}
body[data-page].notebook .notepaper>p{font-size:30px;margin:26px 0 21px}
body[data-page].notebook .notepaper ul{font-size:17px;line-height:2.05}
body[data-page].notebook .notedate{font-size:10px;letter-spacing:1px}
body[data-page].notebook .notestamp{font-size:20px;margin-left:36px;margin-top:30px}
body[data-page].notebook .notepencil{height:210px;right:2px;bottom:20px}
body[data-page].notebook .services{gap:30px;padding:0 5px}
body[data-page].notebook .service{transform:rotate(-.5deg)}
body[data-page].notebook .service:nth-child(2){transform:rotate(.6deg)}
body[data-page].notebook .portrait{max-width:calc(100% - 18px);height:375px;border-width:8px;border-bottom-width:43px}
body[data-page].studio .hero{width:calc(100% - 24px);grid-template-columns:1fr;gap:0;min-height:0;padding:0;margin-top:12px}
body[data-page].studio .herocopy{padding:37px 26px 32px}
body[data-page].studio .hero h1{font-size:clamp(44px,11.2vw,55px);line-height:1.08;letter-spacing:-1.6px}
body[data-page].studio .hero>.art{height:415px;min-height:415px;max-width:none}
body[data-page].studio .editorialphoto span{left:20px;right:20px;bottom:20px;font-size:21px;padding:19px}
}
@media(max-width:1020px) and (max-height:520px){
body[data-page] .sidebar{width:min(520px,100vw);padding:12px 16px}
body[data-page] .sidebar #nav{display:grid;grid-template-columns:1fr 1fr;gap:2px 12px}
body[data-page] .sidebar .sidelink{font-size:16px;min-height:45px;padding:9px 11px}
}
@media(max-width:359px){
body[data-page] .wrap{width:calc(100% - 28px)}
body[data-page] .hero h1,body[data-page].editorial .hero h1{font-size:35px}
body[data-page] .art{height:350px}
body[data-page] .hero .actions .btn{padding-left:15px;padding-right:15px;font-size:15px}
body[data-page].notebook .hero h1{font-size:37px}
body[data-page].notebook .notepaper{padding-left:36px;padding-right:18px}
body[data-page].notebook .notepaper ul{font-size:15.5px}
body[data-page].notebook .notepaper li:before{margin-right:9px}
body[data-page].notebook .notestamp{margin-left:22px}
body[data-page].studio .hero h1{font-size:41px}
}
@media print{.sidebar{display:none!important}.notepaper{break-inside:avoid}.preview-toolbar{display:none!important}}

@media(min-width:761px){body[data-page].notebook .notepencil{right:4px;transform:rotate(18deg)}}

body[data-page]{overflow-x:clip}
@media(min-width:761px){body[data-page].notebook .notepaper{width:calc(100% - 24px);justify-self:center}body[data-page].notebook .notepencil{right:16px}}
@media(max-width:1020px){body[data-page] .preview-toolbar>a{white-space:nowrap;flex-shrink:0}body[data-page] .preview-toolbar>div{flex:1;justify-content:flex-end}body[data-page] .preview-toolbar select{max-width:100%;width:270px}}
@media(max-width:760px){body[data-page] .preview-toolbar{gap:15px}body[data-page] .preview-toolbar>div{min-width:0}body[data-page] .preview-toolbar select{width:100%;max-width:100%}}
@media(max-width:359px){body[data-page] .preview-toolbar{flex-wrap:wrap;gap:2px}body[data-page] .preview-toolbar>a{min-height:32px;max-width:none;width:100%}body[data-page] .preview-toolbar>div{width:100%;flex-basis:100%}body[data-page] .preview-toolbar select{width:100%;max-width:100%}}

body[data-page].notebook .quote{transform:none}
body[data-page] main :is(.herocopy,.notepaper,.service,.pagehead,.pagelead,.contactinfo){min-width:0}
@media(max-width:760px){
body[data-page] .hero,body[data-page]:is(.editorial,.bento,.notebook,.studio) .hero{grid-template-columns:minmax(0,1fr)}
body[data-page] .services{grid-template-columns:minmax(0,1fr)}
body[data-page] .service h3 br{display:block}
body[data-page].notebook .herocopy>.eyebrow{max-width:100%;white-space:normal}
body[data-page].notebook .notepaper{width:100%;max-width:calc(100% - 28px)}
}

@media(max-width:760px){body[data-page].notebook .subjectband{transform:none}}
