:root {
  --purple: #220f38; --ink: #281a2a; --cream: #f3efe7; --gold: #dfbb77;
  --muted: #d4c7d2; --rule: rgba(231,210,181,.24);
  --serif: 'Cormorant Garamond',Georgia,serif;
  --sans: 'Montserrat',Arial,sans-serif;
}
* { box-sizing:border-box }
[hidden] { display:none!important }
html { scroll-behavior:smooth; scroll-padding-top:28px }
body {
  margin:0; color:var(--cream); background-color:var(--purple);
  /* Fine, seamless grain centered on the base purple, below every element. */
  background-image:url('assets/royal-grain.svg?v=2'); background-size:384px 384px;
  font-family:var(--sans); font-size:17px;
  font-weight:400; line-height:1.7; -webkit-font-smoothing:antialiased;
}
::selection { background:var(--gold); color:var(--ink) }
a { color:inherit; text-decoration:none }
button { font:inherit; cursor:pointer }
a,button { -webkit-tap-highlight-color:transparent }
a:focus-visible,button:focus-visible { outline:3px solid var(--gold); outline-offset:5px }
.section-light a:focus-visible,.contact a:focus-visible,.contact button:focus-visible { outline-color:#694460 }
img { display:block; max-width:100% }
p,h1,h2,h3 { margin:0 }
.wrap { width:min(1320px,calc(100% - 112px)); margin-inline:auto }
.skip-link { position:absolute;top:-100px;left:24px;padding:14px;background:var(--gold);color:var(--ink);z-index:10 }
.skip-link:focus { top:10px }

/* Navigation and the studio signature. */
.header { height:124px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--rule);position:relative;z-index:2;gap:24px }
.brand { display:flex;gap:16px;align-items:center;flex-shrink:0 }
.brand-mark { width:62px;height:62px }
.brand-type { display:flex;flex-direction:column;gap:8px }
.brand-type img { width:180px;height:auto }
.brand-type>span { color:var(--gold);font-size:12px;letter-spacing:.15em;text-transform:uppercase;line-height:1.2;padding-left:2px }
.header nav { display:flex;gap:32px;align-items:center;font-size:15px;font-weight:500 }
.header nav>a { padding:12px 0;transition:color .2s }
.header nav>a:hover { color:var(--gold) }
.header nav .nav-contact { display:inline-flex;align-items:center;justify-content:center;min-height:50px;padding:12px 24px;border:1px solid #ad8b60;border-radius:999px;background:transparent;color:var(--cream);transition:background .2s,border-color .2s }
.header nav .nav-contact:hover { background:rgba(232,200,146,.08);border-color:#e7c78f }

/* Hero: legible copy and an actual transparent microphone cutout. */
.hero-surface { position:relative;isolation:isolate;overflow:hidden }
.hero-surface::before { content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(ellipse at 77% 38%,rgba(82,36,134,.55) 0%,rgba(63,28,104,.3) 32%,rgba(34,15,56,0) 72%),linear-gradient(115deg,rgba(12,6,24,.18),transparent 60%);mask-image:linear-gradient(to bottom,transparent,#000 15%,#000 80%,transparent) }
.hero { min-height:720px;position:relative;padding-top:78px;padding-bottom:110px;isolation:isolate }
.hero-sweep { position:absolute;z-index:-1;left:50%;bottom:24px;width:max(100vw,1320px);height:440px;transform:translateX(-50%);pointer-events:none;overflow:visible }
.sweep-lines { transform-box:fill-box;transform-origin:center;animation:sweep-sway 24s ease-in-out infinite }
@keyframes sweep-sway {
  0%,100% { transform:translateY(12px) rotate(.55deg) scaleY(.94) }
  50% { transform:translateY(-14px) rotate(-.55deg) scaleY(1.065) }
}
.hero-sweep path { fill:none;stroke:url(#sweep-gold);stroke-width:1.2;vector-effect:non-scaling-stroke }
.hero-sweep .sweep-echo { opacity:.45;stroke-width:.8 }
.hero-sweep .sweep-whisper { opacity:.24;stroke-width:.8 }
.hero-copy { position:relative;z-index:1;width:63% }
.studio-label { font-size:18px;font-weight:500;line-height:1.5;color:#e1cda9;max-width:35ch;text-wrap:balance }
h1 { font-family:var(--serif);font-size:clamp(74px,7.5vw,110px);font-weight:400;letter-spacing:-.035em;line-height:.98;margin-top:26px }
h1 em,h2 em { font-weight:400;color:var(--gold) }
.hero-description { font-size:20px;line-height:1.65;margin-top:28px;color:#f1e9ef;max-width:43ch }
.hero-art { position:absolute;z-index:0;right:-28px;top:32px;bottom:100px;width:56%;display:flex;justify-content:center;align-items:flex-start;pointer-events:none }
.microphone-image { width:auto;height:auto;max-width:100%;max-height:100%;object-fit:contain;-webkit-mask-image:linear-gradient(to bottom,#000 76%,transparent 100%);mask-image:linear-gradient(to bottom,#000 76%,transparent 100%) }

/* Text-only controls with balanced spacing and restrained surface changes. */
.button { display:inline-flex;align-items:center;justify-content:center;min-height:60px;padding:17px 32px;font-size:17px;line-height:1.3;font-weight:600;text-align:center;border-radius:999px;border:1px solid transparent;transition:background .2s,border-color .2s,box-shadow .2s }
.button-gold { margin-top:30px;color:#2b1b26;border-color:var(--gold);background:var(--gold) }
.button-gold:hover { background:#e9ca91;border-color:#e9ca91 }
.button-plum { color:#f9efdc;background:var(--purple);border-color:var(--purple) }
.button-plum:hover { background:var(--purple);box-shadow:0 4px 14px #220f3826 }
.text-link { display:inline-flex;align-items:center;justify-content:center;min-height:56px;margin-top:26px;padding:14px 26px;border:1px solid #a48a67;border-radius:999px;background:transparent;font-size:16px;font-weight:500;line-height:1.4;text-align:center;transition:background .2s,border-color .2s }
.text-link:hover { background:#e8c89214;border-color:#e7c78f }

.disciplines { padding:25px 0;border-block:1px solid var(--rule) }
.disciplines .wrap { display:grid;grid-template-columns:minmax(0,1fr) 22px minmax(0,1.5fr) 22px minmax(0,1fr) 22px minmax(0,1.4fr);align-items:center;gap:16px }
.disciplines span { font-size:18px;font-weight:500;line-height:1.5;color:#e9dce5;text-align:center }
.service-divider { display:block;width:22px;height:28px;fill:none;stroke:var(--gold);stroke-width:1.5;stroke-linecap:round;justify-self:center;opacity:.9 }

/* Readable service rows, with room for the longer descriptions. */
.section-light { background:var(--cream);color:var(--ink) }
.services { padding:90px 0 }
.section-intro { display:grid;grid-template-columns:1fr 1.3fr;align-items:end;gap:72px;margin-bottom:50px }
h2 { font-family:var(--serif);font-size:clamp(48px,5vw,68px);font-weight:400;line-height:1.04;letter-spacing:-.025em }
.section-light h2 em { color:#785334 }
.section-intro>p { font-size:18px;line-height:1.75;color:#635160;padding-bottom:4px;max-width:48ch }
.service { display:grid;grid-template-columns:1fr 1.3fr;gap:72px;align-items:start;border-top:1px solid #d4c9cc;padding:38px 0 }
.service:last-child { border-bottom:1px solid #d4c9cc }
.service h3 { font-family:var(--serif);font-size:38px;font-weight:500;line-height:1.15;letter-spacing:-.02em }
.service p { font-size:18px;line-height:1.75;color:#5e4f5d;max-width:57ch }

.studio { padding-block:100px;display:grid;grid-template-columns:.9fr 1.1fr;gap:8%;align-items:center }
.studio-visual { position:relative;isolation:isolate;min-height:340px;display:grid;place-items:center;padding:30px 20px }
.studio-visual::before { content:'';position:absolute;inset:-40px -18px;z-index:-1;pointer-events:none;background:radial-gradient(ellipse 50% 50% at 50% 50%,rgba(82,36,134,.55) 0%,rgba(63,28,104,.3) 40%,rgba(34,15,56,0) 100%) }
.studio-seal { position:relative;width:250px }
.studio-seal img { width:200px;height:200px;margin:25px }
.seal-orbit { position:absolute;inset:-9px;border:1px solid #d3ad6840;border-radius:50% }
.seal-orbit:after { content:'';position:absolute;inset:12px;border:1px dashed #d3ad682b;border-radius:50% }
.studio-copy h2 { font-size:clamp(46px,4.1vw,58px);margin-bottom:26px }
.studio-copy>p { font-size:18px;line-height:1.8;color:#ddd0db;max-width:58ch;margin-top:17px }

/* An inviting, readable inquiry form with room to write. */
.contact { background:#e9dfcd;color:var(--ink);padding:88px 0 96px }
.contact-layout { display:grid;grid-template-columns:.85fr 1.15fr;gap:80px;align-items:start }
.contact h2 { font-size:clamp(62px,6.2vw,88px);line-height:1.02 }
.contact h2 em { color:#775332 }
.contact-intro>p { font-size:18px;line-height:1.8;color:#604d5a;max-width:34ch;margin-top:28px }
.contact-form { display:grid;gap:26px;min-width:0 }
.form-row { display:grid;grid-template-columns:1fr 1fr;gap:22px }
.form-field { display:grid;gap:9px;min-width:0 }
.form-field label { font-size:16px;line-height:1.5;font-weight:600;color:#493344 }
.form-field label span { font-weight:400;color:#675361 }
.form-field input,.form-field select,.form-field textarea { display:block;width:100%;min-width:0;max-width:100%;padding:15px 17px;border:1px solid #aa9587;border-radius:12px;background:#f5eedf;color:var(--ink);font:400 17px/1.6 var(--sans);transition:border-color .2s,box-shadow .2s;-webkit-appearance:none;appearance:none }
.form-field select { padding-right:45px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18'%3E%3Cpath d='m4 7 5 5 5-5' fill='none' stroke='%235b4051' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 17px center }
.form-field textarea { resize:vertical;min-height:176px }
.form-field input:focus,.form-field select:focus,.form-field textarea:focus { outline:2px solid #6b4a64;outline-offset:3px;border-color:#6b4a64 }
.form-field ::placeholder { color:#7a6872;opacity:1 }
.form-submit { display:flex;align-items:center;gap:24px;flex-wrap:wrap }
.form-submit .button { flex-shrink:0;min-width:190px }
.form-note { font-size:15px;line-height:1.65;color:#675361;max-width:27ch }
.form-status { font-size:17px;line-height:1.65;padding:18px 20px;border:1px solid #a39176;border-radius:12px;background:#f5eedf;outline-offset:4px }
.form-status:empty { display:none }
.form-status[data-state="error"] { border-color:#a25656;color:#803b3b }
.form-status[data-state="success"] { border-color:#737c62;color:#35492e }
.form-submit button:disabled { cursor:wait;opacity:.65 }
.form-honeypot { display:none }

.footer { display:flex;align-items:center;justify-content:space-between;gap:24px;padding-block:32px;font-size:14px;line-height:1.6;color:#d2c0ce }
.footer>a:last-child { min-height:44px;display:flex;align-items:center;font-size:14px }
.footer a:hover { color:var(--gold) }

@media(min-width:1500px) {
  .hero { min-height:780px;padding-top:96px }
  .hero-art { top:40px;bottom:110px }
}
@media(max-width:1100px) {
  .wrap { width:calc(100% - 72px) }
  .header nav { gap:24px }
  .hero { min-height:720px }
  .hero-copy { width:67% }
  h1 { font-size:clamp(70px,8.6vw,94px) }
  .hero-art { width:51%;right:-24px;top:80px }
  .hero-description { font-size:19px }
  .section-intro { gap:42px }
  .service { gap:42px }
  .service h3 { font-size:35px }
  .studio { gap:6% }
  .studio-copy h2 { font-size:46px }
  .studio-visual { min-height:320px;padding-inline:16px }
  .contact-layout { gap:44px;grid-template-columns:.85fr 1.15fr }
  .form-row { grid-template-columns:1fr;gap:24px }
}
@media(max-width:850px) and (min-width:761px) {
  .header nav { gap:18px;font-size:14px }
  .brand-type img { width:155px }
  .brand-mark { width:54px;height:54px }
  .brand { gap:12px }
  .header nav .nav-contact { padding-inline:18px }
  .hero-art { top:180px;width:46% }
  .hero-description { max-width:375px }
  .studio { grid-template-columns:1fr }
  .studio-visual { max-width:500px;width:100%;order:2;margin-top:40px }
}
@media(max-width:760px) {
  html { scroll-padding-top:24px }
  body { font-size:16px }
  .wrap { width:calc(100% - 40px) }
  .header { height:104px;gap:14px }
  .brand { gap:10px }
  .brand-mark { width:46px;height:46px }
  .brand-type img { width:132px }
  .brand-type>span { font-size:11px;letter-spacing:.08em }
  .header nav { gap:0 }
  .header nav>a:not(.nav-contact) { display:none }
  .header nav .nav-contact { min-height:46px;padding:10px 15px;font-size:14px }
  .hero { min-height:0;padding-top:42px;padding-bottom:28px }
  .hero-sweep { width:calc(100vw + 160px);height:260px;bottom:68px;opacity:.8 }
  .hero-sweep .sweep-whisper { display:none }
  .hero-surface::before { background:radial-gradient(ellipse at 64% 68%,rgba(82,36,134,.55),rgba(63,28,104,.2) 40%,rgba(34,15,56,0) 72%);mask-image:linear-gradient(to bottom,transparent,#000 18%,#000 84%,transparent) }
  .hero-copy { width:100% }
  .studio-label { font-size:17px;max-width:29ch }
  h1 { font-size:clamp(60px,10vw,78px);line-height:1;margin-top:25px }
  .hero-description { font-size:18px;line-height:1.7;margin-top:25px }
  .button { font-size:16px;min-height:56px;padding:16px 28px }
  .button-gold { margin-top:26px }
  .hero-art { position:relative;top:auto;right:auto;bottom:auto;aspect-ratio:1;width:min(100%,400px);margin:24px auto 32px }
  .microphone-image { height:auto }
  .disciplines { padding-block:2px }
  .disciplines .wrap { grid-template-columns:repeat(2,minmax(0,1fr));gap:0 28px;align-items:start }
  .disciplines .wrap::before { content:'';grid-column:1/-1;grid-row:2;height:1px;background:var(--rule) }
  .disciplines span { font-size:17px;text-align:left;padding-block:22px }
  .service-divider { display:none }
  .services { padding-block:60px }
  .section-intro { display:block;margin-bottom:35px }
  .section-intro h2 { font-size:50px }
  .section-intro>p { font-size:17px;line-height:1.75;margin-top:20px;max-width:45ch }
  .desktop-break { display:none }
  .service { display:block;padding:30px 0 }
  .service h3 { font-size:36px;margin-bottom:16px }
  .service p { font-size:17px;line-height:1.75 }
  .studio { padding-block:62px;grid-template-columns:1fr;gap:42px }
  .studio-copy h2 { font-size:46px;margin-bottom:24px }
  .studio-copy>p { font-size:17px;line-height:1.8 }
  .studio-visual { min-height:280px;order:2 }
  .studio-seal { width:220px }
  .studio-seal img { width:180px;height:180px;margin:20px }
  .text-link { font-size:15px;padding-inline:22px }
  .contact { padding-block:58px 64px }
  .contact-layout { grid-template-columns:1fr;gap:36px }
  .contact h2 { font-size:clamp(62px,12vw,80px) }
  .contact-intro>p { font-size:17px;margin-top:22px;max-width:42ch }
  .form-row { grid-template-columns:1fr;gap:24px }
  .form-submit { gap:18px }
  .form-note { max-width:32ch }
  .footer { flex-wrap:wrap;gap:20px;padding-block:28px }
  .footer-brand { width:100% }
  .footer p { font-size:13px }
  .footer>a:last-child { font-size:13px }
}
@media(max-width:360px) {
  .wrap { width:calc(100% - 36px) }
  .brand-type img { width:116px }
  .brand-mark { width:40px;height:40px }
  .brand { gap:8px }
  .brand-type>span { font-size:10px }
  .header nav .nav-contact { padding:10px 12px;font-size:13px }
  h1 { font-size:56px }
  .hero-description { font-size:17px }
  .section-intro h2,.studio-copy h2 { font-size:43px }
  .service h3 { font-size:33px }
  .text-link { font-size:14px;padding-inline:18px }
  .contact h2 { font-size:60px }
  .contact .button { font-size:15px;padding-inline:24px }
}
@media(prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto }
  .sweep-lines { animation:none;transform:none }
  .button,.text-link,.header nav .nav-contact { transition:none }
}