@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@400;500;600;700&display=swap');
:root {
    --paper:#f7f7f5;
    --ink:#20211f;
    --muted:#777a75;
    --line:#d9dad5;
    --gutter:clamp(22px,5vw,88px)
}

* {
    box-sizing:border-box
}

html {
    scroll-behavior:smooth;
    scroll-padding-top:90px
}

body {
    margin:0;
    background:var(--paper);
    color:var(--ink);
    font-family:'DM Sans',sans-serif;
    -webkit-font-smoothing:antialiased
}

button,input,textarea {
    font:inherit
}

a {
    color:inherit;
    text-decoration:none
}

img {
    max-width:100%;
    display:block
}

button {
    cursor:pointer
}

.wrap {
    width:min(calc(100% - 2*var(--gutter)),1440px);
    margin:auto
}

.section {
    padding:clamp(85px,10vw,155px) 0
}

.white,.awards {
    background:white
}

.kicker {
    font-size:10px;
    font-weight:700;
    letter-spacing:.16em;
    margin:0 0 30px
}

.kicker:before {
    content:'';
    display:inline-block;
    width:22px;
    height:1px;
    background:currentColor;
    vertical-align:middle;
    margin-right:12px
}

h1,h2,h3,.logo {
    font-family:Manrope,sans-serif
}

h1,h2 {
    font-weight:500;
    letter-spacing:-.077em;
    line-height:1.08;
    margin:0
}

h1 {
    font-size:clamp(58px,7.7vw,118px)
}

h2 {
    font-size:clamp(39px,5.5vw,78px)
}

p {
    line-height:1.7
}

.lead {
    font-size:clamp(16px,1.5vw,19px);
    color:#626760;
    max-width:550px
}

.prose p {
    font-size:clamp(16px,1.4vw,19px);
    color:#575a55;
    line-height:1.8;
    margin:0 0 20px
}

.button {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:54px;
    padding:15px 23px;
    background:var(--ink);
    color:white;
    border:1px solid var(--ink);
    font-size:12px;
    font-weight:700
}

.button:hover {
    background:transparent;
    color:var(--ink)
}

.line-link {
    display:inline-block;
    border-bottom:1px solid currentColor;
    padding-bottom:9px;
    font-size:12px;
    font-weight:700
}

header {
    position:sticky;
    top:0;
    z-index:10;
    background:#fffffff0;
    backdrop-filter:blur(16px);
    border-bottom:1px solid var(--line)
}

nav {
    min-height:83px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:20px
}

.logo {
    font-size:17px;
    font-weight:700;
    letter-spacing:-.06em
}

.logo small {
    display:block;
    margin-top:4px;
    font:700 9px 'DM Sans',sans-serif;
    letter-spacing:.15em;
    color:var(--muted)
}

.links {
    display:flex;
    align-items:center;
    gap:clamp(16px,2.5vw,42px);
    font-size:12px;
    font-weight:600
}

.nav-cta,.cta {
    background:var(--ink);
    color:white;
    padding:13px 18px
}

.menu {
    display:none;
    border:0;
    background:none;
    font-size:24px
}

.hero {
    padding:clamp(95px,10vw,150px) 0
}

.hero-grid {
    display:grid;
    grid-template-columns:1.35fr .65fr;
    align-items:center;
    gap:7vw
}

.hero h1 em {
    font-style:normal;
    color:#485c50
}

.hero .lead {
    margin:35px 0
}

.actions {
    display:flex;
    align-items:center;
    gap:30px;
    flex-wrap:wrap
}

.hero-graphic {
    aspect-ratio:1/1.18;
    display:flex;
    align-items:center;
    justify-content:center;
    background:#e9ebe7;
    position:relative;
    overflow:hidden
}

.circle,.circle:before,.circle:after {
    position:absolute;
    inset:12%;
    border:1px solid #a9b1a7;
    border-radius:50%;
    content:''
}

.circle:before {
    inset:12%
}

