/* MMQ — martinqmusic.com
   Values are transcribed from MMQ-V2.fig. Odd numbers (3.139px, 24.839px,
   32.299px) are the design's, not mistakes. No shadows in this system. */

@font-face{font-family:"Venu Aero";src:url("../fonts/VenuAero-Regular.otf") format("opentype");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Venu Aero";src:url("../fonts/VenuAero-Medium.otf") format("opentype");font-weight:500;font-style:normal;font-display:swap}

:root{
  --neutral-0:#FFFFFF;--neutral-800:#363636;--neutral-875:#1C1C1E;--neutral-900:#131314;--neutral-925:#0D0D0E;--neutral-1000:#000000;
  --green-100:#A0FD26;--yellow-300:#FFBF00;--orange-300:#F39D1C;--orange-400:#D48918;--red-500:#FF5E32;
  --gray-400:#9CA3AF;--gray-500:#6B7280;

  --bg:var(--neutral-1000);--surface-card:var(--neutral-925);--hairline:var(--neutral-875);
  --text:var(--neutral-0);--text-body:var(--gray-400);--text-faint:var(--gray-500);
  --accent:var(--green-100);--amber:var(--yellow-300);--credit:var(--red-500);--muted:var(--orange-300);

  --scrim:linear-gradient(0deg,rgba(0,0,0,0) -7.45%,#000 61.79%);
  --gutter:clamp(16px,3.5vw,48px);
  --ease:cubic-bezier(.4,0,.2,1);--dur:160ms;

  --fs-hero:clamp(32px,4.1vw,54px);
  --fs-display:clamp(24px,3.4vw,48px);
  --fs-heading:clamp(24px,2.3vw,32px);
  --fs-title:clamp(16px,1.7vw,24px);
  --fs-body:clamp(14px,1.3vw,18px);
  --fs-micro:11px;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--text);font-family:"Venu Aero",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;font-weight:400;overflow-x:hidden}
img{max-width:100%;display:block}
h1,h2,h3,p{margin:0}
ul{margin:0;padding:0;list-style:none}
a{color:var(--accent);text-decoration:none;transition:opacity var(--dur) var(--ease)}
a:hover{opacity:.6;color:var(--accent)}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
hr{border:0}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition-duration:0.01ms !important;animation-duration:0.01ms !important}}

