@font-face{font-family:"Literata";src:url(/fonts/literata-normal.woff2) format("woff2");font-weight:400 700;font-style:normal;font-display:swap}
@font-face{font-family:"Literata";src:url(/fonts/literata-italic.woff2) format("woff2");font-weight:400 600;font-style:italic;font-display:swap}
@font-face{font-family:"Hanken Grotesk";src:url(/fonts/hanken-grotesk-normal.woff2) format("woff2");font-weight:400 700;font-style:normal;font-display:swap}

:root{
  --paper:#f2efe9;
  --paper-2:#e7e2d7;
  --ink:#17161c;
  --ink-soft:#4a4852;
  --blue:#2536a0;
  --blue-deep:#1b2878;
  --on-blue-soft:#cdd2f0;
  --on-ink-soft:#bcbac6;
  --line:rgba(23,22,28,.22);
  --gutter:clamp(1.25rem,5vw,3rem);
  --serif:"Literata",Georgia,"Times New Roman",serif;
  --sans:"Hanken Grotesk",system-ui,-apple-system,"Segoe UI",sans-serif;
  color-scheme:light;
  accent-color:var(--blue);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-padding-top:1rem;scrollbar-color:var(--blue) var(--paper-2);-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{margin:0;background:var(--paper);color:var(--ink);font:400 1.0625rem/1.65 var(--sans);caret-color:var(--blue);text-rendering:optimizeLegibility}
::selection{background:var(--blue);color:var(--paper)}
h1,h2,h3,p,ul,dl,dd,figure{margin:0}
ul{padding:0;list-style:none}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-underline-offset:.2em;text-decoration-thickness:1.5px}
a:hover{text-decoration-thickness:2.5px}
:focus-visible{outline:3px solid var(--blue);outline-offset:3px;border-radius:2px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.skip{position:absolute;left:1rem;top:-4rem;background:var(--ink);color:var(--paper);padding:.75rem 1rem;z-index:10}
.skip:focus{top:1rem}

h1,h2,h3,.voice,.mess,.else,.price,.wordmark{font-family:var(--serif);font-optical-sizing:auto}
h1{font-size:clamp(2.4rem,1.2rem + 5.4vw,5.1rem);font-weight:600;line-height:1.04;letter-spacing:-.02em;max-width:15em;text-wrap:balance}
h2{font-size:clamp(2rem,1.2rem + 3.4vw,3.4rem);font-weight:600;line-height:1.08;letter-spacing:-.015em;text-wrap:balance}
h3{font-size:1.2rem;font-weight:600;line-height:1.3}
.lede{font-size:clamp(1.15rem,1rem + .7vw,1.45rem);line-height:1.5;max-width:34em;color:var(--ink-soft)}

/* header */
.top{display:flex;justify-content:space-between;align-items:center;gap:1rem;max-width:76rem;margin:0 auto;padding:1.25rem var(--gutter)}
.wordmark{display:inline-flex;align-items:center;gap:.65rem;font-weight:600;font-size:1.2rem;text-decoration:none}
.one{display:grid;place-items:center;width:1.75rem;height:1.75rem;background:var(--blue);color:var(--paper);border-radius:2px;font-weight:700;font-size:1.05rem}
.top-link{font-weight:600}

/* sections share a two-column page: rehearsal-letter margin + content */
.wrap{display:grid;grid-template-columns:1fr;max-width:76rem;margin:0 auto;padding:0 var(--gutter)}
.mark{display:none}
@media (min-width:56rem){
  .wrap{grid-template-columns:6rem 1fr}
  .mark{display:grid;place-items:center;width:2.25rem;height:2.25rem;border:1.5px solid currentColor;font:600 1rem var(--serif);margin-top:.6rem}
}
section{padding-block:clamp(3.5rem,8vw,6.5rem)}
section+section{border-top:1px solid var(--line)}
.body>*+*{margin-top:1.5rem}
.body>h2,.why-grid h2{margin-bottom:1.25rem}
.contact h2{margin-bottom:0}

/* A: hero + staff */
.hero{padding-top:clamp(2.5rem,6vw,5rem);padding-bottom:0}
.hero .lede{margin-top:1.75rem}
.hero .btn{margin-top:1rem}
.staff{--gap:1rem;position:relative;height:calc(var(--gap)*4 + 1px);margin-top:clamp(3.5rem,8vw,6rem);
  background:
    linear-gradient(var(--ink),var(--ink)) var(--gutter) 0/2px 100% no-repeat,
    linear-gradient(var(--line),var(--line)) 38% 0/1px 100% no-repeat,
    linear-gradient(var(--line),var(--line)) 72% 0/1px 100% no-repeat,
    repeating-linear-gradient(to bottom,var(--line) 0 1px,transparent 1px var(--gap))}
.note{position:absolute;left:calc(var(--gutter) + 1.6rem);top:calc(var(--gap)*2 - .55rem);width:1.55rem;height:1.1rem;background:var(--blue);border-radius:50%;transform:rotate(-20deg)}
.note::after{content:"";position:absolute;right:-.05rem;bottom:.45rem;width:2px;height:3.3rem;background:var(--blue);transform:rotate(20deg);transform-origin:bottom}
@media (prefers-reduced-motion:no-preference){
  .staff{animation:draw 1.3s cubic-bezier(.16,1,.3,1) both;clip-path:inset(0 0 0 0)}
  .note{animation:land .9s cubic-bezier(.16,1,.3,1) .75s both}
}
@keyframes draw{from{clip-path:inset(0 100% 0 0)}}
@keyframes land{from{opacity:0;translate:0 -1.4rem}}

/* B: problem */
.mess{font-size:clamp(1.5rem,1rem + 2.2vw,2.4rem);line-height:1.2;font-weight:500;max-width:24em}
.mess li{padding-block:1.1rem;border-top:1px solid var(--line)}
.mess li:last-child{border-bottom:1px solid var(--line)}

/* C: case study, drenched in the accent */
.case{background:var(--blue);color:var(--paper);border-top:0}
.case ::selection{background:var(--paper);color:var(--blue)}
.case :focus-visible{outline-color:var(--paper)}
.case-grid{display:grid;gap:2.5rem;margin-top:2rem}
@media (min-width:64rem){.case-grid{grid-template-columns:1.1fr .9fr;gap:4rem}}
.case h3{font-style:italic;font-weight:400;color:var(--on-blue-soft);margin-top:2rem}
.case h3:first-child{margin-top:0}
.case-text p,.case-text li{max-width:36em}
.case-text h3+*{margin-top:.5rem}
.built li{padding-block:.7rem;border-top:1px solid rgba(242,239,233,.28)}
.built li:last-child{border-bottom:1px solid rgba(242,239,233,.28)}
.results li{margin-top:.75rem}
.shot-wrap img{border-radius:3px;box-shadow:0 2px 3px rgba(0,0,0,.18),0 18px 40px -12px rgba(0,0,0,.45)}

.placeholder{border:1.5px dashed currentColor;border-radius:3px;padding:.8rem 1rem;font-size:.95rem;line-height:1.45}
p.placeholder::before,.shot p::before,.portrait p::before{content:"Placeholder \00B7  ";font-weight:700}
.shot,.portrait{display:grid;place-items:center;text-align:center;padding:2rem}
.shot{aspect-ratio:16/10}
.portrait{aspect-ratio:4/5}

/* D: who */
.roles>div{display:grid;gap:.3rem;padding-block:1.25rem;border-top:1px solid var(--line)}
.roles>div:last-child{border-bottom:1px solid var(--line)}
@media (min-width:48rem){.roles>div{grid-template-columns:17rem 1fr;gap:2rem}}
.roles dt{font:600 1.3rem/1.3 var(--serif)}
.roles dd{max-width:34em;color:var(--ink-soft)}
.else{font-size:1.4rem;font-style:italic;margin-top:2.5rem;max-width:26em;line-height:1.4}
.else a{color:var(--blue);font-weight:600;font-style:normal}

/* E: offer */
.offer{background:var(--paper-2)}
.panels{display:grid;gap:1rem;margin-top:2rem}
@media (min-width:56rem){.panels{grid-template-columns:repeat(3,1fr);gap:1.25rem}}
.panels article{display:flex;flex-direction:column;background:var(--paper);border-top:4px solid var(--blue);padding:1.75rem 1.5rem 1.5rem}
.panels article>p:first-of-type{margin-top:.4rem;color:var(--ink-soft)}
.panels ul{margin-top:1.25rem}
.panels li{padding-block:.55rem;border-top:1px solid var(--line)}
.price{margin-top:auto !important;padding-top:1.5rem;font-size:1.5rem;font-weight:600;color:var(--blue)}

/* F: why a musician */
.why-grid{display:grid;gap:2.5rem}
@media (min-width:56rem){.why-grid{grid-template-columns:1.5fr 1fr;gap:4rem}}
.voice{font-size:clamp(1.25rem,1.05rem + .9vw,1.6rem);line-height:1.5;max-width:30em}
.voice+.voice{margin-top:1.25rem}
.small{font-size:.95rem;color:var(--ink-soft);margin-top:2rem}
.portrait-wrap{max-width:22rem}
.portrait-wrap img{border-radius:3px}

/* G: contact, the back cover */
.contact{background:var(--ink);color:var(--paper);border-top:0}
.contact .lede{color:var(--on-ink-soft);margin-top:1.25rem}
.contact :focus-visible{outline-color:#aebbff}
.contact ::selection{background:var(--paper);color:var(--ink)}
.contact-grid{display:grid;gap:2.5rem}
@media (min-width:56rem){.contact-grid{grid-template-columns:1fr 1.1fr;gap:4rem}}
.alt{margin-top:1.5rem;color:var(--on-ink-soft)}
form{display:grid;gap:1.1rem}
form label{display:block;font-weight:600;font-size:.95rem}
input,select,textarea{display:block;width:100%;margin-top:.35rem;padding:.8rem .9rem;border:1.5px solid transparent;border-radius:3px;background:var(--paper);color:var(--ink);font:400 1.0625rem/1.4 var(--sans)}
textarea{resize:vertical;min-height:7.5rem}
input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid #aebbff;outline-offset:2px}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.contact .btn{background:var(--paper);color:var(--ink);justify-self:start}
.contact .btn:hover{background:#fff}
#status{min-height:1.6em;font-weight:600}
#status.ok{color:#bfe9cb}
#status.err{color:#ffc7b3}

.btn{display:inline-block;min-height:3rem;padding:.8rem 1.5rem;border:0;border-radius:3px;background:var(--blue);color:var(--paper);font:600 1.0625rem/1.4 var(--sans);text-decoration:none;cursor:pointer;transition:background .2s,transform .2s cubic-bezier(.16,1,.3,1)}
.btn:hover{background:var(--blue-deep);text-decoration:underline;text-underline-offset:.25em}
.btn:active{transform:translateY(1px)}
.btn:disabled{opacity:.6;cursor:progress}

footer :focus-visible{outline-color:#aebbff}
.req{color:var(--on-ink-soft);font-size:.95rem}
footer{background:var(--ink);color:var(--on-ink-soft);border-top:1px solid rgba(242,239,233,.18);padding:1.75rem var(--gutter);display:flex;flex-wrap:wrap;justify-content:space-between;gap:.5rem 2rem;font-size:.95rem}