.circle:after {
    inset:25%
}

.wave {
    position:relative;
    z-index:1;
    letter-spacing:2px;
    font-size:clamp(20px,2.8vw,45px);
    color:#536b5b;
    white-space:nowrap
}

.hero-graphic>span {
    position:absolute;
    bottom:20px;
    left:20px;
    font-size:9px;
    letter-spacing:.14em
}

.awards {
    border-block:1px solid var(--line)
}

.awards-grid {
    display:grid;
    grid-template-columns:1.1fr repeat(3,1fr);
    align-items:center;
    gap:25px;
    padding:30px 0
}

.awards-grid .kicker {
    margin:0
}

.awards-grid p:not(.kicker) {
    border-left:1px solid var(--line);
    padding-left:22px;
    margin:0
}

.awards b,.awards small {
    display:block
}

.awards b {
    font:700 15px Manrope,sans-serif
}

.awards small {
    color:var(--muted);
    margin-top:5px;
    font-size:11px
}

.two {
    display:grid;
    grid-template-columns:.9fr 1.1fr;
    gap:clamp(50px,9vw,150px)
}

.facts {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:15px;
    border-top:1px solid var(--line);
    padding-top:25px;
    margin-top:50px
}

.facts b,.facts small {
    display:block
}

.facts b {
    font:500 clamp(24px,3vw,38px) Manrope,sans-serif;
    letter-spacing:-.07em
}

.facts small {
    font-size:11px;
    color:var(--muted);
    margin-top:8px
}

.work {
    background:#eeeeeb;
    overflow:hidden
}

.section-heading {
    display:flex;
    align-items:end;
    justify-content:space-between;
    gap:30px;
    margin-bottom:45px
}

.section-heading>p {
    max-width:300px;
    font-size:13px;
    color:var(--muted)
}

.viewport {
    overflow:hidden;
    cursor:grab;
    touch-action:pan-y;
    user-select:none
}

.viewport.dragging {
    cursor:grabbing
}

.track {
    display:flex;
    gap:18px;
    transition:transform .6s cubic-bezier(.22,.61,.36,1);
    will-change:transform
}

.project {
    flex:0 0 calc((100% - 72px)/5);
    min-width:0
}

