@font-face{font-family:"Baloo 2";font-weight:400 800;font-display:swap;src:url(/assets/fonts/baloo2.woff2) format("woff2")}
@font-face{font-family:"Outfit";font-weight:100 900;font-display:swap;src:url(/assets/fonts/outfit.woff2) format("woff2")}
@font-face{font-family:"Patrick Hand";font-display:swap;src:url(/assets/fonts/patrickhand.woff2) format("woff2")}

:root{--brown:#46260c;--navy:#0B4F78;--deep:#432916;--halo:0 0 3px rgba(243,211,167,.95),0 0 7px rgba(243,211,167,.85);
 --red:#E12826;--yellow:#EEAE19;--cyan:#1597C5;--orange:#E07227;--green:#238549;--purple:#6D419A}
*{box-sizing:border-box}
body{margin:0;background:#e3ae6e url(/assets/desk-tile.webp) top center/100% auto repeat-y;color:var(--brown);font-family:Outfit,sans-serif;overflow-x:hidden}
.page{position:relative;width:100%;overflow:hidden}
.prop{position:absolute;pointer-events:none}
.note{position:relative}.note>img.paper{position:absolute;pointer-events:none;filter:drop-shadow(0 6px 9px rgba(62,40,18,.28))}
.note>.in{position:relative;width:100%;height:100%}
h1,h2,h3,.lbl{font-family:"Baloo 2";font-weight:800;color:var(--brown);margin:0}
.halo{text-shadow:var(--halo)}
p{margin:0}
.phone{position:relative;aspect-ratio:390/844;border:calc(var(--pw,9px)) solid var(--navy);border-radius:calc(var(--pr,50px));background:#f3ead8;
 box-shadow:0 2px 0 #2c6f97 inset,0 18px 30px rgba(62,40,18,.35),0 4px 8px rgba(62,40,18,.25)}
.phone img{display:block;width:100%;height:100%;border-radius:calc(var(--pr,50px) - var(--pw,9px))}
.phone::after{content:"";position:absolute;right:calc(-1*var(--pw,9px) - 4px);top:24%;width:4px;height:11%;background:var(--navy);border-radius:0 3px 3px 0}
.pstrip{position:relative;display:block;width:calc(301px*var(--s));height:calc(120px*var(--s));cursor:pointer}
.pstrip img{position:absolute}.pstrip img:first-child{filter:drop-shadow(0 4px 5px rgba(62,40,18,.32))}
.pstrip span{position:absolute;transform:translate(-50%,-50%) rotate(-1deg);font-family:"Baloo 2";font-weight:800;color:var(--brown);letter-spacing:.04em;white-space:nowrap;text-shadow:var(--halo)}
.badge{display:block;flex:none;padding:calc(var(--h)/4);line-height:0;cursor:pointer}
.badge img{display:block;height:var(--h);width:calc(var(--h)*119.66407/40)}  /* the SVG's own 119.66407 x 40 aspect, unscaled art */
.hand{font-family:"Patrick Hand";color:var(--navy)}
nav.top{position:relative;z-index:30;display:flex;justify-content:flex-end;gap:34px;padding:26px 200px 0 64px;font-family:"Baloo 2";font-weight:800;font-size:18px;letter-spacing:.03em}
nav.top a{color:var(--brown);text-shadow:var(--halo)}
.center{display:flex;justify-content:center}.center.d{display:flex}
footer .links{display:flex;justify-content:center;gap:44px;font-family:"Baloo 2";font-weight:800;font-size:20px}
footer .links a{color:var(--brown)}
footer .pub{font-family:Outfit;font-weight:500;font-size:14px;color:#6a4a2c;text-align:center;margin-top:10px}

.n-hero-sheet{width:620.0px;height:330.0px}.n-hero-sheet>img.paper{left:1.67px;top:-15.33px;width:618.33px}
.n-beat-draw{width:380.0px;height:470.0px}.n-beat-draw>img.paper{left:0.33px;top:-6.0px;width:379.67px}
.n-beat-pour{width:380.0px;height:470.0px}.n-beat-pour>img.paper{left:-0.0px;top:-5.33px;width:380.0px}
.n-beat-mix{width:380.0px;height:470.0px}.n-beat-mix>img.paper{left:1.0px;top:-4.67px;width:378.0px}
.n-studio-note{width:980.0px;height:470.0px}.n-studio-note>img.paper{left:0.33px;top:-12.67px;width:978.33px}
.n-tag-1{width:210.0px;height:62.0px}.n-tag-1>img.paper{left:1.67px;top:-2.33px;width:206.67px}
.n-tag-2{width:210.0px;height:62.0px}.n-tag-2>img.paper{left:2.0px;top:-2.67px;width:206.33px}
.n-tag-3{width:210.0px;height:62.0px}.n-tag-3>img.paper{left:3.0px;top:-2.0px;width:204.67px}
.n-tag-4{width:210.0px;height:62.0px}.n-tag-4>img.paper{left:3.67px;top:-2.33px;width:203.33px}
.n-section-head{width:420.0px;height:84.0px}.n-section-head>img.paper{left:0.67px;top:-3.0px;width:417.67px}
.n-footer-strip{width:1240.0px;height:150.0px}.n-footer-strip>img.paper{left:1.33px;top:-8.67px;width:1236.67px}
.n-m-hero-sheet{width:340.0px;height:190.0px}.n-m-hero-sheet>img.paper{left:1.0px;top:-14.0px;width:338.0px}
.n-m-beat{width:340.0px;height:420.0px}.n-m-beat>img.paper{left:0.67px;top:-5.33px;width:338.67px}
.n-m-studio{width:350.0px;height:600.0px}.n-m-studio>img.paper{left:-0.0px;top:-11.67px;width:350.0px}
.n-m-section-head{width:260.0px;height:64.0px}.n-m-section-head>img.paper{left:2.0px;top:-1.33px;width:256.33px}
.n-m-footer{width:360.0px;height:260.0px}.n-m-footer>img.paper{left:1.0px;top:-6.0px;width:357.67px}
.n-inner-sheet{width:900.0px;height:760.0px}.n-inner-sheet>img.paper{left:-0.0px;top:-13.33px;width:899.67px}
.n-m-inner-sheet{width:350.0px;height:690.0px}.n-m-inner-sheet>img.paper{left:1.0px;top:-12.33px;width:348.33px}
/* home */
/* ---------- desktop ---------- */
.d{display:block}.m{display:none}.center.m{display:none}
.hero{position:relative;height:960px}
.hero .sheet{position:absolute;left:140px;top:128px;z-index:10}
.hero .sheet .wm{position:absolute;left:62px;top:40px;width:496px}
.hero .sheet h1{position:absolute;left:0;right:0;top:250px;text-align:center;font-size:40px;letter-spacing:.01em;transform:rotate(-1deg)}
.hero .sub{position:absolute;left:156px;top:500px;width:560px;font-size:21px;line-height:1.5;font-weight:500;z-index:10;text-shadow:0 0 6px rgba(246,224,190,.95),0 0 12px rgba(246,224,190,.7)}
.hero .ctas{position:absolute;left:156px;top:640px;display:flex;align-items:center;gap:40px;z-index:10}
.hero .phonewrap{position:absolute;left:880px;top:96px;z-index:12;--pw:10px;--pr:52px}
.hero .tag{position:absolute;left:960px;top:846px;z-index:14}
.tag .in{display:flex;align-items:center;justify-content:center;font-size:27px}
section{position:relative}
.shead{margin:0 auto;z-index:5}.shead .in{display:flex;align-items:center;justify-content:center}.shead h2{font-size:38px}
.beats{display:flex;justify-content:center;gap:56px;margin-top:44px}
.beat .in{padding:36px 30px 0}.beat img.ill{width:320px;border-radius:3px;display:block;box-shadow:0 0 0 1px rgba(150,180,200,.35)}
.beat h3{font-size:30px;margin-top:20px;display:flex;align-items:center;gap:12px}.beat .num{display:inline-flex;width:38px;height:38px;border-radius:50%;color:#fffaf0;font-size:22px;align-items:center;justify-content:center;text-shadow:none}
.beat p{font-size:18px;line-height:1.45;margin-top:8px;color:#5a3a1e}
.shots{display:flex;justify-content:center;gap:58px;margin-top:50px}
.shot{display:flex;flex-direction:column;align-items:center;gap:26px;--pw:8px;--pr:40px}
.studio{margin:0 auto}.studio .in{display:flex;gap:56px;padding:54px 70px 0 70px}
.studio .art{position:relative;width:270px;height:300px;flex:none;margin-top:6px}
.studio h2{font-size:46px}.studio p{font-size:20px;line-height:1.5;margin-top:12px;color:#5a3a1e}
.studio .price{display:inline-flex;gap:12px;align-items:baseline;margin-top:18px;font-family:"Baloo 2";font-weight:800;font-size:22px}
.studio .price b{font-size:40px;color:var(--green)}
footer .in{padding-top:40px}
/* ---------- mobile ---------- */
@media (max-width:899px){
 .d{display:none}.m{display:block}.center.d{display:none}.center.m{display:flex}
 nav.top{display:none}
 .mh{position:relative;height:1290px}
 .mh .sheet{position:absolute;left:25px;top:60px;z-index:10}
 .mh .sheet .wm{position:absolute;left:30px;top:20px;width:280px}
 .mh .sheet h1{position:absolute;left:0;right:0;top:142px;text-align:center;font-size:20.5px;white-space:nowrap;transform:rotate(-1deg)}
 .mh .sub{position:absolute;left:30px;right:30px;top:272px;font-size:17px;line-height:1.5;font-weight:500;text-align:center;z-index:10;text-shadow:0 0 6px rgba(246,224,190,.95),0 0 12px rgba(246,224,190,.7)}
 .mh .ctas{position:absolute;left:0;right:0;top:370px;display:flex;flex-direction:column;align-items:center;gap:22px;z-index:10}
 .mh .phonewrap{position:absolute;left:62px;top:620px;z-index:12;--pw:8px;--pr:40px}
 .mh .tag{position:absolute;left:118px;top:1212px;z-index:14}
 .shead h2{font-size:28px}
 .mbeats{display:flex;flex-direction:column;align-items:center;gap:34px;margin-top:30px}
 .beat .in{padding:26px 24px 0}.beat img.ill{width:292px}
 .beat h3{font-size:26px;margin-top:14px}.beat p{font-size:16.5px}
 .mshots{display:grid;grid-template-columns:150px 150px;justify-content:center;gap:34px 30px;margin-top:34px}
 .shot{gap:18px;--pw:6px;--pr:24px}
 .mshots .tag .in{font-size:21px}
 .studio .in{display:block;padding:40px 28px 0}
 .studio .art{width:294px;height:210px;margin-bottom:6px}
 .studio h2{font-size:36px}.studio p{font-size:17px}
 footer .links{flex-wrap:wrap;gap:12px 26px;font-size:18px;padding:0 30px}
}
/* inner */
.ibar{position:relative;display:flex;align-items:center;justify-content:space-between;padding:22px 64px 0;z-index:5}
.ibar img{width:190px} .ibar nav{display:flex;gap:30px;font-family:"Baloo 2";font-weight:800;font-size:18px} .ibar nav a{color:var(--brown);text-shadow:var(--halo)}
.ibar nav a.on{color:var(--purple)}
.isheet .in{padding:70px 90px 0}
.isheet h1{font-size:54px} .isheet .lede{font-size:20px;margin-top:6px;color:#5a3a1e}
.qa{margin-top:34px;display:flex;flex-direction:column;gap:26px}
.qa h3{font-size:24px;display:flex;gap:12px;align-items:center} .qa h3 i{width:14px;height:14px;border-radius:50%;flex:none}
.qa p{font-size:18px;line-height:1.5;margin:4px 0 0 26px;color:#5a3a1e}
@media (max-width:899px){
 .ibar{padding:16px 20px 0} .ibar img{width:120px} .ibar nav{gap:14px;font-size:14px}
 .isheet .in{padding:44px 26px 0} .isheet h1{font-size:38px} .isheet .lede{font-size:16px}
 .qa h3{font-size:19px} .qa p{font-size:15.5px;margin-left:22px} .qa{gap:18px}
 footer .links{flex-wrap:wrap;gap:10px 24px;font-size:17px;padding:0 30px} }
/* ---------- production additions (site v2 build) ---------- */
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
.page{width:1440px;margin:0 auto;zoom:var(--z,1)}
@media (min-width:1441px){.page{overflow:visible}}
a{text-decoration:none;color:inherit}
.studio .price{flex-wrap:wrap;column-gap:12px;row-gap:0}.studio .price span{white-space:nowrap}
nav.top a,footer .links a,.ibar nav a{text-decoration:none}
nav.top a:hover,footer .links a:hover,.ibar nav a:hover{color:var(--purple)}
a:focus-visible{outline:3px solid var(--cyan);outline-offset:3px;border-radius:4px}
.skip{position:absolute;left:-9999px;top:0}.skip:focus{left:12px;top:12px;z-index:99;background:#fffaf0;padding:8px 12px;border-radius:6px}
section[id]{scroll-margin-top:24px}
/* long inner sheet: the mock's paper, top/bottom kept, middle tiled on the 44 px graph grid */
.lsheet{position:relative;isolation:isolate;width:900px;margin:-13px auto 0;padding:83px 90px 90px;min-height:773px}
.lsheet::before{content:"";position:absolute;inset:0;z-index:-1;border-style:solid;border-width:90px 35px 80px 35px;
 border-image:url(/assets/notes/inner-sheet@2x.webp) 180 70 160 70 fill / 90px 35px 80px 35px stretch round;filter:drop-shadow(0 6px 9px rgba(62,40,18,.28))}
.lsheet h1{font-size:54px} .lsheet .lede{font-size:20px;margin-top:6px;color:#5a3a1e;line-height:1.45}
.prose{margin-top:30px;color:#5a3a1e;font-size:17px;line-height:1.6}
.prose h2{font-size:28px;margin:38px 0 10px;line-height:1.2}
.prose h3{font-size:21px;margin:26px 0 6px;display:flex;gap:12px;align-items:center;line-height:1.25}
.prose h3 i{width:12px;height:12px;border-radius:50%;flex:none}
.prose p,.prose ul,.prose ol{margin:0 0 14px} .prose li{margin-bottom:6px} .prose ul{padding-left:24px}
.prose strong{color:var(--deep)}
.prose a,.lsheet .qa a{color:var(--navy);text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:3px}
.prose a:hover{color:var(--purple)}
.prose .meta{font-size:15px;color:#7a5a3a}
.prose .card{background:rgba(255,250,236,.75);border:2px dashed rgba(70,38,12,.28);border-radius:6px;padding:16px 20px;margin:20px 0}
.prose .card p:last-child,.prose .card ul:last-child{margin-bottom:0}
.prose .table-scroll{overflow-x:auto;margin:0 0 16px}
.prose table{width:100%;border-collapse:collapse;font-size:15.5px;line-height:1.45;background:rgba(255,251,240,.6)}
.prose th,.prose td{text-align:left;vertical-align:top;padding:9px 10px;border-bottom:1.5px solid rgba(70,38,12,.18)}
.prose th{font-family:"Baloo 2";font-weight:800;color:var(--brown);font-size:16px;border-bottom:2px solid rgba(70,38,12,.35)}
.lsheet .qa a{white-space:nowrap}
.dl{display:inline-flex;align-items:center;gap:12px;margin:6px 0 10px;padding:14px 22px;background:var(--green);color:#fffaf0!important;text-decoration:none!important;border-radius:10px;font-family:"Baloo 2";font-weight:800;font-size:20px;box-shadow:0 4px 0 #17603a,0 8px 14px rgba(62,40,18,.25)}
.dl:hover{background:#1d7740}
.facts{display:grid;grid-template-columns:170px 1fr;gap:8px 18px;margin:0 0 14px} .facts dt{font-family:"Baloo 2";font-weight:800;color:var(--brown)} .facts dd{margin:0}
.pshots{display:flex;gap:26px;justify-content:center;margin:18px 0 8px;flex-wrap:wrap} .pshots .phone{width:150px;--pw:6px;--pr:24px}
.plogos{display:flex;gap:26px;align-items:center;flex-wrap:wrap;margin:10px 0 14px} .plogos img{display:block;background:#fbf6ea;border-radius:8px;box-shadow:0 2px 6px rgba(62,40,18,.2)}
/* footer fix: taller desktop strip, content centred in the paper, >= 45 design px above the torn bottom edge */
footer .in{padding-top:0}
.n-footer-strip{height:180px}.n-footer-strip>img.paper{height:189px}
footer .n-footer-strip .fin{padding-top:61px}
footer .fwm{position:absolute;left:60px;top:60px;width:150px}
@media (max-width:899px){
 .page{width:390px}
 footer .n-m-footer .fin{padding-top:85px} footer .n-m-footer .fin-wm{padding-top:48px}
 .lsheet{width:350px;margin-top:-12px;padding:56px 26px 64px;min-height:701px}
 .lsheet::before{border-width:90px 25px 80px 25px;border-image:url(/assets/notes/m-inner-sheet@2x.webp) 180 50 160 50 fill / 90px 25px 80px 25px stretch round}
 .lsheet h1{font-size:38px} .lsheet .lede{font-size:16px}
 .prose{font-size:15.5px;margin-top:22px} .prose h2{font-size:23px;margin-top:30px} .prose h3{font-size:18px}
 .prose table{font-size:14px;min-width:420px} .prose th{font-size:14.5px}
 .facts{grid-template-columns:1fr;gap:2px} .facts dd{margin-bottom:8px}
 .pshots{gap:16px} .pshots .phone{width:128px}
 .dl{font-size:17px;padding:12px 16px}
}