/* ============ generated site themes (scoped, sized by container) ============ */
.site{container-type:inline-size;background:#FFFFFF;color:#14172B;--s:var(--a);--on-s:var(--on-a);--s-soft:color-mix(in oklab,var(--s) 13%,#FFFFFF);--s-ink:color-mix(in oklab,var(--s) 66%,#14172B);overflow:hidden;text-align:left}
.site a{text-decoration:none}
.site .ph{display:flex;align-items:center;justify-content:center;text-align:center;font-size:clamp(11px,1.5cqw,15px);font-weight:600;color:var(--s-ink);background:repeating-linear-gradient(135deg,var(--s-soft) 0 14px,color-mix(in oklab,var(--s) 7%,#FFFFFF) 14px 28px);padding:8px}
.site .build>*{animation:rise .7s var(--ease) both}
.site .build>*:nth-child(2){animation-delay:.09s}.site .build>*:nth-child(3){animation-delay:.18s}.site .build>*:nth-child(4){animation-delay:.27s}.site .build>*:nth-child(5){animation-delay:.36s}.site .build>*:nth-child(6){animation-delay:.45s}
@keyframes rise{from{opacity:0;transform:translateY(22px)}}
.s-nav{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:2.2cqw 4cqw}
.s-nav nav{display:flex;gap:2.6cqw;font-size:clamp(11px,1.45cqw,16px);font-weight:500}
.s-call{background:var(--s);color:var(--on-s);padding:.9cqw 1.8cqw;border-radius:8px;font-weight:600;font-size:clamp(11px,1.45cqw,16px);white-space:nowrap}
@container (max-width:560px){.s-nav nav{display:none}.site .hide-s{display:none}}

/* Theme 1: Loud */
.t-loud{font-family:"Public Sans",system-ui,sans-serif}
.t-loud .s-name{font-family:"Big Shoulders Display",Impact,sans-serif;font-weight:900;font-size:clamp(17px,2.9cqw,30px);text-transform:uppercase;letter-spacing:.01em}
.t-loud .s-call{border-radius:0;box-shadow:.5cqw .5cqw 0 #14172B}
.t-loud .hero-l{background:var(--s);color:var(--on-s);padding:5cqw 4cqw 9cqw;position:relative;clip-path:polygon(0 0,100% 0,100% 88%,0 100%)}
.t-loud .hero-l .h3{font-family:"Big Shoulders Display",Impact,sans-serif;font-weight:900;text-transform:uppercase;font-size:clamp(34px,11cqw,128px);line-height:.86;letter-spacing:-.005em;max-width:9em}
.t-loud .hero-l p{font-size:clamp(13px,2cqw,21px);max-width:26em;margin-top:2cqw;font-weight:600}
.t-loud .stamp{position:absolute;right:5cqw;top:4cqw;width:16cqw;height:16cqw;min-width:74px;min-height:74px;border-radius:50%;background:#14172B;color:#FFFFFF;display:flex;align-items:center;justify-content:center;text-align:center;font-family:"Big Shoulders Display",Impact,sans-serif;font-weight:700;text-transform:uppercase;font-size:clamp(10px,1.7cqw,18px);line-height:1.05;padding:1cqw;animation:spin 16s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.t-loud .cta-l{display:inline-block;margin-top:3cqw;background:#14172B;color:#FFFFFF;font-weight:600;padding:1.5cqw 3cqw;font-size:clamp(13px,1.8cqw,19px);box-shadow:.7cqw .7cqw 0 #FFFFFF;transition:transform .25s var(--ease),box-shadow .25s}
.t-loud .cta-l:hover{transform:translate(-.3cqw,-.3cqw);box-shadow:1cqw 1cqw 0 #FFFFFF}
.t-loud .tape{background:#14172B;color:#FFFFFF;overflow:hidden;padding:1.3cqw 0;margin-top:-3cqw;transform:rotate(-1.4deg) scale(1.03)}
.t-loud .tape div{display:flex;gap:4cqw;width:max-content;animation:slide 22s linear infinite;font-family:"Big Shoulders Display",Impact,sans-serif;font-weight:700;text-transform:uppercase;font-size:clamp(14px,2.4cqw,26px)}
.t-loud .rows{padding:5cqw 4cqw 2cqw}
.t-loud .rows a{display:flex;justify-content:space-between;align-items:center;gap:12px;border-top:3px solid #14172B;padding:1.8cqw 1cqw;font-family:"Big Shoulders Display",Impact,sans-serif;font-weight:900;text-transform:uppercase;font-size:clamp(20px,4.6cqw,50px);line-height:1;color:#14172B;background:linear-gradient(var(--s),var(--s)) 0 0/0 100% no-repeat;transition:background-size .45s var(--ease),padding .45s var(--ease),color .3s}
.t-loud .rows a:hover{background-size:100% 100%;padding-left:3cqw;color:var(--on-s)}
.t-loud .rows a span{font-family:"Public Sans",sans-serif;font-weight:600;font-size:clamp(11px,1.5cqw,16px);text-transform:none}
.t-loud .work{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2cqw;padding:3cqw 4cqw 5cqw}
.t-loud .work .ph{aspect-ratio:4/3;border:3px solid #14172B;box-shadow:.8cqw .8cqw 0 var(--s);transition:transform .3s var(--ease),box-shadow .3s}
.t-loud .work .ph:hover{transform:translate(-.5cqw,-.5cqw);box-shadow:1.4cqw 1.4cqw 0 var(--s)}
@container (max-width:560px){.t-loud .work{grid-template-columns:1fr 1fr}.t-loud .stamp{display:none}}

/* Theme 2: Fresh */
.t-fresh{font-family:"Figtree",system-ui,sans-serif;background:linear-gradient(180deg,var(--s-soft),#FFFFFF 46%)}
.t-fresh .s-name{font-family:"Sora",system-ui,sans-serif;font-weight:700;font-size:clamp(15px,2.1cqw,22px);letter-spacing:-.03em;display:flex;align-items:center;gap:.9cqw}
.t-fresh .s-name::before{content:"";width:1.6cqw;height:1.6cqw;min-width:10px;min-height:10px;border-radius:50%;background:var(--s)}
.t-fresh .s-call{border-radius:999px}
.t-fresh .hero-f{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:4cqw;align-items:center;padding:3cqw 4cqw 6cqw}
.t-fresh .pill{display:inline-block;background:#FFFFFF;color:var(--s-ink);border-radius:999px;padding:.6cqw 1.6cqw;font-weight:600;font-size:clamp(10px,1.35cqw,14px);box-shadow:0 0 0 1px color-mix(in oklab,var(--s) 25%,#FFFFFF)}
.t-fresh .hero-f .h3{font-family:"Sora",system-ui,sans-serif;font-weight:700;font-size:clamp(26px,6.2cqw,68px);line-height:1.04;letter-spacing:-.045em;margin:1.6cqw 0}
.t-fresh .hero-f .h3 u{text-decoration:none;background:linear-gradient(var(--s),var(--s)) 0 96%/100% .09em no-repeat}
.t-fresh .hero-f p{color:#555B76;font-size:clamp(13px,1.8cqw,19px);max-width:26em}
.t-fresh .acts{display:flex;flex-wrap:wrap;gap:1.2cqw;margin-top:2.6cqw}
.t-fresh .acts a{border-radius:999px;padding:1.3cqw 2.6cqw;font-weight:600;font-size:clamp(12px,1.6cqw,17px);transition:transform .25s var(--ease),box-shadow .25s}
.t-fresh .acts a:first-child{background:var(--s);color:var(--on-s);box-shadow:0 1.4cqw 2.6cqw -1.2cqw var(--s)}
.t-fresh .acts a:last-child{background:#FFFFFF;color:#14172B;box-shadow:0 0 0 1.5px #D5D9E8}
.t-fresh .acts a:hover{transform:translateY(-3px)}
.t-fresh .shot{position:relative}
.t-fresh .shot .ph{aspect-ratio:1/1.05;border-radius:38% 62% 46% 54%/52% 40% 60% 48%;animation:blob 12s ease-in-out infinite alternate}
@keyframes blob{to{border-radius:58% 42% 62% 38%/40% 58% 42% 60%}}
.t-fresh .float{position:absolute;left:-3cqw;bottom:8%;background:#FFFFFF;border-radius:1.6cqw;padding:1.3cqw 1.8cqw;box-shadow:0 2cqw 4cqw -2cqw rgba(20,23,43,.35);font-weight:600;font-size:clamp(10px,1.4cqw,15px);display:flex;gap:1cqw;align-items:center;animation:bob 4s ease-in-out infinite alternate}
.t-fresh .float i{width:1.2cqw;height:1.2cqw;min-width:8px;min-height:8px;border-radius:50%;background:var(--s)}
@keyframes bob{to{transform:translateY(-10px)}}
.t-fresh .cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1.6cqw;padding:0 4cqw 4cqw}
.t-fresh .cards a{background:#FFFFFF;border-radius:2cqw;padding:2.2cqw;color:#14172B;box-shadow:0 0 0 1px #E4E7F1;display:flex;flex-direction:column;gap:1cqw;font-weight:600;font-size:clamp(12px,1.7cqw,18px);transition:transform .3s var(--ease),box-shadow .3s}
.t-fresh .cards a i{width:3.4cqw;height:3.4cqw;min-width:22px;min-height:22px;border-radius:1cqw;background:var(--s-soft);box-shadow:inset 0 0 0 2px var(--s);transition:transform .4s var(--ease),border-radius .4s}
.t-fresh .cards a:hover{transform:translateY(-6px);box-shadow:0 0 0 2px var(--s),0 2.4cqw 3.4cqw -2cqw var(--s)}
.t-fresh .cards a:hover i{transform:rotate(90deg);border-radius:50%}
.t-fresh .cards a span{font-weight:400;color:#555B76;font-size:clamp(10px,1.3cqw,14px)}
.t-fresh .strip{display:flex;gap:1.6cqw;padding:0 4cqw 5cqw;overflow-x:auto;scroll-snap-type:x mandatory}
.t-fresh .strip .ph{flex:0 0 34%;aspect-ratio:4/3;border-radius:2.4cqw;scroll-snap-align:start}
@container (max-width:560px){.t-fresh .hero-f{grid-template-columns:1fr}.t-fresh .cards{grid-template-columns:1fr 1fr}.t-fresh .strip .ph{flex-basis:70%}.t-fresh .shot .ph{aspect-ratio:16/9;border-radius:9cqw}.t-fresh .float{left:2cqw}}

/* Theme 3: Craft */
.t-craft{font-family:"Karla",system-ui,sans-serif;background:#F3F4F0}
.t-craft .s-nav{border-bottom:1px solid #C9CCC2}
.t-craft .s-name{font-family:"DM Serif Display",Georgia,serif;font-size:clamp(17px,2.5cqw,27px)}
.t-craft .s-call{background:transparent;color:#14172B;box-shadow:inset 0 0 0 1.5px #14172B;border-radius:0}
.t-craft .hero-c{padding:6cqw 4cqw 4cqw;text-align:center;display:flex;flex-direction:column;align-items:center}
.t-craft .kick{font-size:clamp(10px,1.35cqw,14px);letter-spacing:.18em;text-transform:uppercase;font-weight:700;color:var(--s-ink)}
.t-craft .hero-c .h3{font-family:"DM Serif Display",Georgia,serif;font-weight:400;font-size:clamp(30px,7.4cqw,84px);line-height:1.02;letter-spacing:-.02em;margin:1.6cqw 0;max-width:12em}
.t-craft .hero-c .h3 em{color:var(--s-ink);font-style:italic}
.t-craft .rule{width:9cqw;height:3px;background:var(--s);margin:1cqw 0 2cqw;transform-origin:left;animation:draw 1.1s var(--ease) both .3s}
@keyframes draw{from{transform:scaleX(0)}}
.t-craft .hero-c p{font-size:clamp(13px,1.8cqw,19px);color:#4B4F5E;max-width:30em}
.t-craft .cta-c{margin-top:2.6cqw;display:inline-block;color:#14172B;font-weight:700;font-size:clamp(12px,1.6cqw,17px);padding-bottom:.5cqw;background:linear-gradient(var(--s),var(--s)) 0 100%/100% 3px no-repeat;transition:background-size .35s var(--ease),color .3s}
.t-craft .cta-c:hover{background-size:100% 100%;color:var(--on-s)}
.t-craft .wide{margin:2cqw 4cqw 0}
.t-craft .wide .ph{aspect-ratio:21/8}
.t-craft .wide small{display:block;font-size:clamp(10px,1.25cqw,13px);color:#4B4F5E;padding-top:.8cqw;font-style:italic}
.t-craft .two{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:5cqw;padding:5cqw 4cqw}
.t-craft .two .h4{margin:0;font-family:"DM Serif Display",Georgia,serif;font-weight:400;font-size:clamp(20px,3.6cqw,40px);line-height:1.08}
.t-craft .two ul{list-style:none;margin:0;padding:0}
.t-craft .two li{display:flex;justify-content:space-between;gap:12px;border-bottom:1px solid #C9CCC2;padding:1.4cqw 0;font-size:clamp(13px,2cqw,21px);font-weight:500;transition:padding .35s var(--ease)}
.t-craft .two li span{color:var(--s-ink);transition:transform .35s var(--ease)}
.t-craft .two li:hover{padding-left:1.4cqw}
.t-craft .two li:hover span{transform:translateX(.8cqw)}
.t-craft .mos{display:grid;grid-template-columns:1.3fr 1fr 1fr;grid-template-rows:repeat(2,11cqw);gap:1.4cqw;padding:0 4cqw 5cqw}
.t-craft .mos .ph:first-child{grid-row:span 2}
.t-craft .mos .ph{filter:saturate(.9);transition:filter .3s,transform .4s var(--ease)}
.t-craft .mos .ph:hover{transform:scale(.97)}
@container (max-width:560px){.t-craft .two{grid-template-columns:1fr}.t-craft .mos{grid-template-columns:1fr 1fr;grid-template-rows:repeat(2,22cqw)}.t-craft .mos .ph:first-child{grid-row:auto;grid-column:span 2}}


/* ============ shared page furniture for every look ============ */
html{scroll-behavior:smooth}
body{margin:0;background:#FFFFFF}
.site{--ease:cubic-bezier(.2,.8,.2,1);min-height:100vh;display:flex;flex-direction:column;line-height:1.5}
.site *{box-sizing:border-box}
.site h1,.site h2,.site h3,.site h4,.site p{margin:0}
.site h1,.site h2,.site h3{text-wrap:balance}
.site :focus-visible{outline:3px solid var(--s-ink);outline-offset:3px}
.t-loud{--hf:"Big Shoulders Display",Impact,sans-serif;--hw:900;--ht:uppercase;--rad:0px;--pg:#FFFFFF}
.t-fresh{--hf:"Sora",system-ui,sans-serif;--hw:700;--ht:none;--rad:18px;--pg:#FFFFFF}
.t-craft{--hf:"DM Serif Display",Georgia,serif;--hw:400;--ht:none;--rad:0px;--pg:#F3F4F0}

/* photos */
.site .ph.has{padding:0;overflow:hidden;background:var(--s-soft)}
.site .ph.has img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease)}
.site .ph.has:hover img{transform:scale(1.06)}

/* nav */
.s-nav{position:relative;z-index:5}
.s-nav a.s-name{color:inherit}
.s-nav nav a{color:inherit;padding-block:4px;background:linear-gradient(var(--s),var(--s)) 0 100%/0 2px no-repeat;transition:background-size .3s var(--ease)}
.s-nav nav a:hover,.s-nav nav a[aria-current="page"]{background-size:100% 2px}
.s-menu{display:none;position:relative}
.s-menu summary{list-style:none;cursor:pointer;font-weight:600;font-size:14px;padding:8px 12px;box-shadow:inset 0 0 0 1.5px currentColor;border-radius:var(--rad)}
.s-menu summary::-webkit-details-marker{display:none}
.s-menu div{position:absolute;right:0;top:calc(100% + 8px);background:#FFFFFF;color:#14172B;min-width:200px;padding:8px;display:grid;box-shadow:0 18px 40px -18px rgba(20,23,43,.5),0 0 0 1px #E4E7F1;border-radius:var(--rad)}
.s-menu div a{padding:11px 12px;color:inherit;font-weight:600}
.s-menu div a:hover{background:var(--s-soft)}
@container (max-width:560px){.s-menu{display:block}.s-call{display:none}}

/* loud hero gains a photo */
.t-loud .hero-l{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);gap:4cqw;align-items:center}
.t-loud .hero-l .ph{aspect-ratio:4/5;border:4px solid #14172B;box-shadow:1.2cqw 1.2cqw 0 #14172B;transform:rotate(2.5deg);transition:transform .5s var(--ease)}
.t-loud .hero-l .ph:hover{transform:rotate(0deg) scale(1.02)}
.t-loud .stamp{right:2cqw;top:2cqw;z-index:2}
@container (max-width:560px){.t-loud .hero-l{grid-template-columns:minmax(0,1fr);padding-bottom:14cqw}.t-loud .hero-l .ph{aspect-ratio:4/3}}
.t-fresh .strip{scrollbar-width:thin}
.t-craft .mos .ph{min-height:0}

/* section titles on the home page */
.sec{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:5cqw 4cqw 2cqw}
.sec h2{font-family:var(--hf);font-weight:var(--hw);text-transform:var(--ht);font-size:clamp(26px,4.4cqw,54px);line-height:1}
.sec a{color:var(--s-ink);font-weight:700;font-size:clamp(13px,1.5cqw,17px);white-space:nowrap}
.t-loud .rows{padding-top:1cqw}

/* inner pages */
.p-head{padding:5cqw 4cqw 4cqw;background:var(--pg)}
.t-loud .p-head{background:var(--s);color:var(--on-s);clip-path:polygon(0 0,100% 0,100% 86%,0 100%);padding-bottom:7cqw}
.t-fresh .p-head{background:transparent}
.t-craft .p-head{text-align:center;border-bottom:1px solid #C9CCC2}
.crumb{font-size:clamp(12px,1.35cqw,15px);font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--s-ink)}
.crumb a{color:inherit}
.t-loud .crumb{color:inherit}
.p-head h1{font-family:var(--hf);font-weight:var(--hw);text-transform:var(--ht);font-size:clamp(36px,8cqw,104px);line-height:.98;letter-spacing:-.01em;margin-top:1cqw}
.p-head p{font-size:clamp(15px,1.9cqw,21px);max-width:34em;margin-top:1.6cqw}
.t-craft .p-head p{margin-inline:auto}
.p-body{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:5cqw;padding:5cqw 4cqw;background:var(--pg);align-items:start}
.p-body .ph{aspect-ratio:4/3;border-radius:var(--rad)}
.t-loud .p-body .ph{border:3px solid #14172B;box-shadow:.9cqw .9cqw 0 var(--s)}
.prose p{font-size:clamp(16px,1.65cqw,19px);line-height:1.65;max-width:62ch;color:#3A3F55}
.prose p+p{margin-top:1em}
.prose h2{font-family:var(--hf);font-weight:var(--hw);text-transform:var(--ht);font-size:clamp(22px,3cqw,36px);line-height:1.05;margin:1.4em 0 .5em}
.ticks{list-style:none;margin:1.2em 0 0;padding:0;display:grid;gap:10px}
.ticks li{display:flex;gap:12px;align-items:flex-start;font-weight:600;font-size:clamp(15px,1.55cqw,18px)}
.ticks li::before{content:"";flex:none;width:12px;height:12px;margin-top:.45em;background:var(--s);border-radius:calc(var(--rad) / 4);transform:rotate(45deg)}
.more{display:flex;flex-wrap:wrap;gap:10px;padding:0 4cqw 5cqw;background:var(--pg)}
.more a{color:#14172B;font-weight:600;padding:10px 16px;box-shadow:inset 0 0 0 1.5px #14172B;border-radius:var(--rad);transition:background-color .25s,color .25s,transform .25s var(--ease)}
.more a:hover{background:var(--s);color:var(--on-s);box-shadow:none;transform:translateY(-2px)}
.gridw{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2.4cqw;padding:5cqw 4cqw;background:var(--pg)}
.gridw figure{margin:0;display:grid;gap:10px}
.gridw .ph{aspect-ratio:4/3;border-radius:var(--rad)}
.t-loud .gridw .ph{border:3px solid #14172B;box-shadow:.7cqw .7cqw 0 var(--s)}
.gridw figcaption{font-weight:600;font-size:clamp(14px,1.45cqw,17px)}
.gridw figcaption span{display:block;font-weight:400;color:#555B76}
@container (max-width:700px){.p-body{grid-template-columns:minmax(0,1fr)}.gridw{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
@container (max-width:420px){.gridw{grid-template-columns:minmax(0,1fr)}}

/* contact */
.form{display:grid;gap:14px}
.form label{display:grid;gap:6px;font-weight:600;font-size:15px}
.form input,.form textarea{font:inherit;padding:13px 14px;border:2px solid #D5D9E8;border-radius:calc(var(--rad) * .7);background:#FFFFFF;color:#14172B;width:100%}
.form input:focus,.form textarea:focus{outline:0;border-color:var(--s)}
.form button{font:inherit;font-weight:700;border:0;cursor:pointer;background:var(--s);color:var(--on-s);padding:15px 22px;border-radius:calc(var(--rad) * .7);justify-self:start;transition:transform .25s var(--ease),box-shadow .25s}
.form button:hover{transform:translateY(-3px);box-shadow:0 10px 22px -12px var(--s)}
.form .msg{font-weight:600;color:var(--s-ink);min-height:1.5em}
.facts{display:grid;gap:14px;font-size:clamp(16px,1.7cqw,20px)}
.facts b{display:block;font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--s-ink)}
.facts a{color:inherit}

/* call to action band and footer */
.band{margin:0 4cqw 5cqw;padding:5cqw 4cqw;background:var(--s);color:var(--on-s);border-radius:var(--rad);display:flex;flex-wrap:wrap;gap:20px;align-items:center;justify-content:space-between}
.band h2{font-family:var(--hf);font-weight:var(--hw);text-transform:var(--ht);font-size:clamp(28px,5.4cqw,66px);line-height:1;max-width:12em}
.band a{background:#14172B;color:#FFFFFF;font-weight:700;padding:16px 26px;border-radius:calc(var(--rad) * .7);font-size:clamp(15px,1.6cqw,19px);transition:transform .25s var(--ease)}
.band a:hover{transform:translateY(-3px)}
.wrapbg{background:var(--pg)}
.s-foot{margin-top:auto;background:#14172B;color:#C9CDE0;padding:28px 4cqw;display:flex;flex-wrap:wrap;gap:10px 28px;justify-content:space-between;font-size:15px}
.s-foot a{color:#FFFFFF}
.s-foot nav{display:flex;flex-wrap:wrap;gap:8px 20px}

/* reveal on scroll: only applied by script, so the page is complete without it */
.site .pre{opacity:0;transform:translateY(26px)}
.site .in{transition:opacity .7s var(--ease),transform .7s var(--ease)}

/* preview-only bar */
.pbar{position:fixed;left:50%;bottom:calc(14px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);z-index:50;background:#14172B;color:#FFFFFF;border-radius:999px;padding:6px;display:flex;align-items:center;gap:4px;font:600 14px/1 system-ui,sans-serif;box-shadow:0 14px 34px -12px rgba(20,23,43,.6);max-width:calc(100vw - 24px)}
.pbar span{padding:0 10px 0 12px;color:#C9CDE0;white-space:nowrap}
.pbar a{color:#DADDF0;padding:9px 14px;border-radius:999px;text-decoration:none}
.pbar a[aria-current="true"]{background:#FFFFFF;color:#14172B}
@media (max-width:460px){.pbar span{display:none}}
@media (prefers-reduced-motion:reduce){.site *,.site *::before,.site *::after{animation:none!important;transition:none!important}.site .pre{opacity:1;transform:none}html{scroll-behavior:auto}}

/* layout fixes for any number of services and photos */
.t-fresh .cards{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
.t-loud .work .ph:nth-child(4){display:none}
@container (max-width:560px){.t-loud .work .ph:nth-child(4){display:flex}}

/* ============ polish pass 1: content width, type scale, motion ============ */
@keyframes slide{to{transform:translateX(-50%)}}
/* colour runs edge to edge, content sits in a centred column */
.site{--pad:max(4cqw,calc((100cqw - 1180px) / 2))}
.site .s-nav,.site .hero-l,.site .rows,.site .work,.site .hero-f,.site .cards,.site .strip,.site .hero-c,.site .two,.site .mos,.site .sec,.site .p-head,.site .p-body,.site .more,.site .gridw,.site .s-foot{padding-inline:var(--pad)}
.site .wide,.site .band{margin-inline:var(--pad)}
.site .s-nav{padding-block:16px}
.site .s-nav nav{font-size:15px;gap:26px}
.site .s-call{font-size:15px;padding:10px 16px}
.t-loud .s-name{font-size:clamp(17px,2.4cqw,24px)}
.t-fresh .s-name{font-size:clamp(15px,1.9cqw,20px)}
.t-craft .s-name{font-size:clamp(17px,2.2cqw,23px)}
/* calmer type at computer widths */
.t-loud .hero-l .h3{font-size:clamp(34px,9cqw,100px)}
.t-fresh .hero-f .h3{font-size:clamp(26px,5.4cqw,58px)}
.t-craft .hero-c .h3{font-size:clamp(30px,6.2cqw,70px)}
.t-loud .rows a{font-size:clamp(20px,3.6cqw,38px);padding-block:clamp(10px,1.4cqw,18px)}
.t-loud .tape div{font-size:clamp(14px,1.9cqw,21px)}
.site .p-head h1{font-size:clamp(34px,6.4cqw,78px)}
.site .sec h2{font-size:clamp(26px,3.6cqw,44px)}
.site .band h2{font-size:clamp(26px,4.2cqw,50px)}
.t-loud .hero-l{padding-block:clamp(28px,5cqw,72px) clamp(56px,9cqw,120px)}
.t-fresh .hero-f{padding-block:clamp(20px,3cqw,48px) clamp(32px,6cqw,84px)}
.t-craft .hero-c{padding-block:clamp(32px,6cqw,88px) clamp(24px,4cqw,56px)}
.t-fresh .shot{max-width:520px;justify-self:end;width:100%}
.t-loud .hero-l .ph{max-width:420px;justify-self:end;width:100%}
/* the stamp sits still at a tilt, and the hero photo no longer fights its own hover */
.t-loud .stamp{animation:none;transform:rotate(-9deg);width:clamp(74px,13cqw,150px);height:clamp(74px,13cqw,150px);font-size:clamp(10px,1.4cqw,16px);right:max(2cqw,calc(var(--pad) - 28px))}
.t-loud .hero-l .ph.has:hover img{transform:none}
.t-loud .hero-l .ph{transition:transform .6s var(--ease)}
.t-loud .hero-l .ph:hover{transform:rotate(1deg)}
.t-fresh .float{animation-duration:5s}
.t-fresh .strip{padding-bottom:clamp(24px,5cqw,64px)}