.cover {
    aspect-ratio:1;
    display:flex;
    align-items:end;
    padding:18px;
    color:var(--cover-text,#fff);
    background:var(--cover);
    background-image:var(--pattern,none);
    overflow:hidden;
    font:500 clamp(18px,2.2vw,30px)/1.13 Manrope,sans-serif;
    letter-spacing:-.055em
}

.c1 {
    --cover:#353b35;
    --pattern:radial-gradient(circle at 65% 37%,#d7d2b8 0 15%,transparent 16%)
}

.c2 {
    --cover:#d6c7b0;
    --cover-text:#292d27;
    --pattern:repeating-radial-gradient(circle at 50% 42%,transparent 0 12px,#746a592e 13px 14px)
}

.c3 {
    --cover:#798a7c;
    --pattern:linear-gradient(145deg,transparent 40%,#dce0c4 40% 43%,transparent 43%)
}

.c4 {
    --cover:#9d735c;
    --pattern:radial-gradient(ellipse at 48% 20%,#dfb18b 0 15%,transparent 40%)
}

.c5 {
    --cover:#252e36;
    --pattern:repeating-radial-gradient(circle at 50% 45%,transparent 0 13px,#ffffff2e 14px 15px)
}

.c6 {
    --cover:#a5a49a;
    --cover-text:#282b28;
    --pattern:linear-gradient(45deg,transparent 58%,#ecebe2 58% 65%,transparent 65%)
}

.c7 {
    --cover:#483b44;
    --pattern:radial-gradient(ellipse at 60% 65%,#b8848c 0 13%,transparent 45%)
}

.c8 {
    --cover:#c4c1ad;
    --cover-text:#35382e;
    --pattern:repeating-linear-gradient(90deg,transparent 0 17px,#5b645027 18px 19px)
}

.c9 {
    --cover:#5a696b;
    --pattern:linear-gradient(160deg,transparent 48%,#d1c8ac 48% 52%,transparent 52%)
}

.c10 {
    --cover:#9e9b87;
    --cover-text:#20251f;
    --pattern:radial-gradient(ellipse at 50% 100%,#3e5140 0 38%,transparent 39%)
}

.project h3 {
    font-size:12px;
    margin:15px 0 3px
}

.project p {
    font-size:11px;
    color:var(--muted);
    margin:0
}

.controls {
    display:flex;
    justify-content:space-between;
    align-items:center;
    border-top:1px solid #d3d5cf;
    margin-top:40px;
    padding-top:20px
}

.controls span {
    font-size:11px;
    color:var(--muted)
}

.controls button {
    width:43px;
    height:43px;
    background:transparent;
    border:1px solid #b8bdb6;
    font-size:20px
}

.controls button:hover:not(:disabled) {
    background:var(--ink);
    color:white
}

.controls button:disabled {
    opacity:.3;
    cursor:default
}

.note {
    font-size:11px;
    color:var(--muted);
    margin-top:20px
}

.studio-grid {
    display:grid;
    grid-template-columns:1.05fr .95fr;
    align-items:center;
    gap:clamp(50px,8vw,130px)
}

.studio-image {
    position:relative;
    min-height:470px;
    background:#d7dbd4
}

.studio-image img {
    width:100%;
    height:100%;
    min-height:470px;
    object-fit:cover
}

.studio-image span {
    position:absolute;
    right:18px;
    bottom:18px;
    background:#fff;
    padding:12px;
    font-size:10px;
    font-weight:700
}

.studio-grid .prose {
    margin-top:28px
}

.spec {
    border-block:1px solid var(--line);
    margin:30px 0;
    padding:12px 0
}

.spec p {
    display:flex;
    justify-content:space-between;
    gap:15px;
    font-size:12px
}

.spec span {
    color:var(--muted);
    text-align:right
}

.music {
    background:#34463c;
    color:#f8f8f4
}

.music-grid {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:clamp(50px,9vw,140px)
}

.music h2 {
    font-size:clamp(45px,6vw,88px)
}

.music-lead {
    font:500 clamp(21px,2.2vw,29px)/1.5 Manrope,sans-serif;
    letter-spacing:-.04em;
    max-width:520px;
    margin:30px 0
}

.light {
    background:#f8f8f4;
    color:#24332a;
    border-color:#f8f8f4
}

.light:hover {
    background:transparent;
    color:white
}

.music-text {
    padding-top:43px
}

.music-text>p {
    font-size:17px;
    line-height:1.85;
    color:#e1e7df
}

.tags {
    display:flex;
    gap:10px;
    flex-wrap:wrap;
    margin:32px 0
}

.tags span {
    border:1px solid #8d9b90;
    padding:9px 13px;
    font-size:11px
}

.music-text .note {
    font-size:12px;
    color:#b9c7bc
}

.quote {
    background:#dce2da;
    padding:95px 0
}

.quote-grid {
    display:grid;
    grid-template-columns:.4fr 1fr;
    gap:60px
}

.quote blockquote {
    font:500 clamp(25px,2.5vw,48px)/1.35 Manrope,sans-serif;
    letter-spacing:-.055em;
    margin:0
}

.quote-grid>div>p {
    font-size:12px;
    color:#5e6b60;
    margin-top:28px
}

.contact-grid {
    display:grid;
    grid-template-columns:1fr .9fr;
    gap:clamp(60px,10vw,150px)
}

.contact .lead {
    margin:28px 0
}

.contact form {
    display:grid;
    gap:10px
}

.contact label {
    font-size:10px;
    font-weight:700;
    letter-spacing:.12em;
    margin-top:15px
}

.contact input,.contact textarea {
    width:100%;
    background:transparent;
    border:0;
    border-bottom:1px solid #bfc3bb;
    padding:15px 0;
    outline:0;
    border-radius:0
}

.contact input:focus,.contact textarea:focus {
    border-color:var(--ink)
}

.contact textarea {
    min-height:120px;
    resize:vertical
}

.contact form .button {
    justify-self:start;
    margin-top:15px
}

footer {
    background:var(--ink);
    color:white;
    padding:38px 0
}

.footer-grid {
    display:flex;
    justify-content:space-between;
    gap:25px;
    align-items:center
}

.footer-grid b {
    font:700 16px Manrope,sans-serif
}

.footer-grid span,.footer-grid a {
    font-size:11px;
    color:#b2b8b0
}

@media(max-width:1100px) {
    .project {
        flex-basis:calc((100% - 36px)/3)
    }

}

@media(max-width:800px) {
    .menu {
        display:block
    }

    nav {
        min-height:72px
    }

    .links {
        display:none;
        position:absolute;
        top:72px;
        left:0;
        right:0;
        background:white;
        padding:15px var(--gutter) 25px;
        flex-direction:column;
        align-items:stretch;
        border-bottom:1px solid var(--line)
    }

    .links.open {
        display:flex
    }

    .links a {
        padding:12px 0
    }

    .links .cta {
        text-align:center
    }

    .hero-grid,.two,.studio-grid,.music-grid,.quote-grid,.contact-grid {
        grid-template-columns:1fr
    }

    .hero-graphic {
        display:none
    }

    .awards-grid {
        grid-template-columns:repeat(3,1fr)
    }

    .awards-grid>.kicker {
        grid-column:1/-1
    }

    .studio-image,.studio-image img {
        min-height:360px
    }

    .music-text {
        padding-top:0
    }

}

@media(max-width:600px) {
    .hero {
        padding:85px 0
    }

    .hero h1 {
        font-size:clamp(49px,12vw,75px)
    }

    .actions {
        align-items:flex-start;
        flex-direction:column
    }

    .awards-grid {
        grid-template-columns:1fr
    }

    .awards-grid>.kicker {
        grid-column:auto
    }

    .section-heading {
        align-items:start;
        flex-direction:column
    }

    .track {
        gap:14px
    }

    .project {
        flex-basis:calc((100% - 14px)/2)
    }

    .cover {
        padding:12px;
        font-size:clamp(18px,5vw,27px)
    }

    .quote {
        padding:75px 0
    }

    .footer-grid {
        align-items:start;
        flex-direction:column
    }

}

@media(prefers-reduced-motion:reduce) {
    html {
        scroll-behavior:auto
    }

    *,*:before,*:after {
        transition-duration:.01ms!important;
        animation-duration:.01ms!important
    }

}

/* Pallete and full-bleed About photographic treatment */
:root {
    --warm:#b8a07e;
    --mint:#7eb8a0
}

#about {
    position:relative;
    isolation:isolate;
    background:#343b35 url("assets/projects/studiorear.jpg") center center/cover no-repeat;
    color:#fff;
    min-height:660px;
    display:flex;
    align-items:center
}

#about:before {
    content:"";
    position:absolute;
    z-index:-1;
    inset:0;
    background:linear-gradient(90deg,rgba(16,22,19,.88) 0%,rgba(16,22,19,.76) 52%,rgba(16,22,19,.52) 100%)
}

#about .two {
    grid-template-columns:.85fr 1.15fr;
    align-items: start
}

#about .prose p {
    color:#f0f0e9;
    text-shadow:0 1px 3px #0005
}

#about .line-link {
    color:#fff;
    border-color:var(--warm)
}

#about .kicker:before {
    background:var(--warm)
}

.music {
    background:var(--mint);
    color:#172e24
}

.music-text>p,.music-text .note {
    color:#234537
}

.music .tags span {
    border-color:#35614c
}

.music .light {
    background:#18382a;
    color:#fff;
    border-color:#18382a
}

.music .light:hover {
    background:transparent;
    color:#18382a
}

footer {
    background:var(--warm);
    color:#211e18
}

.footer-grid span,.footer-grid a {
    color:#30291e
}

.line-link:hover {
    border-color:var(--warm)
}

.controls button:hover:not(:disabled) {
    background:var(--warm);
    border-color:var(--warm);
    color:#211e18
}

nav .cta:hover {
    background:var(--warm);
    color:#211e18
}

@media(max-width:800px) {
    #about .two {
        grid-template-columns:1fr;
        gap:30px
    }

    #about {
        min-height:0
    }

    #about:before {
        background:rgba(16,22,19,.78)
    }

}

/* Revised hero, About and bronze accents */
.hero {
    position: relative;
    isolation: isolate;
    color: white;
    background: #343b35;
    min-height: clamp(620px, 85vh, 900px);
    display: flex;
    align-items: center;
}

.hero:before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        linear-gradient(90deg, rgba(17,24,20,.24), rgba(17,24,20,.63) 58%, rgba(17,24,20,.89)),
url("assets/projects/Mastering_Mac_Erlaine_4web.jpeg") center 38%/cover no-repeat;
    transform: scaleX(-1);
}
.hero-grid {
    display:block
}

.hero-grid>div:first-child {
    max-width:850px
}

.hero h1 em {
    color:#dfc9aa
}

.hero .lead {
    color:#f2f0e9
}

.hero .line-link {
    color:white;
    border-color:#b8a07e
}

.button,nav .cta {
    background:#b8a07e;
    border-color:#b8a07e;
    color:#211e18
}

.button:hover,nav .cta:hover {
    background:#9f8663;
    color:white
}

.kicker:before {
    background:#b8a07e
}

#about {
    display:block;
    min-height:0;
    background:white;
    color:var(--ink);
    isolation:auto
}

