body {
  font:16px/1.6 var(--sans)
}
.kicker {
  font:600 13px var(--sans);
  letter-spacing:.07em;
  color:var(--rust);
  text-transform:uppercase
}
.content {
  max-width:820px
}
.content p {
  max-width:740px;
  color:var(--body-copy)
}
.content img {
  width:100%;
  height:min(48vw,410px);
  object-fit:cover;
  margin:26px 0 24px;
  filter:saturate(.75)
}
.note {
  border-top:1px solid var(--line);
  margin-top:32px;
  padding-top:18px;
  color:var(--muted);
  font:12px var(--mono);
  letter-spacing:.04em
}
@media(max-width:760px) {
  .service-page {
    padding-top:120px
  }
  .content img {
    height:300px
  }
  .wrap {
    width:calc(100% - var(--page-gutter-mobile) - var(--page-gutter-mobile))
  }
}
.breadcrumbs {
  display:flex;
  flex-wrap:wrap;
  gap:5px;
  margin-bottom:18px;
  color:var(--muted);
  font:10px var(--mono);
  letter-spacing:.08em;
  text-transform:uppercase
}
.breadcrumbs a {
  transition:color .18s ease
}
.breadcrumbs a:hover {
  color:var(--rust)
}
.service-page .breadcrumbs {
  color:var(--rust)
}
.service-page .breadcrumbs a {
  color:inherit
}
.about-page {
  min-height:100vh;
  padding:132px 0 84px
}
.about-page .breadcrumbs {
  margin-bottom:28px;
  color:var(--rust)
}
.about-page .breadcrumbs a {
  color:inherit
}
.about-layout {
  display:grid;
  grid-template-columns:minmax(300px,.86fr) 1.14fr;
  gap:clamp(32px,6vw,76px);
  align-items:start
}
.about-portrait {
  margin:0;
  overflow:hidden;
  background:#262a27;
  aspect-ratio:4/5
}
.about-portrait img {
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center 35%
}
.about-copy h1 {
  margin:9px 0 23px;
  font:700 clamp(39px,5vw,58px)/1.05 var(--sans);
  letter-spacing:-.04em
}
.about-copy .lead {
  max-width:650px;
  color:var(--ink);
  font:500 22px/1.45 var(--sans)
}
.about-copy p:not(.lead) {
  max-width:660px;
  color:var(--body-copy)
}
.about-copy>p {
  max-width:660px;
  margin:0;
  color:var(--body-copy);
  font:400 16px/1.6 var(--sans)
}
.about-copy>p+p {
  margin-top:16px
}
.about-chips {
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin:26px 0 28px
}
.about-chips span {
  border:1px solid var(--line);
  border-radius:99px;
  padding:7px 12px;
  font:10px var(--mono);
  letter-spacing:.05em;
  text-transform:uppercase
}
.about-contact {
  display:inline-flex;
  align-items:center;
  gap:12px;
  padding:14px 18px;
  background:var(--rust);
  color:var(--ink);
  font:11px var(--mono);
  letter-spacing:.08em;
  text-transform:uppercase;
  transition:background .18s ease,color .18s ease
}
.about-contact:hover {
  background:var(--ink);
  color:#fff
}
@media(max-width:760px) {
  .about-page {
    padding:116px 0 64px
  }
  .about-layout {
    grid-template-columns:1fr;
    gap:30px
  }
  .about-portrait {
    width:min(100%,460px);
    aspect-ratio:1/1.08
  }
  .about-copy h1 {
    font-size:clamp(36px,9vw,48px)
  }
}
/* Recording service page aligned with the light homepage palette. */
.service-page {
  min-height:100vh;
  padding:132px 0 88px
}
.service-page .content {
  max-width:none
}
.service-page .content h1 {
  margin:0 0 18px;
  
  font:700 clamp(54px,8vw,94px)/1.14 var(--sans);
  letter-spacing:-.055em
}
/* Recording page */
body:has(.recording-page) {
  background:var(--surface-white)
}
.recording-page {
  position:relative;
  padding:132px 0 84px
}
.recording-page:before {
  display:none
}
.recording-page>.wrap:first-child {
  padding-bottom:88px
}
.recording-page .content {
  position:relative;
  z-index:1;
  max-width:none
}
.recording-layout {
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(300px,.95fr);
  align-items:stretch;
  gap:clamp(30px,6vw,80px)
}
.recording-copy {
  grid-column:1;
  max-width:790px
}
.recording-image {
  position:relative;
  grid-column:2;
  grid-row:1;
  align-self:stretch;
  width:100%;
  height:auto;
  min-height:0;
  margin:0;
  overflow:hidden;
  background:#fff
}
.recording-image img {
  position:absolute;
  inset:0;
  display:block;
  width:100%;
  height:100%;
  margin:0;
  object-fit:cover;
  object-position:center 45%;
  filter:grayscale(1);
  transform:scale(1.04)
}
.recording-image figcaption {
  position:absolute;
  right:18px;
  bottom:18px;
  z-index:1;
  padding:8px 10px;
  background:rgba(24,25,24,.58);
  color:#fff;
  font:10px var(--mono);
  letter-spacing:.09em;
  text-transform:uppercase
}
.recording-page .note {
  margin-top:28px;
  border-top:1px solid var(--line);
  padding-top:18px;
  color:var(--ink)
}
.equipment-section {
  position:relative;
  margin:0;
  padding:var(--section-space) 0
}
.equipment-section:before {
  display:none
}
.equipment-section-inner.wrap {
  width:min(var(--content-width),calc(100% - var(--page-gutter) - var(--page-gutter)))
}
.equipment-section-inner {
  display:grid;
  grid-template-columns:minmax(260px,.62fr) minmax(0,1.38fr);
  align-items:start;
  gap:clamp(28px,4vw,56px);
  width:100%
}
.equipment-section-inner>div:first-child {
  position:sticky;
  top:112px;
  align-self:start;
  margin:0
}
.equipment-section .kicker {
  color:var(--rust)
}
.equipment-section h2 {
  max-width:380px;
  margin:9px 0 14px
}
.equipment-section>div:first-child>p {
  max-width:360px;
  font-size:16px;
  line-height:1.6;
  color:var(--muted)
}
.gear-grid {
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:26px;
  width:100%;
  min-width:0
}
.gear-grid article {
  grid-column:auto;
  min-width:0;
  padding:0;
  background:transparent;
  border:0
}
.gear-grid h3 {
  margin:0 0 4px;
  padding:0 0 13px;
  border-bottom:1px solid var(--ink);
  font:600 clamp(22px,2.5vw,30px)/1.2 var(--sans);
  letter-spacing:-.025em
}
.mic-list {
  display:grid;
  gap:0
}
.mic-list section {
  display:grid;
  grid-template-columns:minmax(240px,.5fr) minmax(0,1fr);
  align-items:baseline;
  gap:clamp(14px,1.7vw,24px);
  padding:11px 0 12px;
  border-bottom:1px solid var(--line)
}
.mic-list h4 {
  margin:0;
  font:600 16px/1.35 var(--sans)
}
.mic-list p {
  max-width:none;
  margin:0;
  font:15px/1.55 var(--sans);
  color:var(--muted)
}
@media(max-width:1050px) and (min-width:761px) {
  .recording-layout {
    grid-template-columns:minmax(0,1fr) minmax(280px,.9fr);
    gap:32px
  }
}
@media(max-width:880px) and (min-width:761px) {
  .equipment-section-inner {
    grid-template-columns:minmax(220px,.5fr) minmax(0,1fr);
    gap:32px
  }
  .mic-list section {
    grid-template-columns:1fr;
    gap:6px
  }
}
@media(max-width:760px) {
  .recording-page {
    padding:116px 0 58px
  }
  .recording-page>.wrap:first-child {
    padding-bottom:64px
  }
  .recording-layout {
    grid-template-columns:1fr;
    gap:22px
  }
  .recording-copy,.recording-image {
    grid-column:1;
    grid-row:auto
  }
  .recording-image {
    height:320px;
    min-height:320px
  }
  .equipment-section {
    padding:var(--section-space-mobile) 0
  }
  .equipment-section-inner {
    grid-template-columns:1fr;
    gap:30px
  }
  .equipment-section-inner.wrap {
    width:calc(100% - var(--page-gutter-mobile) - var(--page-gutter-mobile))
  }
  .equipment-section-inner>div:first-child {
    position:static;
    margin:0
  }
  .equipment-section>div:first-child>p {
    max-width:540px
  }
  .mic-list section {
    grid-template-columns:1fr;
    gap:5px
  }
}
.service-examples {
  padding:var(--section-space) 0
}
.service-examples.service-album-examples .section-head {
  display:flex;
  align-items:center;
  justify-content:space-between
}
.service-album-slider {min-width:0}
.service-album-arrows {display:flex;gap:12px;flex:0 0 auto}
.service-album-arrows button {width:48px;height:48px;border:1px solid var(--ink);border-radius:50%;background:transparent;color:var(--ink);font:400 21px/1 var(--sans);cursor:pointer;transition:color .2s,border-color .2s,background .2s}
.service-album-arrows button:hover {color:var(--rust);border-color:var(--rust);background:#fff8f5}
.service-album-arrows button:disabled {opacity:.35;cursor:default}
.service-album-arrows button:disabled:hover {color:var(--ink);border-color:var(--ink);background:transparent}
.service-album-arrows button:focus-visible,.service-album-viewport:focus-visible {outline:2px solid var(--rust);outline-offset:4px}
.service-album-viewport {overflow-x:auto;overflow-y:hidden;touch-action:pan-x pan-y;cursor:grab;padding:10px 0 4px;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain}
.service-album-viewport::-webkit-scrollbar {display:none}
.service-album-viewport.dragging {cursor:grabbing;scroll-snap-type:none}
.service-album-grid {position:relative;display:flex;gap:28px}
.service-album {flex:0 0 calc((100% - 84px)/4);min-width:0;user-select:none;scroll-snap-align:start;scroll-snap-stop:normal}
.service-album-art {width:100%;aspect-ratio:1;overflow:hidden;outline:1px solid #e8e8e5;outline-offset:-1px;transform-origin:center;transform-style:preserve-3d;backface-visibility:hidden}
.service-album-grid .service-album-cover {display:block;width:100%;height:100%;aspect-ratio:1;object-fit:contain;pointer-events:none}
.service-album-grid .service-album-cover--crop {object-fit:cover;object-position:center}
.service-album-meta {border-top:1px solid var(--line);margin-top:22px;padding-top:15px}
.service-album-meta h3 {margin:0 0 5px;font:700 18px/1.25 var(--sans);letter-spacing:-.025em}
.service-album-meta p {margin:0;color:var(--muted);font:400 14px/1.4 var(--sans)}
.service-album-controls {display:flex;align-items:center;justify-content:space-between;gap:20px;margin-top:35px;color:var(--muted);font:400 13px/1.4 var(--sans)}
.service-album-hint {margin:0}
.service-album-status {display:flex;align-items:center;gap:13px;font-variant-numeric:tabular-nums}
.service-album-line {position:relative;width:90px;height:1px;background:var(--line)}
.service-album-line span {position:absolute;top:0;left:0;height:1px;background:var(--rust);width:12.5%}
.service-album-announcement {position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
@media(max-width:760px){
.service-examples {padding:var(--section-space-mobile) 0}
.service-examples .section-lede {margin-top:14px}
.service-album-arrows button {width:44px;height:44px}
}
@media(max-width:700px){
.service-examples.service-album-examples .section-head {display:block}
.service-album-arrows {margin-top:25px}
.service-album-grid {gap:18px}
.service-album {flex-basis:82%}
.service-album-meta {margin-top:18px}
.service-album-meta h3 {font-size:17px}
.service-album-controls {margin-top:26px;font-size:12px}
.service-album-line {width:56px}
}
@media(prefers-reduced-motion:reduce){.service-album-arrows button{transition:none}.service-album-art{transform:none!important}}
/* About page: sticky biography timeline and a horizontal project carousel. */
.about-intro {
  display:grid;
  grid-template-columns:minmax(280px,.86fr) minmax(0,1.14fr);
  gap:clamp(34px,6vw,76px);
  align-items:start
}
.about-intro .about-portrait {
  position:relative;
  top:auto;
  aspect-ratio:auto;
  min-height:100%;
  align-self:stretch
}
.about-intro .about-copy {
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  min-width:0
}
.about-intro .about-copy .about-contact {
  margin-top:auto
}
.about-intro .about-copy h1 {
  margin:9px 0 23px
}
.vita-section {
  position:relative;
  left:auto;
  width:100vw;
  margin-left:calc(50% - 50vw);
  transform:none;
  display:grid;
  grid-template-columns:minmax(230px,.62fr) minmax(0,1.38fr);
  align-items:start;
  gap:clamp(32px,7vw,88px);
  padding:100px max(var(--page-gutter),calc((100vw - var(--content-width))/2));
  background:var(--surface-soft);
  border:0
}
.vita-sticky {
  position:sticky;
  top:112px;
  align-self:start
}
.vita-sticky h2 {
  margin:9px 0 24px
}
.about-projects {
  padding:92px 0;
  background:var(--surface-white);
  border:0
}
@media(max-width:760px) {
  .about-intro {
    grid-template-columns:1fr;
    gap:30px
  }
  .about-intro .about-portrait {
    position:relative;
    top:auto;
    width:min(100%,460px);
    aspect-ratio:1/1.08
  }
  .about-projects {
    padding:var(--section-space-mobile) 0
  }
}
/* Keep the divider spacing consistent on all service pages and the about page. */
.service-page>.wrap:first-child {
  padding-bottom:88px
}
.about-page .about-intro {
  padding-bottom:88px
}
@media(max-width:760px) {
  .service-page>.wrap:first-child,.about-page .about-intro {
    padding-bottom:64px
  }
}
/* Full-bleed stage-project carousel, inspired by the Webflow composition. */
.about-projects-head {
  display:block;
  margin-bottom:32px
}
.about-projects-head h2 {
  margin:9px 0 12px
}
.projects-intro {
  max-width:540px;
  margin:0;
  color:var(--muted);
  font-size:16px
}
.project-carousel {
  position:relative;
  left:50%;
  width:100vw;
  transform:translateX(-50%);
  overflow:hidden
}
.project-track {
  position:relative;
  left:auto;
  display:grid;
  width:100%;
  margin:0;
  grid-auto-columns:min(52vw,680px);
  grid-auto-flow:column;
  gap:16px;
  overflow-x:auto;
  overflow-y:hidden;
  padding:0 max(20px,calc((100vw - min(52vw,680px))/2)) 16px;
  scroll-padding-inline:max(20px,calc((100vw - min(52vw,680px))/2));
  scroll-snap-type:x mandatory;
  scroll-behavior:smooth;
  scrollbar-width:none;
  overscroll-behavior-inline:contain;
  transform:none
}
.project-track::-webkit-scrollbar {
  display:none
}
.project-card {
  position:relative;
  isolation:isolate;
  display:block;
  min-width:0;
  min-height:0;
  height:clamp(360px,32vw,430px);
  overflow:hidden;
  padding:0;
  border:0;
  border-radius:0;
  background:#292929;
  color:#fff;
  scroll-snap-align:center;
  text-align:left
}
.project-card:before {
  display:none
}
.project-card:after {
  position:absolute;
  z-index:0;
  inset:0;
  background:linear-gradient(180deg,transparent 50%,rgba(0,0,0,.28));
  pointer-events:none;
  content:""
}
.project-card .project-photo {
  position:absolute;
  z-index:-1;
  inset:0;
  width:100%;
  height:100%;
  margin:0;
  object-fit:cover;
  object-position:center;
  transition:transform .5s ease
}
.project-card:hover .project-photo,.project-card:focus-visible .project-photo {
  transform:scale(1.035)
}
.project-card .project-logo {
  position:absolute;
  z-index:1;
  left:22px;
  bottom:20px;
  width:clamp(104px,14vw,174px);
  max-height:70px;
  object-fit:contain;
  object-position:left bottom;
  opacity:.92;
  transition:opacity .2s ease
}
.project-card .project-logo-twaeng {
  width:clamp(94px,11vw,136px)
}
.project-card .project-logo-anders {
  width:clamp(116px,15vw,180px)
}
.project-card .project-logo-jazzchor {
  width:clamp(138px,18vw,214px)
}
.project-card .project-logo-erdbeeren {
  width:clamp(150px,20vw,250px);
  max-height:84px
}
.project-description-container {
  position:absolute;
  z-index:2;
  inset:0;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:12px;
  padding:clamp(22px,3.4vw,46px);
  background:rgba(22,24,24,.16);
  backdrop-filter:brightness(.58) blur(8px);
  -webkit-backdrop-filter:brightness(.58) blur(8px);
  opacity:0;
  transition:opacity .28s ease;
  pointer-events:none
}
.project-card:hover .project-description-container,.project-card:focus-visible .project-description-container {
  opacity:1
}
.project-card .project-type {
  color:#ff9a80;
  font:11px var(--mono);
  letter-spacing:.09em;
  text-transform:uppercase
}
.project-card .project-description {
  max-width:500px;
  color:#fff;
  font:400 clamp(16px,1.7vw,22px)/1.35 var(--sans);
  letter-spacing:-.02em
}
.project-card:focus-visible {
  outline:3px solid var(--rust);
  outline-offset:3px
}
.project-controls {
  position:absolute;
  z-index:4;
  inset:50% 20px auto;
  display:flex;
  justify-content:space-between;
  transform:translateY(-50%);
  pointer-events:none
}
.project-controls button {
  width:54px;
  height:54px;
  border:1px solid rgba(36,36,36,.5);
  border-radius:50%;
  background:rgba(255,255,255,.94);
  color:var(--ink);
  font:400 28px/1 var(--sans);
  cursor:pointer;
  pointer-events:auto;
  transition:background .2s,color .2s,transform .2s
}
.project-controls button:hover {
  background:var(--ink);
  color:#fff;
  transform:scale(1.04)
}
.project-status {
  width:min(var(--content-width),calc(100% - var(--page-gutter) - var(--page-gutter)));
  margin:12px auto 0;
  text-align:center;
  color:var(--muted);
  font:11px var(--mono);
  letter-spacing:.06em
}
@media(max-width:760px) {
  .project-track {
    grid-auto-columns:82vw;
    gap:12px;
    padding:0 9vw 14px;
    scroll-padding-inline:9vw
  }
  .project-card {
    height:clamp(380px,96vw,430px)
  }
  .project-card .project-logo {
    left:16px;
    bottom:16px
  }
  .project-description-container {
    padding:22px
  }
  .project-controls {
    inset:50% 12px auto
  }
  .project-controls button {
    width:42px;
    height:42px;
    font-size:24px
  }
  .project-status {
    width:calc(100% - var(--page-gutter-mobile) - var(--page-gutter-mobile))
  }
}
/* Service example heading and explanatory copy share one clear vertical stack. */
.service-examples .section-head {
  display:block
}
.service-examples .section-lede {
  max-width:620px;
  margin:12px 0 0
}
.equipment-section-inner>div:first-child>p {
  max-width:300px
}
.recording-page .gear-grid {
  grid-template-columns:minmax(0,1fr);
  gap:26px
}
.service-page .content>img {
  filter:grayscale(1)
}
@media(prefers-reduced-motion:reduce) {
  .project-card .project-photo,.project-description-container,.project-controls button {
    transition:none
  }
}
/* Consistent service-page intro animation and heading image treatment. */
.service-page:not(.recording-page) .equipment-section-inner>div:first-child {
  position:static
}
.service-page .equipment-section h2.section-title-image {
  padding-bottom:.12em;
  line-height:1.18
}
.service-page>.wrap:first-child .content {
  animation:serviceIntroIn .9s cubic-bezier(.2,.7,.2,1) both
}
.recording-page .recording-image {
  animation:serviceIntroIn .9s .12s cubic-bezier(.2,.7,.2,1) both
}
.about-page .about-intro .about-portrait {
  animation:serviceIntroIn .9s cubic-bezier(.2,.7,.2,1) both
}
.about-page .about-intro .about-copy {
  animation:serviceIntroIn .9s .12s cubic-bezier(.2,.7,.2,1) both
}
/* Keep the intro reveal opacity-only. Even a completed translate animation can
   interfere with fixed background-clip text masks in Safari/WebKit. */
@keyframes serviceIntroIn {
  from {
    opacity:0
  }
  to {
    opacity:1
  }
}
@media(prefers-reduced-motion:reduce) {
  .service-page>.wrap:first-child .content,.recording-page .recording-image,.about-page .about-intro .about-portrait,.about-page .about-intro .about-copy {
    animation:none
  }
}
.vita-sticky .vita-intro {
  max-width:330px;
  margin:0;
  color:var(--muted)
}
.vita-awards {
  margin-top:34px;
  padding-top:20px;
  border-top:1px solid var(--section-divider)
}
.vita-awards>.kicker {
  margin-bottom:12px
}
.vita-award-list {
  display:grid;
  gap:10px;
  margin:0;
  padding:0;
  list-style:none
}
.vita-award-list li {
  display:grid;
  grid-template-columns:38px minmax(0,1fr);
  gap:10px;
  color:var(--muted);
  font:400 13px/1.5 var(--sans)
}
.vita-award-year {
  color:var(--rust);
  font:500 12px/1.5 var(--mono);
  white-space:nowrap
}
.vita-content {
  min-width:0
}
.vita-entry h3 {
  margin:5px 0 0;
  font:600 clamp(20px,2.2vw,27px)/1.2 var(--sans);
  letter-spacing:-.025em
}
.vita-entry p {
  max-width:650px;
  margin:8px 0 0;
  color:var(--muted)
}
.vita-timeline {
  position:relative;
  display:grid;
  gap:0;
  margin:32px 0 0;
  padding:0;
  list-style:none
}
.vita-timeline::before {
  position:absolute;
  top:12.5px;
  bottom:12.5px;
  left:5.5px;
  width:1px;
  transform:translateX(-50%);
  background:var(--section-divider);
  content:""
}
.vita-entry {
  position:relative;
  min-width:0;
  padding:0 0 34px 32px
}
.vita-entry:last-child {
  padding-bottom:0
}
.vita-entry::before {
  position:absolute;
  top:7px;
  left:5.5px;
  width:11px;
  height:11px;
  transform:translateX(-50%);
  border:2px solid var(--rust);
  border-radius:50%;
  background:var(--surface-soft);
  content:""
}
.vita-year {
  display:block;
  color:var(--rust);
  font:500 14px/1.2 var(--mono);
  white-space:nowrap
}
@media(max-width:760px) {
  .vita-section {
    grid-template-columns:1fr;
    gap:36px;
    padding:var(--section-space-mobile) var(--page-gutter-mobile)
  }
  .vita-sticky {
    position:relative;
    top:auto
  }
  .vita-sticky .vita-intro {
    max-width:520px
  }
  .vita-awards {
    max-width:520px
  }
}
/* Mixing intro: match the clean two-column composition of Recording. */
.mixing-page {
  padding-top:132px;
  background:var(--surface-white)
}
.mixing-intro-wrap {
  padding-bottom:88px
}
.mixing-page .breadcrumbs {
  margin-bottom:28px;
  color:var(--rust)
}
.mixing-page .breadcrumbs a {
  color:inherit
}
.mixing-layout {
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  align-items:stretch;
  gap:clamp(30px,6vw,80px)
}
.mixing-image {
  position:relative;
  min-width:0;
  min-height:480px;
  margin:0;
  overflow:hidden;
  background:#e9e9e9
}
.mixing-image img {
  display:block;
  width:100%;
  height:100%;
  min-height:480px;
  object-fit:cover;
  object-position:center 50%
}
.mixing-copy {
  max-width:none;
  align-self:center;
  min-width:0
}
.mixing-copy p {
  max-width:unset;
  margin:0 0 16px;
  color:var(--body-copy)
}
.mixing-copy .note {
  margin-top:26px
}
@media(max-width:760px) {
  .mixing-page {
    padding-top:116px
  }
  .mixing-intro-wrap {
    padding-bottom:64px
  }
  .mixing-layout {
    grid-template-columns:1fr;
    gap:26px
  }
  .mixing-image,.mixing-image img {
    min-height:0;
    height:clamp(260px,72vw,390px)
  }
  .mixing-copy {
    align-self:auto
  }
}
/* One shared subtitle system for every service page. */
.service-page .service-hero-subtitle {
  display:block;
  max-width:760px;
  margin:-8px 0 20px;
  padding-bottom:.12em;
  color:transparent;
  background-image:linear-gradient(rgba(0,0,0,.46),rgba(0,0,0,.46)),url("assets/studio-bw-optimized.jpg");
  background-size:auto,cover;
  background-position:center,center 48%;
  background-attachment:fixed,fixed;
  background-clip:text;
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  font:500 clamp(24px,3vw,36px)/1.35 var(--sans);
  letter-spacing:-.035em;
}
/* Editing: compact title and introduction, then image beside three readable services. */
.editing-page {
  padding-top:132px;
  background:var(--surface-white)
}
.editing-page>.wrap.editing-intro-wrap {
  padding-bottom:60px
}
.editing-page .editing-hero-copy {
  max-width:920px
}
.editing-page .editing-intro-text {
  max-width:900px;
  margin:0;
  color:var(--body-copy)
}
.editing-work {
  padding:60px 0 84px
}
.editing-work-grid {
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  align-items:stretch;
  gap:clamp(34px,5vw,64px)
}
.editing-screenshot {
  position:relative;
  min-width:0;
  min-height:100%;
  margin:0;
  overflow:hidden;
  background:var(--surface-soft)
}
.editing-screenshot img {
  display:block;
  width:100%;
  height:100%;
  min-height:100%;
  object-fit:cover;
  object-position:center
}
.editing-screenshot figcaption {
  position:absolute;
  right:16px;
  bottom:16px;
  padding:8px 11px;
  background:rgba(255,255,255,.9);
  color:var(--muted);
  font:11px var(--mono);
  letter-spacing:.04em
}
.editing-services {
  display:grid;
  grid-template-columns:minmax(0,1fr);
  align-content:stretch;
  min-width:0
}
.editing-service {
  display:grid;
  grid-template-columns:32px minmax(0,1fr);
  align-content:start;
  gap:18px;
  min-width:0;
  padding:24px 0;
  border-bottom:1px solid var(--section-divider)
}
.editing-service:first-child {
  padding-top:0
}
.editing-service:last-child {
  padding-bottom:0;
  border-bottom:0
}
.editing-icon {
  width:28px;
  height:28px;
  align-self:start;
  margin-top:2px;
  fill:none;
  stroke:var(--ink);
  stroke-width:1.7;
  stroke-linecap:round;
  stroke-linejoin:round
}
.editing-service h2 {
  margin:0 0 9px;
  color:var(--ink);
  font:700 clamp(22px,2.2vw,28px)/1.25 var(--sans);
  letter-spacing:-.025em
}
.editing-service p {
  max-width:unset;
  margin:0;
  color:var(--muted);
  font:400 16px/1.65 var(--sans)
}
@media(max-width:900px) {
  .editing-work-grid {
    grid-template-columns:1fr;
    gap:34px
  }
  .editing-screenshot {
    aspect-ratio:16/10;
    min-height:0
  }
  .editing-screenshot img {
    height:100%;
    min-height:0
  }
  .editing-service {
    grid-template-columns:34px minmax(0,1fr);
    gap:18px;
    padding:24px 0
  }
}
@media(max-width:760px) {
  .editing-page {
    padding-top:116px
  }
  .editing-page>.wrap.editing-intro-wrap {
    padding-bottom:42px
  }
  .editing-work {
    padding:42px 0 64px
  }
  .editing-work-grid {
    gap:28px
  }
  .editing-screenshot {
    aspect-ratio:4/3
  }
  .editing-service {
    grid-template-columns:30px minmax(0,1fr);
    gap:14px;
    padding:21px 0
  }
  .editing-icon {
    width:26px;
    height:26px
  }
  .editing-service h2 {
    font-size:21px
  }
  .editing-service p {
    font-size:15px;
    line-height:1.65
  }
}

/* All service-page hero titles share one size and baseline at every breakpoint. */
@media(max-width:760px) {
  .service-page .content h1 {
    font-size:56px;
    line-height:1.15;
    padding-bottom:.14em
  }
}