.skip{position:absolute;left:-9999px;top:0;z-index:50;padding:12px 18px;background:var(--accent);color:#000;font-size:14px}
.skip:focus{left:8px;top:8px;opacity:1}

/* ---------- header ---------- */
.site-header{position:relative;z-index:10;display:flex;align-items:flex-start;justify-content:space-between;gap:32px;padding:clamp(14px,2.6vw,37px) clamp(16px,2.64vw,38px) 0}
.brand{display:flex;flex-direction:column;align-items:flex-start;opacity:1;color:var(--text)}
.brand:hover{opacity:1}
.brand__mark{width:clamp(96px,8.55vw,123px);height:auto}
.nav{display:flex;align-items:center;padding-top:4px}
.nav a{padding:10px;font-size:var(--fs-body);line-height:1;color:var(--text);white-space:nowrap}
.contact-cluster{display:flex;align-items:center;gap:clamp(14px,2.1vw,30px);padding-top:13px}
.contact-cluster__cta{font-size:var(--fs-body);line-height:1;color:var(--text);white-space:nowrap}
.contact-cluster__reply{display:none}
.icon-row{display:flex;align-items:center;gap:20px}
.icon-link{display:inline-flex;align-items:center;justify-content:center}
.lang{display:flex;align-items:center;gap:2px}
.lang__btn{padding:5px 7px;font-family:Inter,system-ui,sans-serif;font-size:10px;letter-spacing:.06em;color:var(--text);opacity:.5;border-radius:3.139px;transition:opacity var(--dur) var(--ease),background var(--dur) var(--ease)}
.lang__btn:hover{opacity:.85}
.lang__btn.is-active{opacity:1;background:var(--neutral-875)}
.burger{display:none;width:38px;height:28px;flex-direction:column;align-items:flex-end;justify-content:space-between}
.burger span{display:block;width:30px;height:4px;border-radius:100px;background:var(--text)}

/* ---------- hero ---------- */
.hero{position:relative;isolation:isolate;min-height:clamp(460px,62.5vw,900px);display:flex;flex-direction:column;justify-content:flex-end;padding:0 var(--gutter) clamp(24px,2.7vw,39px);overflow:hidden;margin-top:calc(-1 * clamp(52px,7vw,99px))}
.hero__media{position:absolute;inset:0;z-index:-1}
.hero__media img{width:100%;height:100%;object-fit:cover;opacity:.4}
.hero__title{max-width:1196px;margin-left:clamp(0px,.7vw,10px);font-size:var(--fs-hero);line-height:1;text-wrap:pretty}
.read-more{display:flex;flex-direction:column;align-items:center;gap:8px;align-self:center;margin-top:clamp(28px,4.4vw,63px);opacity:.6;color:var(--text);font-size:var(--fs-body);line-height:1}
.read-more img{width:18.793px;height:18.793px;transform:rotate(135deg)}
.read-more__m{display:none}

/* ---------- section titles ---------- */
.section-title{font-weight:400;font-size:var(--fs-heading);line-height:1}
.section-title--muted{color:var(--muted)}
.section-title--orange{color:var(--credit)}
.section-title--lime{color:var(--accent)}
.eyebrow{display:flex;gap:12px;font-size:var(--fs-micro);line-height:1;letter-spacing:.04em;text-transform:uppercase;color:var(--accent)}
.eyebrow--split{justify-content:space-between}

/* ---------- case studies ---------- */
.cases{padding:clamp(48px,3.9vw,56px) var(--gutter) clamp(72px,8.3vw,120px);display:flex;flex-direction:column;gap:clamp(32px,4.4vw,64px)}
.cases__intro{display:flex;flex-direction:column;gap:8px}
.cases__lede{max-width:580px;font-size:var(--fs-title);line-height:1.35;text-wrap:pretty}
.cases__hint{opacity:.6;font-size:var(--fs-body);line-height:1}
.cases__hint-inner{display:flex;align-items:center;flex-wrap:wrap;gap:6px}
.cases__body{display:flex;flex-direction:column;gap:20px}
.ab-inline{display:inline-flex;align-items:center;justify-content:center;width:22px;height:20px;border-radius:3.139px;font-weight:400;font-size:13px;color:#000}
@media (max-width:899px){.ab-inline{width:18px;height:16px;font-size:11px}}
.ab-inline--a{background:var(--amber)}
.ab-inline--b{background:var(--accent)}
.players{display:flex;flex-direction:column;gap:20px}

.player{display:grid;grid-template-columns:32px 1fr auto;grid-template-areas:"title title ab" "play bar bar" "note note note";gap:16px 8px;align-items:center;padding:16px;border-radius:12px;background:var(--surface-card);box-shadow:inset 0 0 0 1px var(--hairline)}
.player__title{grid-area:title;min-width:0;font-weight:400;font-size:16px;line-height:1.5;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.player__title br{display:none}
.player .ab{margin-left:4px}
.ab{grid-area:ab;display:flex;gap:6px}
.ab__btn{display:flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:4px;background:var(--hairline);opacity:.4;font-family:Inter,system-ui,sans-serif;font-weight:700;font-size:12px;line-height:1;color:var(--text);transition:opacity var(--dur) var(--ease),background var(--dur) var(--ease)}
.ab__btn:hover{opacity:.7}
.ab__btn.is-on{background:var(--amber);color:#000;opacity:1}
.ab__btn.is-on[data-source="B"]{background:var(--accent)}
.transport{grid-area:play;position:relative;width:32px;height:32px;flex:0 0 auto;border-radius:50%;box-shadow:inset 0 0 0 1px var(--neutral-0);display:flex;align-items:center;justify-content:center;transition:opacity var(--dur) var(--ease)}
.transport:hover{opacity:.6}
.transport__play{width:12px;height:12px;fill:var(--neutral-0);transform:translateX(6%)}
.transport__pause{display:none;gap:2px}
.transport__pause i{display:block;width:3px;height:13px;background:var(--neutral-0)}
.player.is-playing .transport__play{display:none}
.player.is-playing .transport__pause{display:flex}
.player.is-unavailable .transport{opacity:.3;cursor:not-allowed}
.player.is-loading .transport{opacity:.35;cursor:progress;animation:player-wait 1.1s ease-in-out infinite}
@keyframes player-wait{0%,100%{opacity:.35}50%{opacity:.7}}

.bar{grid-area:bar;position:relative;display:flex;flex-direction:column;gap:4px;min-width:0}
.bar__rail{position:relative;height:4px;border-radius:2px;background:none}
.bar__rail::before{content:"";position:absolute;inset:0;border-radius:inherit;background:var(--orange-400)}
.player[data-source="B"] .bar__rail::before{background:var(--accent);opacity:.2}
.bar__fill{position:absolute;left:0;top:0;height:100%;width:0;border-radius:inherit;background:var(--accent);opacity:0;transition:opacity var(--dur) var(--ease)}
.player[data-source="B"] .bar__fill{opacity:1}
.bar__scrub{position:absolute;left:0;top:-8px;width:100%;height:20px;margin:0;opacity:0;cursor:pointer}
.bar__times{display:flex;justify-content:space-between;font-size:9px;line-height:1;letter-spacing:.04em;color:var(--text-faint)}
.player__note{grid-area:note;font-size:14px;line-height:1.4;color:var(--text-body);opacity:.8;text-wrap:pretty}

@media (min-width:1000px){
  .cases__intro{display:grid;grid-template-columns:clamp(200px,18vw,260px) 68px 1fr auto;column-gap:clamp(24px,2.8vw,40px);align-items:start}
  .cases__intro .section-title{grid-column:1}
  .cases__lede{grid-column:3}
  .cases__hint{display:grid;grid-template-columns:clamp(200px,18vw,260px) 68px 1fr auto;column-gap:clamp(24px,2.8vw,40px)}
  .cases__hint-inner{grid-column:3}
  .player{grid-template-columns:clamp(200px,18vw,260px) 68px 1fr auto;grid-template-areas:"title play bar ab" "title play note note";column-gap:clamp(24px,2.8vw,40px);row-gap:12px;align-items:start;padding:44px 0 0;border-radius:0;background:none;box-shadow:none}
  .player .ab{margin-left:-12px}
  .player__title{align-self:start;font-size:var(--fs-title);line-height:1.2;white-space:normal;overflow:visible}
  .player__title br{display:inline}
  .transport{width:68px;height:68px}
  .transport__play{width:25px;height:25px}
  .transport__pause i{width:6px;height:27px}
  .transport__pause{gap:4px}
  .bar{gap:11px}
  .bar__rail{height:8px;border-radius:100px}
  .bar__fill{border-radius:100px}
  .bar__times{font-size:var(--fs-body);letter-spacing:normal;color:var(--text)}
  .ab{gap:4px}
  .ab__btn{width:31.208px;height:28.434px;border-radius:3.139px;font-family:"Venu Aero",sans-serif;font-weight:400;font-size:18px}
  .player__note{max-width:726px;font-size:var(--fs-body);color:var(--text)}
}

/* ---------- about + work ---------- */
.about{position:relative;isolation:isolate;overflow:hidden;padding:clamp(48px,14.7vw,212px) 0 clamp(48px,8.3vw,120px)}
.about__media{position:absolute;left:0;right:0;top:37px;height:clamp(420px,60vw,856px);z-index:-2}
.about__media img{width:100%;height:100%;object-fit:cover;opacity:.5;filter:grayscale(1)}
.about::before{content:"";position:absolute;left:0;right:0;top:0;height:clamp(128px,22vw,320px);background:var(--scrim);z-index:-1}
.about__inner{display:flex;flex-direction:column;align-items:center;gap:clamp(16px,2.6vw,38px);padding:0 var(--gutter);text-align:center}
.about__title{font-size:var(--fs-display)}
.about__copy{max-width:1072px;opacity:.8;font-size:clamp(14px,2.2vw,32px);line-height:1.15;text-wrap:pretty}

.work{padding:clamp(40px,12vw,174px) var(--gutter) 0;display:flex;flex-direction:column;gap:clamp(24px,3.2vw,46px)}
.work__grid{display:grid;grid-template-columns:1fr;gap:20px}
.work-item{border-radius:8px;background:var(--surface-card);box-shadow:inset 0 0 0 1px var(--hairline)}
.work-item__link{display:flex;align-items:center;gap:12px;padding:12px;color:var(--text);transition:opacity var(--dur) var(--ease)}
.work-item__link:hover{opacity:.6;color:var(--text)}
.work-item__art{width:64px;flex:0 0 auto;aspect-ratio:1;border-radius:4px;overflow:hidden}
.work-item__art img{width:100%;height:100%;object-fit:cover}
.work-item__text{display:flex;flex-direction:column;gap:4px;min-width:0}
.work-item__title{font-size:14px;line-height:1.4;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.work-item__credit{font-size:12px;line-height:1;letter-spacing:.04em;color:var(--credit);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

@media (min-width:760px){
  .work__grid{grid-template-columns:repeat(2,1fr)}
}
@media (min-width:1100px){
  .work{padding-left:45px;padding-right:45px}
  .work .section-title{margin-left:14px}
  .work__grid{grid-template-columns:repeat(4,1fr)}
  .work-item{border-radius:0;background:none;box-shadow:none}
  .work-item__link{display:block;padding:0}
  .work-item__art{width:100%;border-radius:32.299px}
  .work-item__text{gap:10px;padding:27px 3px 0}
  .work-item__title{font-size:var(--fs-body);line-height:1;white-space:normal;overflow:visible}
  .work-item__credit{font-size:var(--fs-body);letter-spacing:normal;white-space:normal;overflow:visible}
}

/* ---------- rates ---------- */
.rates{position:relative;isolation:isolate;overflow:hidden;padding:clamp(0px,3.4vw,48px) 0 clamp(72px,8.3vw,120px)}
.rates__media{position:absolute;left:0;right:0;top:43px;height:clamp(500px,72vw,1108px);z-index:-2}
.rates__media img{width:100%;height:100%;object-fit:cover;opacity:.2}
.rates::before{content:"";position:absolute;left:0;right:0;top:0;height:clamp(128px,20vw,280px);background:var(--scrim);z-index:-1}
.rates__inner{padding:0 var(--gutter);display:flex;flex-direction:column;gap:14px}
.rates__title{font-size:var(--fs-hero);line-height:1}
.rates__lede{font-size:var(--fs-body);line-height:1.45}
.rates__arrow{width:22px;height:22px;margin:18px 0 30px;transform:rotate(135deg)}

.packages{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));gap:24px}
.package{display:flex;flex-direction:column;gap:16px;padding:20px;border-radius:12px;background:rgba(13,13,14,.9);box-shadow:inset 0 0 0 1px var(--hairline)}
.package--recommended{box-shadow:inset 0 0 0 1px var(--accent)}
.package__name{font-weight:400;font-size:clamp(20px,2.3vw,32px);line-height:1.2}
.rule{height:1px;background:var(--hairline)}
.price-row{display:flex;flex-direction:column;gap:12px}
.price-row__head{display:flex;align-items:center;justify-content:space-between;gap:16px}
.price-row__service{font-size:14px;line-height:1.4}
.price-row__figure{display:flex;align-items:baseline;gap:4px}
.price-row__figure i{font-style:normal;font-size:var(--fs-micro);line-height:1;letter-spacing:.04em;color:var(--text-body)}
.price-row__figure b{font-weight:400;font-size:16px;line-height:1.5;color:var(--accent)}
.price-row__note{font-size:var(--fs-micro);line-height:1.35;letter-spacing:.04em;color:var(--text-body);text-wrap:pretty}

@media (min-width:1000px){
  .packages{grid-template-columns:repeat(2,minmax(0,638px));column-gap:68px;padding-top:30px}
  .package{gap:26px;padding:0;border-radius:0;background:none;box-shadow:none}
  .package--recommended{box-shadow:none}
  .eyebrow{display:none}
  .rule{background:rgba(255,255,255,.2)}
  .price-row{gap:18px}
  .price-row__service{font-size:var(--fs-title);line-height:1.2}
  .price-row__figure{gap:10px}
  .price-row__figure i{font-size:var(--fs-body);letter-spacing:normal}
  .price-row__figure b{font-size:var(--fs-title);line-height:1.2}
  .price-row__note{max-width:470px;font-size:var(--fs-body);line-height:1.4;letter-spacing:normal;color:var(--text);opacity:.8}
  .price-row + .rule{margin-top:14px}
}

.contact{display:flex;flex-direction:column;align-items:center;gap:clamp(24px,2.9vw,42px);padding-top:clamp(48px,7.6vw,110px)}
.contact__icons{display:flex;align-items:center;gap:clamp(27px,2.4vw,34.286px)}
.contact__icons img{height:auto}
.contact__icons .icon-link:first-child img{width:clamp(36px,3.2vw,45.6px)}
.contact__icons .icon-link:last-child img{width:clamp(28.43px,2.5vw,36px)}
.contact__reply{opacity:.8;font-size:var(--fs-title);line-height:1;text-align:center}

/* ---------- footer ---------- */
.site-footer{display:flex;flex-direction:column;align-items:center;padding:clamp(90px,19.4vw,280px) var(--gutter) clamp(100px,15.3vw,220px)}
.site-footer__mark{width:clamp(154px,23.5vw,338px);height:auto}

/* ---------- mobile (390 frame) ---------- */
@media (max-width:899px){
  .site-header{position:sticky;top:0;align-items:center;height:64px;padding:0 16px;background:var(--bg);border:1px solid var(--hairline)}
  .brand{flex-direction:row;align-items:center;gap:clamp(12px,4vw,42px)}
  .brand__mark{width:96px}
  .burger{display:flex;position:relative;z-index:12}
  .burger span{transition:transform var(--dur) var(--ease),opacity var(--dur) var(--ease)}
  .site-header.is-open .burger span:nth-child(1){transform:translateY(12px) rotate(45deg)}
  .site-header.is-open .burger span:nth-child(2){opacity:0}
  .site-header.is-open .burger span:nth-child(3){transform:translateY(-12px) rotate(-45deg)}
  /* menu screen (Figma 62:2 Mobile_Menu_Open: 390x460, 90% black over hero photo) */
  .nav,.contact-cluster{display:none}
  .site-header.is-open{border-color:transparent;background:transparent}
  .site-header.is-open .brand,.site-header.is-open .burger{position:relative;z-index:12}
  .site-header.is-open .burger{align-items:flex-start}
  .site-header.is-open .burger span:nth-child(1){transform:translate(-4px,12px) rotate(45deg)}
  .site-header.is-open .burger span:nth-child(3){transform:translate(-4px,-12px) rotate(-45deg)}
  .site-header.is-open .nav{display:flex;position:absolute;left:0;right:0;top:0;height:460px;z-index:11;flex-direction:column;align-items:flex-start;gap:14px;padding:141px 16px 0;background:linear-gradient(rgba(0,0,0,.9),rgba(0,0,0,.9)),url("../img/hero-studio.jpg") center/cover no-repeat}
  .site-header.is-open .nav a{padding:0;font-size:24px;line-height:1.2;color:var(--amber)}
  .site-header.is-open .nav a[href="#rates"]{order:3}
  .site-header.is-open .contact-cluster{display:flex;position:absolute;left:0;right:0;top:340px;z-index:11;flex-direction:column;align-items:center;gap:24px;padding:3px 16px 0}
  .site-header.is-open .contact-cluster__cta{display:none}
  .site-header.is-open .lang{position:static;order:3;gap:6px}
  .site-header.is-open .lang__btn{font-size:12px;padding:6px 10px}
  .site-header.is-open .icon-row{gap:27.076px}
  .site-header.is-open .icon-row img{height:auto}
  .site-header.is-open .icon-row .icon-link:first-child img{width:36.012px;content:url("../icons/mail-lime.svg")}
  .site-header.is-open .icon-row .icon-link:last-child img{width:28.43px;content:url("../icons/instagram-lime.svg")}
  .site-header.is-open .contact-cluster__reply{display:block;opacity:.8;font-size:14px;line-height:1}
  /* hero */
  .hero{margin-top:0;min-height:460px;justify-content:space-between;padding:16px}
  .hero__media img{opacity:.35}
  .hero__title{font-size:32px;line-height:1.15}
  .read-more{align-self:stretch;margin-top:0;opacity:1;font-family:Inter,system-ui,sans-serif;font-size:11px;letter-spacing:.04em;text-transform:uppercase;color:var(--text-body)}
  .read-more__d{display:none}
  .read-more__m{display:inline}
  .read-more img{width:14px;height:14px;transform:none}
  /* case studies */
  .cases{padding:48px 16px;gap:32px}
  .cases__intro .section-title{color:var(--amber)}
  .cases__lede{font-size:14px;line-height:1.4;color:var(--text-body)}
  .cases__hint{opacity:.8;font-size:14px;line-height:1.4}
  .cases__hint-inner{gap:4px}
  .cases__body{gap:32px}
  .players{gap:32px}
  /* about + work */
  .about{padding:48px 0}
  .about__media{top:0;height:100%}
  .about__media img{opacity:.4}
  .about::before{display:none}
  .about__inner{align-items:flex-start;text-align:left;gap:16px;padding:0 16px}
  .about__copy{opacity:.9;line-height:1.4}
  .work{padding:40px 16px 0;gap:24px}
  .work .section-title{font-size:11px;line-height:1;letter-spacing:.06em;text-transform:uppercase}
  /* rates */
  .rates{padding:48px 0 0}
  .rates__media{top:0;height:100%}
  .rates__inner{padding:0 16px;gap:8px}
  .rates__title{font-size:24px;line-height:1.2}
  .rates__lede{font-size:14px;line-height:1.4;color:var(--text-body)}
  .rates__lede br{display:none}
  .rates__arrow{display:none}
  .packages{gap:32px;margin-top:24px}
  .price-row__note{line-height:1}
  .contact{padding-top:48px;gap:24px}
  .contact__reply{font-size:14px}
  .site-footer{padding:90px 16px 100px}
}