#about:before {
    display:none
}

#about .prose p {
    color:#575a55;
    text-shadow:none
}

#about .line-link {
    color:var(--ink)
}

/* Synchronised two-row artwork carousel */
.viewport {
    overflow:hidden;
    cursor:grab;
    touch-action:pan-y;
    user-select:none
}

.viewport.dragging {
    cursor:grabbing
}

.track {
    display:flex;
    flex-direction:column;
    gap:30px;
    transition:transform .6s cubic-bezier(.22,.61,.36,1);
    will-change:transform
}

.album-row {
    display:flex;
    gap:18px;
    width:max-content;
    min-width:max-content
}

.album-row .project {
    flex:0 0 var(--album-width,200px);
    width:var(--album-width,200px)
}

.album-row .project img {
    display:block;
    width:100%;
    aspect-ratio:1;
    object-fit:cover;
    -webkit-user-drag:none
}

.album-row .project h3 {
    font-size:12px;
    line-height:1.4;
    margin:12px 0 0
}

.controls {
    margin-top:32px
}

.controls button,  .testimonial-controls button {
    border:1px solid #b8a07e;
    background:transparent;
    width:42px;
    height:40px;
    color:var(--ink);
    cursor:pointer
}

.controls button:hover:not(:disabled),.testimonial-controls button:hover {
    background:#b8a07e;
    color:#211e18
}

