@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Playfair+Display:ital,wght@1,500&display=swap');
:root{--ink:#17221d;--green:#004d2c;--cream:#f2f1e9;--muted:#757e75}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--cream);color:var(--ink);font-family:'DM Sans',Arial,sans-serif}a{color:inherit;text-decoration:none}a:focus-visible{outline:3px solid #b7e78c;outline-offset:5px}.header{height:86px;display:flex;align-items:center;justify-content:space-between;padding:0 6%;border-bottom:1px solid #d4d9cf}.brand{display:flex;align-items:center;gap:10px;font-size:22px;font-weight:700;letter-spacing:-1.5px;line-height:1}.brand img{width:29px;height:38px;object-fit:contain}.brand-light,.footer-brand span{font-weight:400}.brand small,.footer-brand small{display:block;letter-spacing:2px;font-size:7px;margin-top:6px}.header nav{display:flex;gap:35px;font-size:12px;font-weight:600}.hero{padding:24px 6% 25px;min-height:670px;display:flex;flex-direction:column;justify-content:space-between}.hero-top,.hero-bottom,.section-label{display:flex;justify-content:space-between;color:#7c857a;font-size:9px;letter-spacing:1.8px;font-weight:700}.hero-main{display:grid;grid-template-columns:1.05fr .95fr;align-items:center;gap:5%}.eyebrow{font-size:10px;letter-spacing:2px;font-weight:700}.dot{display:inline-block;width:7px;height:7px;background:#57a06f;border-radius:50%;margin-right:10px}h1,h2,h3,p{margin-top:0}h1{font-size:clamp(64px,8.7vw,132px);line-height:.97;letter-spacing:-.075em;margin:30px 0}em{font-family:'Playfair Display',Georgia,serif;font-weight:500;letter-spacing:-.055em}h1 em{color:var(--green)}.hero-copy{font-size:15px;line-height:1.8;max-width:430px;color:#5d675f}.actions{display:flex;align-items:center;gap:32px;margin-top:32px}.button{display:inline-flex;align-items:center;justify-content:space-between;gap:36px;background:var(--green);color:white;padding:19px 21px;font-size:12px;font-weight:700}.button span,.text-link span{font-size:17px}.text-link{font-size:12px;font-weight:700}.text-link span{margin-left:12px}.art{height:410px;background:#dfe6d8;position:relative;overflow:hidden;display:grid;place-items:center}.art:before{content:'';position:absolute;inset:18px;border:1px solid #b6c6b5}.art-ring{position:absolute;border:1px solid #8ba894;border-radius:50%}.ring1{width:300px;height:300px}.ring2{width:260px;height:260px}.ring3{width:220px;height:220px}.art-core{width:172px;height:172px;border-radius:50%;background:var(--green);color:#dce9da;display:flex;flex-direction:column;align-items:center;justify-content:center}.art-core span{font-family:Georgia,serif;font-style:italic;font-size:75px;line-height:.8}.art-core small{text-align:center;font-size:7px;letter-spacing:2px;line-height:1.5;margin-top:18px}.art p{position:absolute;bottom:20px;left:25px;font-size:8px;letter-spacing:1.5px;line-height:1.7;font-weight:700}.art p span{position:absolute;left:360px;font-size:24px;bottom:0}.section{padding:100px 6%}.section-label{border-top:1px solid #cbd2c8;padding-top:17px;margin-bottom:75px}.about{background:#e6eadf}.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:12%}h2{font-size:clamp(48px,6vw,86px);line-height:1.02;letter-spacing:-.065em;margin-bottom:30px}.about-grid h2 em,.section-heading h2 em,.work h2 em,.contact h2 em{color:#477b5a}.about-grid>div{max-width:480px;padding-top:8px}.lead{font-size:23px;line-height:1.4;letter-spacing:-.035em}.about-grid div p:not(.lead),.section-heading p,.work-grid>div>p:not(.eyebrow),.team article>p{color:#69736a;line-height:1.8;font-size:14px}.inline-link{display:inline-block;font-size:10px;letter-spacing:1.3px;font-weight:700;margin-top:28px;border-bottom:1px solid #9eaba0;padding-bottom:12px}.inline-link span{margin-left:30px}.section-heading{display:flex;justify-content:space-between;align-items:end;gap:30px;margin-bottom:50px}.section-heading p{max-width:310px}.service-list{border-top:1px solid #bfc9be}.service-list article{display:grid;grid-template-columns:70px 1fr 200px;gap:15px;padding:30px 0;border-bottom:1px solid #bfc9be;align-items:start}.number,.by{font-size:10px;color:#7d897d;letter-spacing:1px;padding-top:8px}.service-list h3{font-size:25px;letter-spacing:-1px;margin-bottom:9px}.service-list p{font-size:13px;color:#7c887e;margin:0}.work{background:#122a1d;color:#f3f3e8}.work .section-label{border-color:#41604c;color:#99ad9e}.work-grid{display:grid;grid-template-columns:1fr 1fr;gap:12%;align-items:center}.work h2 em{color:#a6c3a7}.work-grid>div>p:not(.eyebrow){color:#b0c0b1;max-width:350px}.light{background:#e8eee1;color:#173323;margin-top:22px}.player{background:#284330;padding:20px}.player-header{display:flex;justify-content:space-between;font-size:9px;letter-spacing:1.2px;color:#c6d5c5;padding:3px 0 20px}.artists h2{font-size:clamp(45px,5vw,70px)}.green{color:#477b5a}.artist-list{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid #cbd2c8;margin-top:45px}.artist-list > a{padding:30px 0;border-bottom:1px solid #cbd2c8;font-size:clamp(27px,3vw,42px);letter-spacing:-.05em}.team{background:#e6eadf}.team-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px}.team-art{height:260px;background:#bfcdbd;color:#315d40;padding:22px;display:flex;flex-direction:column;justify-content:space-between}.team-art.second{background:#d4dbce}.team-art>span,.team-art small{font-size:9px;letter-spacing:1.5px}.team-art strong{align-self:center;font-family:Georgia,serif;font-style:italic;font-size:100px;font-weight:400}.team-art strong span{color:#719276}.team-info{display:flex;justify-content:space-between;margin-top:22px}.team-info h3{font-size:23px;letter-spacing:-1px;margin-bottom:6px}.team-info p{font-size:10px;letter-spacing:1px;text-transform:uppercase;color:#617a68}.team-info>span{font-size:22px}.contact{padding:100px 6%;background:#004d2c;color:#eff4e8}.contact .section-label{border-color:#4d8061;color:#a9c5b1}.contact h2{font-size:clamp(70px,9vw,130px)}.contact h2 em{color:#a5c9a8}.contact-bottom{display:flex;align-items:end;gap:35px}.contact-bottom p{max-width:360px;line-height:1.8;font-size:14px;color:#c8dbcc;margin:0 auto 0 0}.mail{font-size:13px;border-bottom:1px solid #8caf98;padding-bottom:8px}footer{padding:50px 6%;background:#11291c;color:#e8eee3;display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:25px;font-size:12px}footer>div{display:flex;flex-direction:column;gap:12px}footer>div span{color:#91ad98;font-size:9px;letter-spacing:1.5px;margin-bottom:8px}.footer-brand{font-size:28px;font-weight:700;letter-spacing:-2px}.footer-brand small{letter-spacing:2px}footer p{font-size:9px;line-height:2;letter-spacing:1px;color:#91ad98}@media(max-width:750px){.header{height:70px}.header nav{display:none}.hero{min-height:auto;padding-top:22px}.hero-top span:last-child{display:none}.hero-main{grid-template-columns:1fr;gap:45px;padding:70px 0}.hero h1{font-size:clamp(65px,14vw,100px)}.art{height:330px}.art p span{left:250px}.section,.contact{padding:75px 6%}.section-label{margin-bottom:55px}.about-grid,.work-grid,.team-grid{grid-template-columns:1fr;gap:30px}.section-heading{display:block}.service-list article{grid-template-columns:32px 1fr}.service-list .by{grid-column:2;grid-row:2;padding:0}.service-list h3{font-size:21px}.artist-list{grid-template-columns:1fr}.artist-list > a{padding:20px 0}.contact-bottom{align-items:flex-start;flex-direction:column;gap:20px}.contact-bottom .light{margin:0}.contact h2{font-size:clamp(64px,13vw,100px)}footer{grid-template-columns:1fr 1fr;row-gap:40px}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* Studio photography and separate equipment columns. */
.header nav{gap:clamp(16px,2.4vw,35px)}
.studios{background:var(--cream)}
.studio-heading{margin-bottom:68px}
.studio-list{display:grid;gap:76px}
.studio-card{border-top:1px solid #bfc9be}
.studio-card-top{display:flex;justify-content:flex-end;gap:20px;padding:18px 0 22px;color:#5d7162;font-size:10px;letter-spacing:1.5px;font-weight:700}
.studio-kicker{color:#64806a;font-size:10px;letter-spacing:1.5px;font-weight:700;margin-bottom:22px}
.studio-photo-intro h3,.equipment-heading h3{font-size:clamp(36px,4.2vw,60px);line-height:1.02;letter-spacing:-.065em;margin-bottom:20px}
.studio-photo-intro h3 em,.equipment-heading h3 em{color:#477b5a}
.studio-description{max-width:350px;color:#69736a;font-size:14px;line-height:1.8}
.studio-photo-intro{display:flex;justify-content:space-between;align-items:end;gap:32px;margin:14px 0 35px}
.studio-photo-intro h3{margin-bottom:0}
.studio-photo-intro .studio-description{margin:0 0 4px}
.studio-photo-grid{display:grid;grid-template-columns:16fr 9fr 9fr;gap:12px}
.studio-photo-grid figure{position:relative;isolation:isolate;min-width:0;margin:0;background:#d9e2d5;aspect-ratio:3/4}
.studio-photo-grid .studio-photo-main{aspect-ratio:4/3}
.studio-photo-grid img{position:relative;z-index:1;display:block;width:100%;height:100%;object-fit:cover;transition:transform .28s ease}
.equipment-section{border-top:1px solid #bfc9be;margin-top:105px;padding-top:30px}
.equipment-heading{margin-bottom:55px}
.equipment-heading>p:last-child{color:#69736a;font-size:14px;line-height:1.7;margin-bottom:0}
.equipment-columns{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,6vw,90px)}
.equipment-column{border-top:1px solid #bfc9be}
.equipment-column-head{display:flex;justify-content:space-between;align-items:start;gap:20px;padding:20px 0 24px}
.equipment-column-head span,.equipment-list li span{color:#607564;font-size:9px;letter-spacing:1.15px;font-weight:700}
.equipment-column-head>span{text-align:right}
.equipment-column-head h4{font-size:27px;letter-spacing:-.05em;margin:13px 0 0}
.equipment-list{list-style:none;padding:0;margin:0}
.equipment-list li{display:grid;grid-template-columns:115px minmax(0,1fr);gap:18px;border-top:1px solid #d4dcd1;padding:17px 0;align-items:baseline}
.equipment-list li strong{font-size:14px;line-height:1.5;font-weight:500}
@media(max-width:900px) and (min-width:751px){.header{padding-left:4%;padding-right:4%}.header nav{font-size:11px;gap:15px}}
@media(max-width:750px){.studio-heading{margin-bottom:44px}.studio-list{gap:60px}.studio-card-top{font-size:9px;letter-spacing:1px}.studio-photo-intro h3,.equipment-heading h3{font-size:42px}.studio-description{max-width:100%}.studio-photo-intro{display:block;margin:10px 0 28px}.studio-photo-intro .studio-description{margin:20px 0 0}.studio-photo-grid{grid-template-columns:1fr 1fr;gap:8px}.studio-photo-grid .studio-photo-main{grid-column:1/-1}.equipment-section{margin-top:75px}.equipment-heading{margin-bottom:42px}.equipment-columns{grid-template-columns:1fr;gap:35px}}
@media(max-width:390px){.equipment-list li{grid-template-columns:90px minmax(0,1fr);gap:12px}.equipment-column-head>span{max-width:115px;line-height:1.5}}

/* Artist names link to their Spotify profiles. */
.artist-list > a{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-right:24px}
.artist-list > a > .ui-arrow{color:#477b5a;font-size:18px}
.artist-list > a:hover{color:var(--green)}

/* A subtle lift with a frame in the studio's green. */
.studio-photo-grid figure::before{content:'';position:absolute;inset:0;z-index:0;border:2px solid var(--green);opacity:0;pointer-events:none;transition:opacity .28s ease,transform .28s ease}
@media(hover:hover) and (pointer:fine){
  .studio-photo-grid figure:hover{z-index:2}
  .studio-photo-grid figure:hover::before{opacity:1;transform:translate(7px,7px)}
  .studio-photo-grid figure:hover img{transform:translate(-4px,-4px) scale(1.015)}
}
@media(prefers-reduced-motion:reduce){
  .studio-photo-grid figure::before,.studio-photo-grid img{transition:none}
  .studio-photo-grid figure:hover img{transform:none}
}

/* Contact email link. */
.contact-email{display:inline-flex;align-items:center;gap:16px;max-width:100%;color:#eff4e8;font-size:clamp(16px,1.5vw,21px);font-weight:600;border-bottom:1px solid #a9c5b1;padding-bottom:10px;overflow-wrap:anywhere}
.contact-email span{font-size:16px;flex-shrink:0}

/* Vector arrows keep their shape and color across desktop and mobile. */
.ui-arrow{display:inline-block;flex:none;width:1em;height:1em;vertical-align:-.125em;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* Continuously moving, three-position album carousel in the hero. */
.album-wheel{height:410px;position:relative;overflow:visible;isolation:isolate;color:var(--green)}
.album-wheel-stage{position:absolute;inset:20px 0 62px;display:flex;align-items:center;justify-content:center}
.album-strip-window{position:relative;width:100%;height:100%;overflow:hidden;perspective:900px}
.album-strip-track{position:absolute;inset:0;transform-style:preserve-3d}
.album-wheel-cover{position:absolute;left:50%;top:50%;width:var(--cover-size);aspect-ratio:1;margin:0;will-change:transform,opacity;backface-visibility:hidden}
.album-wheel-cover::after{content:'';position:absolute;left:8%;right:8%;bottom:-8px;height:6px;border-radius:50%;background:rgba(18,34,24,.28);filter:blur(5px);z-index:-1;pointer-events:none}
.album-wheel-cover img{display:block;width:100%;height:100%;object-fit:cover}
.album-wheel-footer{position:absolute;bottom:22px;left:25px;right:25px;display:flex;align-items:center;justify-content:space-between;gap:15px}
.album-wheel-counter{font-size:9px;font-weight:700;letter-spacing:1.4px}
.album-wheel-controls{display:flex;align-items:center;gap:5px}
.album-wheel-controls button{display:grid;place-items:center;width:35px;height:35px;padding:0;border:0;background:transparent;color:var(--green);cursor:pointer;opacity:.75;transition:opacity .2s}
.album-wheel-controls button:hover{opacity:1}
.album-wheel-controls button:focus-visible{outline:3px solid #6a9f79;outline-offset:3px}
.album-wheel-controls svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.album-wheel .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media(max-width:750px){.album-wheel{height:clamp(170px,54vw,210px)}.album-wheel-stage{inset:0 -6.818% 43px}.album-wheel-cover{top:calc(50% - 4px)}.album-wheel-footer{bottom:2px;left:8px;right:8px}}
@media(prefers-reduced-motion:reduce){.album-wheel-controls button{transition:none}}

/* Keep the longer hero slogan balanced on desktop and small screens. */
.hero h1.hero-title{font-size:clamp(48px,6.1vw,92px);line-height:1.02}
@media(max-width:750px){.hero h1.hero-title{font-size:clamp(43px,10.5vw,75px)}}

/* Contact button in the main navigation. */
.header nav{align-items:center}
.header nav .nav-contact{display:inline-flex;align-items:center;justify-content:center;background:var(--green);color:#fff;padding:11px 15px}