.controls button:disabled {
    opacity:.3;
    cursor:default
}

.testimonial-area {
    min-width:0
}

.testimonial {
    display:none;
    margin:0
}

.testimonial.active {
    display:block;
    animation:quoteIn .35s ease
}

.testimonial figcaption {
    font-size:12px;
    color:#5e6b60;
    margin-top:26px
}

.testimonial-controls {
    display:flex;
    justify-content:space-between;
    align-items:center;
    border-top:1px solid #abb9aa;
    margin-top:35px;
    padding-top:18px
}

.testimonial-controls span {
    font-size:11px;
    letter-spacing:.1em
}

.testimonial-controls>div {
    display:flex;
    gap:8px
}

@keyframes quoteIn {
    from {
        opacity:0;
        transform:translateY(8px)
    }

    to {
        opacity:1;
        transform:none
    }

}

footer {
    min-height:220px;
    display:flex;
    align-items:center;
    padding:75px 0;
    background:#b8a07e;
    color:#211e18
}

.footer-grid span,.footer-grid a {
    color:#30291e
}

@media(max-width:600px) {
    .hero {
        min-height:660px;
        background-position:60% center
    }

    .album-row {
        gap:12px
    }

    .track {
        gap:24px
    }

    footer {
        min-height:260px;
        padding:70px 0
    }

}

/* Prevent users from highlighted text or picking up images with the mouse esp in carousel */
.viewport, .track, .project img {
    user-select: none;
    -webkit-user-drag: none;
}

/* Ensure the underlying image doesn't intercept the mouse down/drag event */
.project img {
    pointer-events: none;
}

/* Footer social media icons */
.footer-grid {
    position: relative;
}

.footer-socials {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 30px;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

.footer-socials a {
    font-size: 23px;
    color: #211e18;
    transition: opacity .25s ease, transform .25s ease;
}

.footer-socials a:hover {
    opacity: .6;
    transform: translateY(-3px);
}

@media (max-width: 650px) {
    .footer-grid {
        align-items: center;
        text-align: center;
    }

    .footer-socials {
        position: static;
        transform: none;
        margin: 20px 0;
    }

}

/* Pricing section alignment */

/* Pricing section */

#price .studio-grid {
    grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr);
    gap: 40px;
    align-items: start;
}

#price .studio-image {
    min-width: 0;
    width: 100%;
    height: 720px;
    margin-top: 65px;
    overflow: hidden;
}

#price .studio-image img {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 0;
    object-fit: cover;
    object-position: center;
}

@media (max-width: 800px) {
    #price .studio-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    #price .studio-image {
        height: 450px;
        margin-top: 0;
    }
}
/* Align pricing image with first paragraph */
#price .studio-grid {
    align-items: start;
}

#price .studio-image {
    margin-top: 65px;
}
.links a.nav-switch {
    background: #b8a07e;
    color: #20211f;
    padding: 8px 14px;
    border-radius: 4px;
    text-decoration: none;
    transition: opacity 0.2s ease;
}

.links a.nav-switch:hover {
    opacity: 0.8;
}
/* Spotify playlist link */

.work-playlist {
    display: flex;
    justify-content: flex-end;
    margin-top: 24px;
}

.work-playlist a {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-size: 13px;
    font-weight: 600;
    border-bottom: 1px solid #b8a07e;
    padding-bottom: 8px;
    transition: opacity .2s ease;
}

.work-playlist i {
    font-size: 21px;
}

.work-playlist a:hover {
    opacity: .6;
}

@media (max-width: 600px) {
    .work-playlist {
        justify-content: flex-start;
    }
}
.form-trap {
    position: absolute;
    left: -10000px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.studio-carousel {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
}

.studio-carousel img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1.5s ease-in-out;
}

.studio-carousel img.active {
  opacity: 1;
}

.coastal-image {
  position: relative;
  width: 100%;
  overflow: hidden;
  line-height: 0;
  background: var(--paper, #f7f7f5);
}

.coastal-image img {
  display: block;
  width: 100%;
  aspect-ratio: 2.67 / 1;
  object-fit: cover;
  object-position: center 55%;
}


.contact-coastal-image {
  display: block;
  width: 100%;
  max-width: none;
  aspect-ratio: 5 / 2;
  object-fit: cover;
  object-position: center;
  margin-top: 30px;
}


@media (max-width: 600px) {
  .section h2 {
    display: none;
  }
}


.studio-carousel {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
}

.studio-carousel img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1.5s ease-in-out;
}

.studio-carousel img.active {
  opacity: 1;
}